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!

v1.5 released - View Demo or Download

I've made a couple of improvements to the plugin. The ones worth mentioning:

• You can add alternative content to the container element (that you pass to the plugin). This will be replaced by your tweets when the plugin is executed by jQuery. If JavaScript is disabled or the plugin fails, your visitors will still see your alternative content - a good idea therefore would be to include a link to your twitter profile.
• All styles are now added to the container elements via a new ".twitted" class (view CSS). If you're upgrading from the old plugin version, you'll need to transfer your old styles across into the new syntax.
• 3 new customisation options: slideDuration (if slideIn is true, this will change the duration of the slide effect), showProfileLink (set to false if you want to hide the link), showTimestamp (set to false if you want to remove the timestamp from tweets - the timestamp is then added as a title on the individual tweet list items).
• Fixed the jQuery slide effect "jump" bug (hat-tip: Dan G. Switzer, II)

If you have any feedback or bug reports, please leave a comment below.

I started writing a new post today containing various tips, tricks and best practices for the jQuery JavaScript Library that I've picked up over the past few months, but instead ended up developing my first jQuery plugin.

Introducing jQuery plugin for Twitter v1.0 - View Demo
A simple, unobtrusive and customisable client-side method for easily embedding a Twitter feed into a web page.

To begin, download the source files (.zip) and familiarise yourself with the necessary JavaScript and CSS files that need to be included in your page:

<link rel="stylesheet" href="jquery.twitter.css" type="text/css" />
<script src="jquery.twitter.js" type="text/javascript"></script>

Next, add a div element with id "twitter" to your page, wherever you want the feed to appear:

<div id="twitter"></div>

Lastly attach the plugin to that div with the following jQuery code (the customisation options are pretty much self-explanatory I think):

$(document).ready(function() {
	$("#twitter").getTwitter({
		userName: "jquery",
		numTweets: 5,
		loaderText: "Loading tweets...",
		slideIn: true,
		showHeading: true,
		headingText: "Latest Tweets",
		showProfileLink: true
	});
});

It's obviously a little more involved, but that should be enough to get you up and running!

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.

Using a Plugin Development Pattern (by Karl Swedberg) as a starting point, the plugin is based on Twitter's HTML Badge Customizer.