Add another (flyout) level to navigation

JavaScript
1

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;


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:


<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

Any particular reason you’re using JavaScript for the menu? This could be done with some simple CSS :slight_smile:

Simplified version of the fiddle - we start with pretty much the same markup as you have


<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:


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:


/* 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;
}
3

@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!

4