dropSlideMenu is a simple (single-level support only), yet easily and highly-customisable drop-down menu with an attractive sliding effect.

There are plenty of jQuery drop-down menu scripts already available, but I often find that they're either too basic, or too complicated and bulky, or don't support a proper sliding effect (instead the menus simply change height as they're revealed).

Features include:

• Requires the mouse cursor to decelerate over the menu before activating, to prevent unintentional opening (big thanks to threedubmedia for their jquery.event.hover plugin)
• Dynamic styling of clickstream (path of links are compared with path of the current URL) - optional
• Possible to set widths on each list item and its drop down
• Possible to individually style each list item and its drop down
• List items with no link behaviour (where href is "#") are disabled
• Settings to control the duration (speed of drop down animation), and delay (before the drop down closes)
• Select elements are hidden (IE6) - optional
• Customisable Easing Effects
• W3C-valid HTML and CSS

Assuming you already have the most recent version of jQuery, the JavaScript and CSS files that need to be included in your page are:

To attach the plugin to a menu, include the following jQuery script in your page (in this example, #navigation is the menu wrapper):

The settings are fairly self-explanatory. I'm not going to go into more detail as I assume you know what you're doing with jQuery and CSS. If you do require further assistance, please leave a comment below - I can't guarantee that I'll be able to help, but I do make an attempt to reply to all comments.

The most recent version of this plugin will always be the one available for download on this post.

hope you like it.