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).
- 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
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.