Usage

You should create your navigation as a nested unordered list. Linking the top-level items is optional and will not change the working of the plugin. You should style your menu first with css. How you do that is up to you, but you should set the sub-menus to display: none (this is actually optional, but will prevent the sub-menus from flashing on page-load).

<ul id="nav">
    <li>About
        <ul>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Board of Directors</a></li>
            <li><a href="#">Contact Info</a></li>
        </ul>
    </li>
    <li><a href="#">Products</a>
        <ul>
            <li><a href="#">Widgets</a></li>
            <li><a href="#">Doohickeys</a></li>
            <li><a href="#">Thing-a-ma-bobs</a></li>
        </ul>
    </li>
</ul>

The nmcDropDown plugin comes with sensible defaults, so you can just call it on the

element that contains your navigation. The plugin will check each menu item to see if it has a sub-menu and set it up as a drop-down if it does.

$('#nav').nmcDropDown();

Configuration

If you want more control over the way your menu works, there are a number of configuration options available to you. Pass an object containing any that you want to change in as the first parameter of the nmcDropDown() call.

$('#nav').nmcDropDown({trigger: 'click'});

Available Options:

* trigger: Event on which to show or hide the sub-menu, can be ‘hover’ or ‘click’. (‘hover’)
* active_class: Class to give open menu items, useful for styling. (‘open’)
* submenu_selector: The element immediately below the top-level list-items containing the sub-menu. (‘ul’)
* show: Effect(s) to use when showing the sub-menu. ({opacity: ’show’})
* show_speed: Speed of the show transition. (300)
* show_delay: Delay before the sub-menu is shown (requires HoverIntent). (50)
* hide: Effect(s) to use when hiding the sub-menu. ({opacity: ‘hide’})
* hide_speed: Speed of the hide transition. (200)
* hide_delay: Delay before the sub-menu is hidden (requires HoverIntent). (50)
* fix_IE: This will attempt to fix IE 6 and 7’s problems with z-index, where the sub-menu appears behind the body of the page. Set to false if it is interfering with your other styling. (true)


Demo: http://www.ncbowd.com/
Download: http://www.newmediacampaigns.com/files/media/nmcdropdown/jquery.nmcDropDown.js
Source: http://www.newmediacampaigns.com/page/nmcdropdown

Related Listings:

1. Drop Down using CSS and jQuery For me, standard HTML Select element is pretty much annoying....
2. Accordion Plugin using Jquery Script This plugin is now part of jQuery UI and this...
3. SimplePager Paging Plugin using jQuery Following the popularity of SimplePager – easy paging plugin, we...
4. Gradient : jQuery Plugin It allows you to define a gradient fill and have...

Do you like this post?

Email: