Well, in this case I'm pretty sure that there are already dozens of similar jQuery plugins, doing their duty on thousands of web pages worldwide. Anyway, I just wanted to do it on my own, as some sort of an exercise, and since I'm quite satisfied with the result I decided to publish this plugin. So, what do we have here?

A jQuery plugin that animates your navigation – that's the answer. Nothing special and commonly used, I know. However, there may be several features of my plugin that could make it the method of your choice: First, it provides three different kinds of how it can be used (see the example). Second, its underlying code is written in a quite condensed form (less than 1 KB). And last but not least, its implementation is quite easy:

 

 

The implementation of the NaviHandler plugin

 

In order to use this plugin, it requires a certain structure of the underlying HTML that constitutes the navigation. The navigation must be subdivided in categories whereat each of these categories contains a list of items (usually as links to further pages of your website). Hence, your navigation should consist of two nested lists (e.g. unordered lists, ). At the first level the list items represent the single categories that themselves include another list, each containing the list items of the second level (= the links). Here's an example for the general structure of the HTML:

 

 

The list of the first level is the HTML element that serves as the object to which the plugin will be tied, using its ID as the selector for calling the jQuery function (in the above example: 'navi'):

 

 

In the head section of your HTML sheet you will need to embed the jQuery framework base code first. For my NaviHandler plugin it will require version 1.3 or later. Then the plugin itself must be embedded after it has been downloaded and saved in a file with the name "NaviHandler.js". In order to apply this function to your navigation you will call it with the selector that represents the list at the first level (see above).

 

 

  Options for modifying the behavior of the animation

 

There are three options that can be used to modify the behavior of the animation: First, you can modify the speed of the scrolling up/down of the animation, using the option speed with an integer number representing the milliseconds. If you want the categories of your navigation to reveal its items after you moved your mouse cursor over the category field (instead of clicking on it – see the example at the right), you must use the option type with the string 'rollOver' (see above). The default value for the type option would be 'click'. And in case you would like to use the click-version of the NaviHandler but you want the other categories to be closed when opening a new one, you must use the option closeRest with the Boolean value true (the default value is false). As usual, these options must be added to the object literal that serves as the argument when calling the NaviHandler function.

 

 

Attribute	Type	Default	Description
speed	integer	400	The speed of the animation (scrolling up/down)
type	string	'click'	The way the animation is triggered: By clicking the category field ('click'), or by moving the mouse over that field ('rollOver')
closeRest	Boolean	false	Determines whether the remaining categories will be closed or not when clicking a new category

 

 

Additional remarks

 

This is version 1.0 of the NaviHandler jQuery plugin. Although I successfully tested its functionality with several browsers (IE 6+, the latest versions of Chrome, Opera and Mozilla Firefox) there may still be bugs. So, in case you experience any undesired behavior with that plugin or you have any questions about that plugin in general, feel free to leave a comment on that page!

 

Demo

Download

 

 

© 2012 G. Wendt