SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Vertical Menu

    I found a website a while ago which had a really good example of both a horizontal and vertical css menu. The problem is I canít remember where or what it was called and I am now having trouble with the vertical menu.

    The menu works fine in Firefox but in IE6 when you hover over a button the drop down menu doesnít flow down the page but goes across the page.

    Does anyone know how to fix this??? If not where the navigation comes from so I can go back to the site and re read the information. Or finally a good example of such a menu I particularly like how it still highlights the top level menu as you scroll over the second level menu.

    Cheers for any help.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS Menu - Horizontal</title>
    <style type="text/css">
    /* Root = Horizontal, Secondary = Vertical */
    ul#navmenu {
      margin: 0;
      border: 0 none;
      padding: 0;
      width: 564px; /*For KHTML*/
      list-style: none;
      height: 24px;
      background-color:#00FF99;
    }
    
    ul#navmenu li {
      margin: 0;
      border: 0 none;
      padding: 0;
      float: left; /*For Gecko*/
      display: inline;
      list-style: none;
      position: relative;
      height: 24px;
    }
    
    ul#navmenu ul {
      margin: 0;
      border: 0 none;
      padding: 0;
      list-style: none;
      display: none;
      position: absolute;
      top: 24px;
      left: 0;
    }
    
    ul#navmenu ul:after /*From IE 7 lack of compliance*/{
      clear: both;
      display: block;
      font: 1px/0px serif;
      content: ".";
      height: 0;
      visibility: hidden;
    }
    
    ul#navmenu ul li {
      float: left; /*For IE 7 lack of compliance*/
      display: block !important;
      display: inline; /*For IE*/
    }
    
    /* Root Menu */
    ul#navmenu a {
      border: 1px solid #FFF;
      border-right-color: #CCC;
      border-bottom-color: #CCC;
      padding: 0 6px;
      float: none !important; /*For Opera*/
      float: left; /*For IE*/
      display: block;
      background: #ebeced;
      color: #666;
      font: 11px/22px Arial, Helvetica, sans-serif;
      text-decoration: none;
      height: auto !important;
      height: 1%; /*For IE*/
      width: 80px;
    }
    
    /* Root Menu Hover Persistence */
    ul#navmenu a:hover,
    ul#navmenu li:hover a,
    ul#navmenu li.iehover a {
      background: #e72130;
      color: #FFF;
    }
    
    /* 2nd Menu */
    ul#navmenu li:hover li a,
    ul#navmenu li.iehover li a {
      float: none;
      background: #ebeced;
      color: #000;
    }
    
    /* 2nd Menu Hover Persistence */
    ul#navmenu li:hover li a:hover,
    ul#navmenu li:hover li:hover a,
    ul#navmenu li.iehover li a:hover,
    ul#navmenu li.iehover li.iehover a {
      background: #e72130;
      color: #FFF;
    }
    
    ul#navmenu ul ul,
    ul#navmenu ul ul ul {
      display: none;
      position: absolute;
      top: 0;
      left: 94px;
    }
    
    /* Do Not Move - Must Come Before display:block for Gecko */
    ul#navmenu li:hover ul ul,
    ul#navmenu li:hover ul ul ul,
    ul#navmenu li.iehover ul ul,
    ul#navmenu li.iehover ul ul ul {
      display: none;
    }
    
    ul#navmenu li:hover ul,
    ul#navmenu ul li:hover ul,
    ul#navmenu ul ul li:hover ul,
    ul#navmenu li.iehover ul,
    ul#navmenu ul li.iehover ul,
    ul#navmenu ul ul li.iehover ul {
      display: block;
    }
    
    
    </style>
    <!--[if gte IE 5.5]>
    <script language="JavaScript" src="dhtml.js" type="text/JavaScript"></script>
    <![endif]-->
    </head>
    <body>
    
    
    <ul id="navmenu">
    <li><a href="/">Home</a></li> 
    	<li><a href="">About Us</a>
    		<ul>
    		<li><a href="">work</a></li>
    		<li><a href="">cv</a></li>
    		<li><a href="">interests</a></li>
       		</ul>
       		</li> 
    	<li><a href="">test</a> 
    		<ul>
    		<li><a href="">test</a></li>
    		<li><a href="">test</a></li>
    		<li><a href="">test</a></li>
    		</ul>
    		</li> 
    	<li><a href="">sport</a> 
            <ul>
            <li><a href="">football</a>
    		        <li><a href="">cricket</a>
            </ul>
          	</li> 
    
    	<li><a href="">Gambling</a> 
            <ul>
            <li><a href="">poker</a></li>
            <li><a href="">sports betting</a></li>
    		</ul>
          	</li> 
    
    	<li><a href="">Contact Us</a></li> 		
    			 
    </ul>
    
    </body>
    </html>

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In this thread: http://www.sitepoint.com/forums/showthread.php?t=518261
    Paul gave me a nice link with a summary of various menues.
    Here is the link: http://www.tyssendesign.com.au/artic...down-low-down/

    Hope it helps

  3. #3
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The tyssendesign link is excellent.

    I have found a design I really like but have come to a weired problem when I have been modifying the navigation. It works fine in FF but in IE6 the dropdown menu bottom border extends further than the dropdown menu.

    I have attached a picture to help understand the problem the top border problem is just how I have cut the picture its the extra border nextto the word Tremarctinae. Does anyone know a reason for this???

    Cheers


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Sons of Ursidae Menus - CSS Class</title>
    <meta name="copyright" content="Copyright © 2007, Alan Gresley" />
    <link rel="shortcut icon" href="favicon.ico" />
    <style type="text/css">
    
    body {
    	font-family:verdana;
    	font-size: 100%;
    	background:#fff;
    	margin:0px;
    }
    
    div#menu {
    	position:absolute;
    	left:0;
    	margin:0 0 0 20px;
    	padding:0;
    	height:auto;
    	width:12em;
    	text-align:left;
    }
    
    /* ***********************************************************************************
    
    Convertable Nestled list menu by DUNCAL Productions
    © 2007 by Duncan Hill and Alan Gresley
    http://
    
    Converts from a verticle menu with flyout submenus or a horizontal menu, with dropdown 
    and then flyout submenus with a few changes in style where ****CONVERT**** appears.
    
    *********************************************************************************** */
    
    ul#navigation{
    	font-size: 90%;
    	position:absolute;
    	left:0;
    }
    ul#navigation, ul#navigation ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	border-left: 1px solid #238126;
    	border-bottom: 0.04em solid #238126;
    }
    ul#navigation li { 
    	line-height : 1.35em;
    	position: relative;
    	float: left;
    }
    ul#navigation>li li { /* Needed for Opera 9, maybe because it's decent CSS. Hide from IE6 */
    	float: none;
    }
    
    #navigation a {
    	display: block;
    	width: 8em; /*            ****CHANGE MENU WIDTH**** */
    	color: #006600;
    	background-color: #b0efbe;
    	padding: 4px 0.5em;
    	text-decoration: none;
    	border-top: 0.04em solid #238126;
    	border-right: 1px solid #238126;
    }
    ul#navigation a:hover {
    	color: #000;
    	background-color: #99e1b1;
    }
    
    ul#navigation li li a {
    	width: 8em; /*           ****CHANGE SUBMENU WIDTH**** */
    }
    ul#navigation li li li a {
    	width: 8em; /*           ****CHANGE SUBMENU WIDTH**** */
    }
    ul#navigation li li a {
    	width: 8em; /*           ****CHANGE SUBMENU WIDTH**** */
    }
    ul#navigation li li li a {
    	width: 8em; /*           ****CHANGE SUBMENU WIDTH**** */
    }
    
    ul#navigation li ul {
    	position : absolute;
    	left: -999em;
    }
    #navigation li:hover ul ul, #navigation li.sfhover ul ul {
    	left: -999em;
    }
    
    #navigation li:hover ul, #navigation li li:hover ul, #navigation li.sfhover ul, #navigation li li.sfhover ul {
    	top: 0;
    	left: -1px;
    	margin-left: 100%;
    }
    
    /*					****DISPLAYS HORIZONTAL MENU**** */
    #navigation li:active ul, #navigation li:hover ul, #navigation li.sfhover ul {
       	top: 100%;
    	margin-left: 0;
    }
    div#menu {
    	width:100%;
    }
    
    
    </style>
    
    <!--[if lt IE 7]>
    
    <style type="text/css">
    ul#navigation li ul { /* Just to help IE6 along */
    	width : 12em;
    }
    </style>
    
    <script type="text/javascript" src="sfhover.js"></script>
    <script type="text/javascript">
        addEvent(window, 'load', doIEStuff);
    </script>
    <![endif]-->
    
    </head>
    
    <body>
    
    <div id="menu">
    <ul id="navigation" class="main">
    	<li><a href="#">Canidae</a></li>
    	<li><a href="#">Ursidae</a>
    		<ul>
    
    			<li><a href="#">Ursinae</a>
    				<ul>
    					<li><a href="#">Brown Bear</a></li>
    					<li><a href="#">American Black Bear</a></li>
    					<li><a href="#">Polar Bear</a></li>
    					<li><a href="#">Asiatic Black Bear</a></li>
    
    					<li><a href="#">Sloth Bear</a></li>
    					<li><a href="#">Sun Bear</a></li>
    					<li><a href="#">Auvergne Bear</a></li>
    					<li><a href="#">Etruscan Bear</a></li>
    					<li><a href="#">European Cave Bear</a></li>
    					<li><a href="#">MacFarlane's Bear</a></li>
    
    				</ul>
    			</li>
    			<li><a href="#">Tremarctinae</a>
    
    			<!-- etc. -->
    
    			</li>
    		</ul>
    	</li>
    
    	<li><a href="#">Mephitidae</a></li>
    </ul>
    </div>
    </div>
    </div>
    </body>
    
    </html>
    Attached Images Attached Images

  4. #4
    SitePoint Addict Romuba's Avatar
    Join Date
    Jun 2007
    Location
    Cape Town, South Africa
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fredda View Post
    In this thread: http://www.sitepoint.com/forums/showthread.php?t=518261
    Paul gave me a nice link with a summary of various menues.
    Here is the link: http://www.tyssendesign.com.au/artic...down-low-down/

    Hope it helps
    It certainly has for me. Nav buttons have constantly been a source of frustration as I just seem to battle every time I need to do them. Tyssendesign's thread is great and I am pleased to see that I have already got hold of the one he recommends as being about the best - Ultimate Drop-down Menu. I have used it although initially found it very cumbersome, but that it because it is so all-encompassing and flexible.

    The article from List Apart is for me, for now, exactly what I am looking for. I have now created a Nav template which I can change easily as the colours, or even the actual nav buttons, change.

    Thanks you very much for the link.
    Ross Bartholomew
    Web Designer/Developer
    BartWebSites
    E-mail: ross@bartwebsites.com

  5. #5
    SitePoint Member
    Join Date
    Sep 2007
    Location
    NSW, Australia
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just adjust the width set for the <ul> in the CC

    <!--[if lt IE 7]>

    <style type="text/css">
    ul#navigation li ul { /* Just to help IE6 along */
    width : 12em; /* change to 8em */
    }
    </style>

    <script type="text/javascript" src="sfhover.js"></script>

    <![endif]-->

    Also remove the below from the above script, wasn't needed.

    <script type="text/javascript"> <!-- remove -->
    addEvent(window, 'load', doIEStuff); <!-- remove -->
    </script> <!-- remove -->

    The CSS rules can be called in via the above CC or use directly in the CSS as

    * html ul#navigation li ul { /* Just to help IE6 along */
    width : 8em;
    }

    The width just has to be the same or smaller then the width for the grandchild anchor elements.

    I really do need to fix up the article and the examples as i know better now


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •