SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add another (flyout) level to navigation

    I'm trying to add another level to a navigation bar - alls fine except I cant change the javascript so that the 3rd level menu only shows when hovering over the 2nd level menu link

    The scipt behind the 2nd level hover is;

    Code:
    var mylib =
    {
    	dropDown :
    	{
    		init : function()
    		{
    			$(".sub-nav").hide();
    			$(".sub-nav li:last-child").addClass("last");
    			$("#nav > li").hover(function(){
    				$(this).addClass("active");
    				$(".sub-nav",this).show();
    			},
    			function(){
    				$(this).removeClass("active");
    				$(".sub-nav",this).hide();
    			});
    			
    			$("#sub-nav a").click(function () {
    	            $("#sub-nav").hide();
    	        });
    		}
    	}
    }
    The html is:
    Code:
    <ul id="nav">
       <li id="1" class="first"><href="#">level 1 menu</a>
          <ul class="sub-nav">
             <li><a href="n.htm">level 2 menu</a>
                  <ul class="sub-sub-nav">
                        <li><a href="#.htm">level 3 menu</a></li>
                        <li><a href="#.htm">level 3 menu</a</li></ul>
    </li>
    </ul>
    </li>
    </ul>

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stephen_ View Post
    I'm trying to add another level to a navigation bar - alls fine except I cant change the javascript so that the 3rd level menu only shows when hovering over the 2nd level menu link
    Any particular reason you're using JavaScript for the menu? This could be done with some simple CSS

    http://jsfiddle.net/GeekyJohn/xF2vJ/

    Simplified version of the fiddle - we start with pretty much the same markup as you have
    HTML Code:
    <ul class="nav">
        <li id="1" class="first"><a href="#">level 1 menu</a>
            <ul class="sub-nav">
                <li>
                    <a href="n.htm">level 2 menu</a>
                    <ul class="sub-nav">
                        <li><a href="#.htm">level 3 menu</a></li>
                        <li><a href="#.htm">level 3 menu</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    
    
    <ul class="nav horiz">
        <li id="1" class="first"><a href="#">level 1 menu</a>
            <ul class="sub-nav">
                <li>
                    <a href="n.htm">level 2 menu</a>
                    <ul class="sub-nav">
                        <li><a href="#.htm">level 3 menu</a></li>
                        <li><a href="#.htm">level 3 menu</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    The style rules are pretty simple - just some base styles for the look and feel, the important rule being:
    Code css:
    li:hover > .sub-nav {
        display:block;
    }

    this will make sure that only sub menus that are an immediate child of the <li> are shown

    The full styles are:
    Code css:
    /* base styles for the menu list items and links */
    .nav li { 
        width:100px;
        background:#ccc;
        position:relative;
    }
     
     
    .nav li a{
        display:block;
        padding:4px 10px;
        line-height:26px;
        border:2px solid #fff;
    }
     
     
    /* base style for a sub-nav */
    .sub-nav { 
        display:none;
        position:absolute;
        left:100%;
        top:0px;
    }
     
     
    /* When the <li> is hovered, show it's immediate sub-nav */
    li:hover > .sub-nav {
        display:block;
    }
     
     
    /* Variant styles for a horizontal menu */
    .nav.horiz > li {
        float:left;
    }
     
     
    .nav.horiz > li > .sub-nav {
        left:0;
        top:38px;
    }
     
     
    .nav.horiz > li > .sub-nav .sub-nav{
        margin:5px 0;
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Zealot
    Join Date
    May 2012
    Location
    N.Ireland
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @AussieJohn - firstly I should'nt reply to you due to the rugby on Saturday : )

    Basically this has already been developed and I've been tasked with updating the code. I agree a pure CSS/HTML menu is now essential - i've noticed a few lag issues with it already....

    I'll take a good look at your example and apply the original CSS to it - many many thanks for helping John!


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
  •