Awesome Drop Slide Menu With Jquery

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

$(document).ready(function() {
indicators: true,
clickstream: true,
openEasing: "easeOutQuad",
closeEasing: "easeInQuad",
duration: 600,
delay: 800,
hideSelects: true

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.


Leave a comment