SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Drop Down Menu

    Hi All,

    Does anyone know where I can find a good resource for a horizontal drop down menu? But I want the the drop down to be horizontal also. So the menu would have the main nav above, and then the drop down menu would would be parallel underneath? Thanks!

  2. #2
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im starting to make progress on what I am trying to accomplish. Right now I have all the nested lists commented out until i figure the main nav. As you can see from my demo. Then once this is working, then the nest lists will be horizontal in the gray area underneath.

    Here is the css so far:
    Code CSS:
    #globalNav {
    	margin: 0; padding: 0;
    	width: 800px;
    	height: 56px;
    }
     
    #globalNav li {
    	position:relative;
    	display:inline;
    	display:block;
    	text-indent:-9999px;
    }
     
    #globalNav li a {
    	position: relative;
    	display: block;
    	height: 27px;
    }
     
    #nav1 {left: 292px; width: 100px;}
    #nav2 {left: 405px; width: 77px;}
    #nav3 {left: 497px; width: 107px;}
    #nav4 {left: 619px; width: 100px;}
    #nav5 {left: 728px; width: 54px;}
     
    #nav1 a {background: url(../layout/nav.jpg) no-repeat 0px 0px;}	
    #nav1 a:hover {background: url(../layout/nav.jpg) no-repeat 0px -30px;}
     
    #nav2 a {background: url(../layout/nav.jpg) no-repeat -113px 0px;}	
    #nav2 a:hover {background: url(../layout/nav.jpg) no-repeat -113px -30px;}
     
    #nav3 a {background: url(../layout/nav.jpg) no-repeat -205px 0px;}	
    #nav3 a:hover {background: url(../layout/nav.jpg) no-repeat -205px -30px;}
     
    #nav4 a {background: url(../layout/nav.jpg) no-repeat -327px 0px;}	
    #nav4 a:hover {background: url(../layout/nav.jpg) no-repeat -327px -30px;}
     
    #nav5 a {background: url(../layout/nav.jpg) no-repeat -436px 0px;}	
    #nav5 a:hover {background: url(../layout/nav.jpg) no-repeat -436px -30px;}

  3. #3
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed! I changed the #globalNav li position to absolute

    Code CSS:
    #globalNav li {
    	position:absolute;
    	display:inline;
    	display:block;
    	text-indent:-9999px;
    }

    Now...the nested horizontal lists, any help?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could do something like this but it does depend exactly what you want.

    Code:
    #globalNav {
        margin: 0; padding: 0;
        width: 800px;
        height: 56px;
    }
    
    #globalNav li {
        position:absolute;
        text-indent:-9999px;
    }
    
    #globalNav li a {
        position: relative;
        display: block;
        height: 27px;
    }
    
    #nav1 {left: 292px; width: 100px;}
    #nav2 {left: 405px; width: 77px;}
    #nav3 {left: 497px; width: 107px;}
    #nav4 {left: 619px; width: 100px;}
    #nav5 {left: 728px; width: 54px;}
    
    #nav1 a {background: url(http://demo.baublitz.com/dailey/layout/nav.jpg) no-repeat 0px 0px;}    
    #nav1 a:hover {background: url(http://demo.baublitz.com/dailey/layout/nav.jpg) no-repeat 0px -30px;}
    
    #nav2 a {background: url(http://demo.baublitz.com/dailey/layout/nav.jpg) no-repeat -113px 0px;}    
    #nav2 a:hover {background: url(http://demo.baublitz.com/dailey/layout/nav.jpg) no-repeat -113px -30px;}
    
    #nav3 a {background: url(http://demo.baublitz.com/dailey/layout/nav.jpg) no-repeat -205px 0px;}    
    #nav3 a:hover {background: url(http://demo.baublitz.com/dailey/layout/nav.jpg) no-repeat -205px -30px;}
    
    #nav4 a {background: url(http://demo.baublitz.com/dailey/layout/nav.jpg) no-repeat -327px 0px;}    
    #nav4 a:hover {background: url(http://demo.baublitz.com/dailey/layout/nav.jpg) no-repeat -327px -30px;}
    
    #nav5 a {background: url(http://demo.baublitz.com/dailey/layout/nav.jpg) no-repeat -436px 0px;}    
    #nav5 a:hover {background: url(http://demo.baublitz.com/dailey/layout/nav.jpg) no-repeat -436px -30px;}
    
    #globalNav li ul {
        position: absolute;
        top:22px;
        left:-50px;
        margin-left:-999em;
        width:500px;
    }
    #globalNav li li {
        float:left;
        text-indent:0;
        margin:0 10px;
        position:relative;
        padding:10px 0 0 0
    }
    #globalNav li li a{float:left;background:none!important}
    #globalNav li:hover ul{
        margin-left:0
    }

    If you are using images for the subnav also then you will probably need to class them and place them absolutely instead of floating. You will also need to put in some support for ie6 and under a sit doesn't understand hover on anything but anchors.

    I have a very (very) old demo here that does a similar thing.

    http://www.pmob.co.uk/temp/dropdown-hoz-safe.htm

  5. #5
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you are using images for the subnav also then you will probably need to class them and place them absolutely instead of floating. You will also need to put in some support for ie6 and under a sit doesn't understand hover on anything but anchors.
    Alright, this is where I get lost and is currently out of my understanding...I am using images, and this is what I have so far...nothing is displaying correctly
    Code CSS:
    #globalNav li ul {
        position: absolute;
        top:6px;
        left:-50px;
        margin-left:-999em;
        width:500px;
    }
     
    #globalNav li li {
        float:left;
        text-indent:0;
        margin:0 10px;
    	text-indent:-9999px;
        position:relative;
        padding:10px 0 0 0
    }
     
    #globalNav li li a{
    	position: absolute;
    	display: block;
    	height: 15px;
    }
     
    #subnav1 {left: 0px; width: 45px;}
     
    #subnav1 a {background: url(../layout/nav_sub1.jpg) no-repeat 0px 0px;}	
    #subnav1 a:hover {background: url(../layout/nav-sub1.jpg) no-repeat 0px -15px;}
     
    #globalNav li:hover ul{
        margin-left:0
    }

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I couldn't see the sub nav images on your server.

    e.g.
    http://demo.baublitz.com/dailey/layout/nav_sub1.jpg

    Is that the wrong address or have I copied incorrectly?

    If you remove the text-indent you will see that the text does appear so it is working in a fashion.

    I would float the anchors also and just use the margin on the list to space them apart. Then you will need to give a width to each list element (and anchor) assuming that your images are different for each.

    Code:
    #globalNav li li {
        float:left;
        text-indent:-999em;
        margin:0 10px;
        position:relative;
        padding:10px 0 0 0
    }
    
    #globalNav li li a{
        float:left;
        height: 15px;
        overflow:hidden
    }
    Remove the text-indent while you are testing so that you can check for yourself that something is happening It's hard for me to be more specific because I don't really know what your next moves are and what your images look like etc.

    Hope it helps anyway

  7. #7
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I couldn't see the sub nav images on your server.

    e.g.
    http://demo.baublitz.com/dailey/layout/nav_sub1.jpg

    Is that the wrong address or have I copied incorrectly?
    Nope your were correct...I had the wrong format, the image is a .gif. I do that all the time

    Quote Originally Posted by Paul O'B View Post
    I would float the anchors also and just use the margin on the list to space them apart. Then you will need to give a width to each list element (and anchor) assuming that your images are different for each.

    Code:
    #globalNav li li {
        float:left;
        text-indent:-999em;
        margin:0 10px;
        position:relative;
        padding:10px 0 0 0
    }
    
    #globalNav li li a{
        float:left;
        height: 15px;
        overflow:hidden
    }
    Remove the text-indent while you are testing so that you can check for yourself that something is happening It's hard for me to be more specific because I don't really know what your next moves are and what your images look like etc.

    Hope it helps anyway
    Perfect!

    Got a couple more questions...Its working in FF, Safari, Opera correctly, what do I need to do for IE? How can I get the parent element to stay in the 'hover' state when I am in the nested list menu? Thanks for all the help!

    Code CSS:
    #globalNav li ul {
        position: absolute;
        top:10px;
        margin-left:-999em;
        width:500px;
    }
     
    #globalNav li li {
        float:left;
        text-indent:-999em;
        margin:0;
        position:relative;
        padding:10px 0 0 0
    }
     
    #globalNav li li a{
        float: left;
    	left:5px;
        height: 15px;
        overflow:hidden
    }
     
    #subnav1 {width: 47px;}
    #subnav2 {width: 104px;}
    #subnav3 {width: 117px;}
     
    #subnav1 a {width: 47px;background: url(../layout/nav-sub1.gif) no-repeat 0px 0px;}	
    #subnav1 a:hover {background: url(../layout/nav-sub1.gif) no-repeat 0px -15px;}
    #subnav2 a {width: 104px;background: url(../layout/nav-sub1.gif) no-repeat -47px 0px;}	
    #subnav2 a:hover {background: url(../layout/nav-sub1.gif) no-repeat -47px -15px;}
    #subnav3 a {width: 117px;background: url(../layout/nav-sub1.gif) no-repeat -151px 0px;}	
    #subnav3 a:hover {background: url(../layout/nav-sub1.gif) no-repeat -151px -15px;}
     
    #globalNav li:hover ul{
        margin-left:0
    }

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    How can I get the parent element to stay in the 'hover' state when I am in the nested list menu?
    You have to get specific with your selectors. Its a little complicated because you have different background positions for both navs so you will have to something like this for each nav id.

    e.g.
    Code:
    #globalNav li#nav1:hover a {background-position:0px -30px;}
    #globalNav li#nav1:hover li a {background-position:0px 0px;}
    #globalNav li#nav1:hover li a:hover {background-position:0px -15px;}
    You would then do the same for #globalNav li#nav2 etc and supply the required background positions.

    The first rule would affect all anchors so you over-ride nested elements with the second rule. The third rule applies the hover on the nested elements because they now need to be more specific in order to work.

    You don't need to add the whole background url etc when swapping the position as that can be done just with the background-position property (as shown in my code above) because its only the background position that is changing on all those different images.

    To get ie6 and under working you will either need to use some javascript (borrowed from the suckerfish routine - see my horizontal demo link in post4) or you could add another IE behaviour file to supply the missing hover functions.

    Have a look here.

  9. #9
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,
    Code CSS:
    /* Our Foundation nav btn stays active on nested elements */
    #globalNav li#nav1:hover a {background-position:0px -30px;}
    #globalNav li#nav1:hover li#subnav1 a {background-position:0px 0px;}
    #globalNav li#nav1:hover li#subnav1 a:hover {background-position:0px -15px;}
    and so on...
    I am quite not finished yet with the functionality I would like. Once I have all the functionality, I will tackle getting it to work in IE, so I might need ya again

    I'm trying to get the drop down menus to stay open on the current page. Like say I am on the home page (which is the one in this demo), I want the 'Our Foundation' on it's hover state, and the drop down menu opened with 'home' on its hover state. And so on depending what page your on. I added #home to the body for a start.

    Then how once I have this 'opened', what happens when I roll over the 'whats new?' with its drop down? How will I 'close' the 'Our Foundation' menu, on the other hover states?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Then how once I have this 'opened', what happens when I roll over the 'whats new?' with its drop down? How will I 'close' the 'Our Foundation' menu, on the other hover states?
    That's a tricky one

    What I've done in the past to avoid adding more javascript is to give the nested ul a background colour so that when it pops up the background color on the ul overlays the submenu that is already displayed.

    That's the method I used here.

    As your menu aligns in a different position you would need to set the ul's position so that it overlaps the previous text and then increment the margin on the first list item to put the text back where you wanted it for each menu item.

    It will be a bit fiddly especially with all your images but you should be able to accomplish this.

    You can see what I mean by just applying a red background color to the ul and you will see that if it was in the right position it would cover the text up.

    Code:
    #globalNav li:hover ul{
        margin-left:0;background:red
    }
    Hope that gives you some idea.

  11. #11
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!

    Im lost with IE, I am trying to use the suckerfish technique, and so far no luck.
    What am I missing?

    Code JavaScript:
    <script type="text/javascript"><!--//--><![CDATA[//><!--
     
    startList = function() {
    	if (document.all&&document.getElementById) {
    		navRoot = document.getElementById("globalNav");
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() {
    					this.className+=" over";
    				}
    				node.onmouseout=function() {
    					this.className=this.className.replace(" over", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
     
    //--><!]]></script>
    Code CSS:
    #globalNav li:hover ul, #globalNav li.over ul {
    	margin-left:0;
    	background:red;}
    Here's the rest of the css if you need to take a close look:
    http://demo.baublitz.com/dailey/css/globalnav.css

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You will probably need to set a left position for IE here.

    Code:
    #globalNav li ul {
        position: absolute;
        top:10px;
        margin-left:-999em;
        width:500px;
        left:0
     }
    That should trigger it into life

  13. #13
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Working, Thanks!

    Why does IE need Left: 0 to trigger the drop down?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Why does IE need Left: 0 to trigger the drop down?
    IE has trouble working out where left:auto really is and therefore its better to tell it explicitly where it is. If you have text-align center or right on an element then IE thinks auto is where the text alignment is. If absolute elements follow floats then IE at times forgets where everything is.

    Therefore when dealing with IE (IE6 and under) its best to always give the horizontal position explicitly.


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
  •