query.dropSlideMenu.js

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

query.dropSlideMenu.js v1.0 - View Demo or Download

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

I'm publishing this script with the hope that others might find it useful. Hopefully as it gains popularity, so will the potential for it to improve. Also, I've developed this plugin partly as a jQuery learning exercise. So if you do find yourself downloading and using it, and you're proficient with JavaScript, I would really appreciate if you could spend a minute or two reviewing my code and providing suggestions for improvement.

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

To begin, download the source files (.zip) and browse the demo source code to familiarise yourself with the necessary files required, and the way in which they fit together. Assuming you already have the most recent version of jQuery, the JavaScript and CSS files that need to be included in your page are:

<link rel="stylesheet" href="jquery.dropSlideMenu.css" type="text/css" />

<script src="jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="jquery.event.hover.js" type="text/javascript"></script>
<script src="jquery.dropSlideMenu.js" type="text/javascript"></script>

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() {
	$("#navigation").dropSlideMenu({
		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.

Please let me know if you decide to use it, or have any feedback. Thanks!