DropDown Menu

For what ?

This customizable jQuery plugin offers you the possibility of transforming your menus with ul>li at 1 level of interweaving (ul>li>ul>li>ul>li) in an attractive animated menu.
You will just have to target your menu thanks to the function of the plugin to transform it into a fluid and pleasant to use menu.

See the demonstration

Usage

This type of tool is very simple to set up because it is a plugin of the jQuery library. It's also very light (2,3 Ko) and can be reduced thanks to the Gzip compression in approximately 0,8 ko.

  1. Load the file of the styles of the plugin. This code for calling the CSS file must be placed before the </head> tag:
    <link href="css/juizDropDownMenu.css"
    rel="stylesheet" type="text/css"
    media="screen, projection" />
    These styles are customizable, naturally.
  2. Download the jQuery library, or make a link from the Google API .
    Place this call of the javascript file just before the </body> tag:
    <script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
    </script>
  3. Load the file of the plugin in the same way by placing it after the line of call of the library. Here we imagine that your scripts are in the root of your site, in a directory named "scripts". To you to modify this road if need:
    <script type="text/javascript"
    src="/scripts/juizDropDownMenu-1.5.min.js"></script>
  4. Call the function by targeting exactly the element which contains your list of links.
    Place this code following the previous two lines:
    <script type="text/javascript">
    	$(document).ready(function() {
    		$("#dropdown").juizDropDownMenu();
    	});
    </script>

Customization

This plugin offers you a wide choice of customization because it will be possible to you to modify the aspect of your menu with CSS file, but also the speed and the effects of animation.

Voici la liste des paramètres par défaut :

Name Description Value / "Default"
showSpeed Duration of the animation of appearance of sub-menu An integer (milliseconds), the word "fast" or "slow"
Default : "400"
hideSpeed Duration of the animation of disappearance of sub-menu An integer (milliseconds), the word "fast" or "slow"
Default : "400"
showBgSpeed Duration of the animation of appearance of the background of link An integer (milliseconds), the word "fast" or "slow"
Default : "200"
hideBgSpeed Duration of the animation of disappearance of the background of link An integer (milliseconds), the word "fast" or "slow"
Default : "200"
showEffect The effect to make appear the sub-menu The word "slide" or "fade"
Default : "slide"
hideEffect The effect to make disappear the sub-menu The word "slide" or "fade"
Default : "fade"
hoverFrom Position at the end of hover animation An integer (pixels)
Default : "0"
hoverBack Position at the end of the animation An integer (pixels)
Default : "-150"

If you wish it we speak about it on the blog, so don't hesitate to ask your questions!

When you wish to modify a style, you just have to complete the function like that:

$("#dropdown").juizDropDownMenu({
	'hideEffect':	"slide"
});

Here I have to modify the effect of disappearance of the submenu, I pass of a fade out in a sliding.
Know that a class .juizHovered is added to the li element, as well as the classes .first and .last in every li concerned. It is possible to you to personalize the aspect thanks to CSS or jQuery (by using one an additional layer). Finally, submenus are accessible to the keyboard (by tabulation).

Since the v.1.5 of the plugin, the fact that you can have an additional level of depth adds two classes in the CSS: .hasSub when the parent has a submenu, and .hasSubSub when the parent has a sub-submenu..

* jQ.CreativeJuiz.fr *