SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal CSS Menu driving me mad! :D

    Trying to get this dropdown working correctly in all browsers but having issues. I need some assistance from the css brains of the world. Im sure you can see what im trying to reach, however one thing i need to have is the text for each option on one line. The main menu items have to have different widths, but each sub menu should have the width of the largest text within the sub group, and the colour should change to yellow for the full width.

    This may make no sense and if not please let me know.

    here is my code (sorry no live version stuck behind pwd area(

    HTML Code:
    <style type="text/css">
    
    body {
    	font-family: arial, helvetica, serif;
        text-align:center;
        background:#000;
    }
    
    #nav, #nav ul { /* all lists */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	line-height: 1;
        background: white;
    }
    
    #nav a {
    	display: block;
        color:#000;
        text-decoration:none;
        padding:4px;
        text-transform: uppercase;
        background: white;
    }
    
    #nav a:hover{
         background: yellow;
    }
    
    #nav li { /* all list items */
    	float: left;
        color:#000;
        font-weight:bold;
    	width: auto; /* width needed or else Opera goes nuts */
        margin-right: 5px;
    }
    
    #nav li ul { /* second-level lists */
    	position: absolute;
    	width: auto;
    	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }
    
    #nav li ul ul { /* third-and-above-level lists */
    	margin: -1em 0 0 15em;
    }
    
    #nav li:hover ul ul, #nav li.sfhover ul ul {
    	left: -999em;
    }
    
    #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
    	left: auto;
    }
    
    #content {
    	clear: left;
    	color: #ccc;
    }
    
    </style>
    
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    
    <ul id='nav'>
    	<li><a href='#'>Home</a></li>
    	<li><a href='#'>Info</a></li>
    	<li><a href='#'>Collection</a>
        	<ul>
            	<li><a href='32'>Spring / Summer 2007
                	<ul>
                    	<li><a href='33'>Hoody</a></li>
                        <li><a href='34'>T-Shirts</a></li>
                    </ul>
                </li>
            	<li><a href='35'>Winter / Autumn
                	<ul>
                    	<li><a href='37'>Caps</a></li>
    					<li><a href='36'>T-Shirts</a></li>
    				</ul>
                </li>
            </ul>
    	<li><a href='#'>CONTACT</a></li>
    </ul>
    Last edited by enormousrodent; Jan 17, 2008 at 02:58.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Unfortunately I am not a guru, but I can suggest take a look at this web site that has a lot of very good resources including a drop down menu, and see how he is doing it:

    http://www.pmob.co.uk/temp/drop-down-multi.htm

    Regards
    joejac

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You are missing an </li>

    Just before the Contact link, to close to nested <ul>s inside Collection

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the input guys. I have looked at the recommended site before, but the reason why i am asking for some help is because i needed some very specific requirements. The widths of the main menu icons need to stay the same width as they are now. The sub menu items need to be on one line, not wrapped and the same width as the longest named item. It has to look neat...

    Paul..ur genious not around

    Rodent

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This would be quite easy if it were not for the existance of IE (both 6 and 7).....

    First, besides the missing closing </li> Dr John pointed out, you are also missing a couple of closing </a>s as well :
    Code:
    <ul id='nav'>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Info</a></li>
        <li><a href='#'>Collection</a>
            <ul>
                <li><a href='32'>Spring / Summer 2007</a>
                    <ul>
                        <li><a href='33'>Hoody</a></li>
                        <li><a href='34'>T-Shirts</a></li>
                    </ul>
                </li>
                <li><a href='35'>Winter / Autumn</a>
                    <ul>
                        <li><a href='37'>Caps</a></li>
                        <li><a href='36'>T-Shirts</a></li>
                    </ul>
                </li>
            </ul>
    	</li>
        <li><a href='#'>CONTACT</a></li>
    </ul>
    To make positioning of the dropdowns more accurate, it is best to give the top level a defined height (in ems to allow for text resize), and an equal line height will centre the text without the top and bottom padding. The <li>s should have relative position set so that the absolutely positioned child <ul>s will be positioned relative to them. The top level <a>s need to be floated as well to keep IE6 happy.

    Some of the top level styles need to be over-ridden for the drop downs, especially the floats. Nowrap white-space will force the second level links to one line. The second level <ul>s can be positioned at left:0 and top equal to height of top level. The third level <ul>s can be positioned left 100% and top 3px (this places the third level to the right of the second level and offsets it a fraction down to provide visual separation from the top level. For decent browsers, that is all that is needed.

    IE6 annoyingly will not constrain a block element with no width inside an absolute element with no width, so widths will need to be specified for the second and third level <a>s (IE6 only). IE6 will also put a lot of space between the dropdown <li>s unless they are floated, which also then requires a clear to stack them vertically.

    I had a play and came up with this css :
    Code:
    body {
    	font-family: arial, helvetica, serif;
    	background:#000;
    }
    #nav, #nav ul { /* all lists */
        padding: 0;
        margin: 0;
        list-style: none;
        line-height: 1;
        background: white;
    }
    #nav a {
    	display: block;
    	color:#000;
    	text-decoration:none;
    	padding:0 4px;
    	text-transform: uppercase;
    	background: white;
    	height: 1.5em;
    	line-height: 1.5em;
    	float: left;
    	text-align: center;
    }
    #nav a:hover{
         background: yellow;
    }
    #nav li { /* all list items */
    	float: left;
    	color:#000;
    	font-weight:bold; /* width needed or else Opera goes nuts */
    	margin-right: 5px;
    	position: relative;
    }
    #nav ul { /* second-level lists */
    	position: absolute;
    	left: -999em; 
    	top: 1.5em;
    }
    #nav ul li {
    	margin: 0;
    	float: none;
    }
    * html #nav ul li {
    	float: left;
    	clear: left;
    }
    #nav ul a {
    	white-space: nowrap;
    	float: none;
    }
    * html #nav ul a {
    	width: 12em;
    }
    * html #nav ul ul a {
    	width: 6em;
    }
    #nav li:hover ul ul, #nav li.sfhover ul ul {
        left: -999em;
    }
    #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
        left: 0px;
    }
    #nav li li:hover ul, #nav li li.sfhover ul {
    	left: 100%;
    	top: 3px;
    }
    #content {
        clear: left;
        color: #ccc;
    }
    Unfortunately, this still suffers from the dropdown <a>s not expanding the full width of the <ul> in IE7 - not sure why that is, maybe someone else can shed light on that one.

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update:

    To keep the parent selection highlighted while navigating the dropdowns, move the background colour change to the <li>s instead of the <a>s - this also hides the fact the <a>s don't go full width in IE7. Remove the css rule for #nav a:hover, and remove the background colour from the <a>s. Then implement the following changes (in red) :
    Code:
    #nav a {
    	display: block;
    	color:#000;
    	text-decoration:none;
    	padding:0 4px;
    	text-transform: uppercase;
    	height: 1.5em;
    	line-height: 1.5em;
    	float: left;
    	text-align: center;
    }
    #nav li { /* all list items */
    	float: left;
    	color:#000;
    	font-weight:bold; 
    	margin-right: 5px;
    	position: relative;
    	background: white;
    }
    #nav ul { /* second-level lists */
    	position: absolute;
    	left: -999em;
    	top: 1.5em;
    	background: white;/* IE7 drops the hover without this*/
    }
    #nav li:hover, #nav li.sfhover {
    	background-color: yellow;
    }

  7. #7
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

    This is fantastic, cannot thank you enough...dam those pesky closing brackets... (its generated on the fly via script so i need to check my loops)

    I tried to implement your additioanl changes but now for some reason i dont get any yellow hover now at all in ie7.. i have no other browser to check this with atm till i get home...

    what is this also?
    .sfhover ul ul {

    is that a miss type?? sfhover??

    Thanks again btw

    Rodent

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works for me in IE7 (check also in IE6 & FF)...

    "sfhover" is the class the javascript applies on the hover events for the benefit of IE.

  9. #9
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you please attach the whole html code in a post so i can copy and paste and i know it will work.

    Thanks again for all your help!

    Rodent

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the complete test file I used when working on this, including the css within :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	font-family: arial, helvetica, serif;
    	background:#000;
    }
    #nav, #nav ul { /* all lists */
        padding: 0;
        margin: 0;
        list-style: none;
    }
    #nav a {
    	display: block;
    	color:#000;
    	text-decoration:none;
    	padding:0 4px;
    	text-transform: uppercase;
    	height: 1.5em;
    	line-height: 1.5em;
    	float: left;
    	text-align: center;
    }
    #nav li { /* all list items */
    	float: left;
    	color:#000;
    	font-weight:bold;
    	margin-right: 5px;
    	position: relative;
    	background: white;
    }
    #nav ul { /* second-level lists */
    	position: absolute;
    	left: -999em;
    	top: 1.5em;
    	background: white;
    }
    #nav ul li {
    	margin: 0;
    	float: none;
    }
    * html #nav ul li {
    	float: left;
    	clear: left;
    }
    #nav ul a {
    	white-space: nowrap;
    	float: none;
    }
    * html #nav ul a {
    	width: 12em;
    }
    * html #nav ul ul a {
    	width: 6em;
    }
    #nav li:hover, #nav li.sfhover {
    	background-color: yellow;
    }
    #nav li:hover ul ul, #nav li.sfhover ul ul {
        left: -999em;
    }
    #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
        left: 0px;
    }
    #nav li li:hover ul, #nav li li.sfhover ul {
    	left: 100%;
    	top: 3px;
    }
    #content {
        clear: left;
        color: #ccc;
    }
    </style>
    
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    
    </head>
    
    <body>
    <ul id='nav'>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Info</a></li>
        <li><a href='#'>Collection</a>
            <ul>
                <li><a href='32'>Spring / Summer 2007</a>
                    <ul>
                        <li><a href='33'>Hoody</a></li>
                        <li><a href='34'>T-Shirts</a></li>
                    </ul>
                </li>
                <li><a href='35'>Winter / Autumn</a>
                    <ul>
                        <li><a href='37'>Caps</a></li>
                        <li><a href='36'>T-Shirts</a></li>
                    </ul>
                </li>
            </ul>
    	</li>
        <li><a href='#'>CONTACT</a></li>
    </ul> 
    
    </body>
    </html>

  11. #11
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot dude.... lifesaver!


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
  •