Point47

Quickly build a jQuery dropdown menu

Let’s dive directly in:

jQuery

$(document).ready(function(){

    $('#navigation li').hover( function()
    {
        $(this).children('ul').not(':animated').slideDown('#navigation li ul');
    }, function()
    {
        $(this).children('ul').slideUp('#navigation li ul');
    });

});

HTML

<ul id="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>

            <ul>
                <li><a href="#">About us</a></li>
                <li><a href="#">More info about</a></li>
                <li><a href="#">Even more info</a></li>
            </ul>

        </li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>

    </ul>

CSS

#navigation {position: relative;float: left;display: inline;}
#navigation li {position: relative;float: left;display: inline;}
#navigation li a {float: left;display: inline;text-decoration: none;color: blue;padding: 4px 10px 4px 10px;}

#navigation li ul {position: absolute;top: 26px;left: 0px;margin: 0;padding: 0;background: #cccccc;display: none;width: 180px;}
#navigation li ul li {float: left;width: 100%;margin: 0;padding: 0;border-bottom: 1px dotted #959595;   }
#navigation li ul li  a {float: left;width: 100%}

Full demo here: jQuery Drop Down Menu

Enjoy!

06. July 2010 by Sorin
Categories: jQuery | 1 comment