Horizontal Nav with “animated sub-navs”

August 30, 2009

Yet another jQuery plugin ;-)

A designer friend of mine was working on his portfolio and was searching for a way to animate his horizontal navigation bar so that the sub-navs would drop down smoothly. In helping him implement a couple of scripts he found online, I decided to write a simple one myself. Turned out to not be quite as ’simple’ as I had hoped, but I like how this one is coming along. Again using the powerful magic known as jQuery, I was able to animate a nested list and make it all work nice. I decided to go ahead and make it a plugin. I also had the help of the hoverIntent plugin to make it all smooth. Check it out…

If you are looking for a regular vertical drop down menu for jQuery use superFish.

See example page
Download plugin
Download sample project

You simply apply this plugin to a nested list, and style it up and you have a nice animated sub-nav.

The basic concept:

Hide the nested ul using a negative margin-top, and have them slide down when its parent li feels a mouseover event.
We start with regular markup of a nested list.

<ul> <!-- Parent ul -->
    <li>Item
        <ul> <!--Nested ul-->
            <li>Sub-item 1</li>
            <li>Sub-item 2</li>
        </ul>
    </li>
</ul>

I thought I would be able to hide the nested ul, under the parent ul using a negative margin, but this just doesn’t work, its always on top (Even with position:absolute and a negative top value, and playing with z-index all day). What does work is to hide the sub-item li’s under their own ul’s.

So I set overflow hidden on the nested ul, and then apply a negative margin-top to the sub-nav li’s to hide them.
Check out this video screencast that shows how im just messing with the margin-top property.

Then simply animate the margin-top property using jQuery’s animate.

The html:

Just a normal nested list, the ‘right’ way to have a navigation list with sub-items.

<ul class="horizontal-dropdown">
    <li><a href="#">About</a>
       <ul>
           <li><a href="sub1">Something</a></li>
           <li><a href="sub2">Something else</a></li>
           <li><a href="sub2">What you wanna know</a></li>
 
        </ul>
    </li>
    <li><a href="#">Projects</a>
        <ul>
            <li><a href="sub2-1">jQuery Plugins</a></li>
            <li><a href="sub2-2">Websites</a></li>
            <li><a href="sub2-3">Music</a></li>
            <li><a href="sub2-3">Art</a></li>
        </ul>    
    </li>
    <li><a href="#">Bikes</a>
        <ul>
            <li><a href="sub2-1">FSR Enduro</a></li>
            <li><a href="sub2-2">20in BMX</a></li>
            <li><a href="sub2-2">Beach Cruiser</a></li>                               
        </ul>            
    </li>
 
    <li><a href="#">Guitars</a>
        <ul>
            <li><a href="sub2-1">Charvel</a></li>
            <li><a href="sub2-2">Paul Reed Smith</a></li>
            <li><a href="sub2-3">Banjo</a></li>
            <li><a href="sub2-3">Mandolin</a></li>
        </ul>
    </li>
    <li class="last"><a href="#">Contact</a></li>
</ul>

The css:

Basically floating everything to the left, to make it horizontal. The overflow hidden and position relative/absolute values are the main things to pay attention to here. Everything else is a just for looks.

ul.horizontal-dropdown {
    position: relative;
    float: left;
}
 
ul.horizontal-dropdown a {
    display: block;
    padding: 10px 40px;
    text-decoration: none;
    color: #fff;
    background: url(../images/border.gif) no-repeat right top;
}
 
ul.horizontal-dropdown li.last a {
    background: none;
}
 
ul.horizontal-dropdown li {
    float: left;
    padding: 0;
    background: url(../images/top-bg.gif) repeat-x;
}
 
ul.horizontal-dropdown li.hover {
    background-position: bottom;
}
 
/*sub nav*/
ul.horizontal-dropdown ul {
    position: absolute;
    left: 0;
    background: #3fb306;
    overflow: hidden;
}
 
ul.horizontal-dropdown ul li {
    background: transparent;
    padding: 0 0 0 0;
    float: left;
}
 
ul.horizontal-dropdown ul li a {
    position: relative;
    top: 0;
    left: 0;
    background: #3fb306;
    padding: 0;
    display: block;
    float: left;
    padding: 10px 20px;
}
 
ul.horizontal-dropdown ul li a:hover {
    color: #0609b3;
}

Set the plugin options:

Download the horizontalNav and hoverIntent and bring them into your project.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.hoverIntent.js"></script>
    <script src="js/jquery.horizontalnav.js"></script>

You should use the ‘hoverIntent’ plug in along with this to make it all smooth. If you do not want to use hoverIntent plugin with this, set useHoverIntent: false

Then configure the plugin, to the list of your choice. Mine has the class of ‘horizontal-dropdown’.

    <script type="text/javascript" charset="utf-8">
    $(function(){
        $('.horizontal-dropdown').animatedHorizontalNav({
            speed: 250,
            useHoverIntent: true
        });
    });
 
    </script>

Any suggestions on how to improve this code is greatly appreciated.

Enjoy!

Leave a Comment

Add a Comment