Last Updated:

Drop-down menu with effects in jQuery

I want to introduce you to the first version of my plugin for the drop-down menu. At the moment, this version allows you to add slide and fade effects, both separately and together, to the horizontal navigation drop-down list. The plugin is designed for two-level navigation – visible and nested list.

In the future, I want to modify it to a more universal version, with the ability to display multi-level navigation both vertical and horizontal. But for now, I will demonstrate the possibilities that can be observed now.

Let's take a closer look at the structure of HTML and CSS code for an example. I'll omit the elements that aren't important to the drop-down menu and are responsible for the kind of navigation and highlight only those that are needed for the plugin.

HTML code:

<ul id="nav">
    <li>
        <a href="#">Navigation</a>
        <div>
            <ul>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">MooTools</a></li>
                <li><a href="#">JS Plugins</a></li>
                <li><a href="#">HTML</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>
        </div>
    </li>
       ...
    <li>
        <a href="#">Ссылки</a>
        <div>
            <ul>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">MooTools</a></li>
                <li><a href="#">JS Plugins</a></li>
            </ul>
        </div>
    </li>
</ul>

For the drop-down list, we need a parent to manipulate the height of the object, it is necessary for the slide effect, with the fade effect it can not be inserted.

CSS code:

#nav li {
    position:relative;
}
#nav li div {
    position:absolute;
    top:15px;
    left:-9999px;
}
#nav li.hover div {left:0;}

For the parent element, it is better not to set any styles other than positioning relative to the parent. And the most important thing I want to draw your attention to is that I use left:-9999px to hide the nested list; not display:none, because when display:none JavaScript cannot adequately determine the current parameters of the element - height, etc. In general, in the example, the styles are very simple, only the position of the nested element is set, of course you can define additional properties corresponding to your design.

Now for more details on the plugin:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dropDown.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('ul#nav').NavDropDown({
            duration:300, 
            hoverElement:'li',
            hoverClass:'hover',
            dropHolder:'div',
            showEffect:'slide' // slide, fade, slide&fade
        });                
    }); 
</script>

More details on the parameters:

The parameters shown are the default settings.

  • duration – animation time in milliseconds (300 = 0.3sec)
  • hoverElement – the element on which the "hover" class will be placed.
  • hoverClass is the class name for the hover element
  • dropHolder — parent item selector for a nested list
  • showEffect – nested list dropout effect (slide, fade, slide&fade)

Let's look at a few more examples:

slide&fade effect

$(document).ready(function(){
    $('ul#nav').NavDropDown({
        duration:500,
        showEffect:'slide&fade'
    });                
});

fade effect

$(document).ready(function(){
    $('ul#nav').NavDropDown({
        duration:800,
        showEffect:'fade'
    });                
});