DropDown Menu

À quoi sert-il ?

Ce plugin jQuery personnalisable vous offre la possibilité de transformer vos menus en ul>li à 2 niveau d'imbrication (ul>li>ul>li>ul>li) en un joli menu animé.
Il vous suffira de cibler votre menu grâce à la fonction du plugin pour le transformer en un menu fluide et agréable d'utilisation.

Voir la démonstration

Utilisation

Ce type d'outil est très simple à mettre en place puisqu'il s'agit d'un plugin de la bibliothèque jQuery. Il est aussi très léger (2,3 Ko) et peut même encore être réduit grâce à la compression Gzip à environ 0,8 ko.

  1. Chargez le fichier des styles du plugin. Ce code d'appel au fichier CSS doit être placé avant la balise </head> :
    <link href="css/juizDropDownMenu.css"
    rel="stylesheet" type="text/css"
    media="screen, projection" />
    Ces styles sont personnalisables, bien entendu.
  2. Téléchargez la bibliothèque jQuery, ou faites un lien depuis l'API Google.
    Placez cet appel du fichier javascript juste avant la balise </body> :
    <script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
    </script>
  3. Chargez le fichier du plugin de la même manière en le plaçant après la ligne d'appel de la bibliothèque.
    Ici nous imaginons que vos scripts se trouvent à la racine de votre site, dans un dossier nommé "scripts".
    A vous de modifier ce chemin si besoin :
    <script type="text/javascript"
    src="/scripts/juizDropDownMenu-1.5.min.js"></script>
  4. Appelez la fonction en ciblant précisément l'élément qui contient votre liste de liens.
    Placez ce code à la suite des deux précédentes lignes :
    <script type="text/javascript">
    	$(document).ready(function() {
    		$("#dropdown").juizDropDownMenu();
    	});
    </script>

Personnalisation

Ce plugin vous offre un large choix de personnalisation puisqu'il vous sera possible de modifier l'aspect de votre menu via CSS, mais aussi la vitesse et les effets d'animation.

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

Nom Description Valeur / "Défaut"
showSpeed Durée de l'animation d'apparition du sous-menu Un nombre (millisecondes), le mot "fast" ou "slow"
Défaut : "400"
hideSpeed Durée de l'animation de disparition du sous-menu Un nombre (millisecondes), le mot "fast" ou "slow"
Défaut : "400"
showBgSpeed Durée de l'animation d'apparition du fond de lien Un nombre (millisecondes), le mot "fast" ou "slow"
Défaut : "200"
hideBgSpeed Durée de l'animation de disparition du fond de lien Un nombre (millisecondes), le mot "fast" ou "slow"
Défaut : "200"
showEffect L'effet pour faire apparaître le sous-menu Le mot "slide" (glissement) ou "fade" (fondu)
Défaut : "slide"
hideEffect L'effet pour faire disparaître le sous-menu Le mot "slide" (glissement) ou "fade" (fondu)
Défaut : "fade"
hoverFrom Position à la fin de l'animation de survol Un nombre (pixels)
Défaut : "0"
hoverBack Position à la fin de l'animation Un nombre (pixels)
Défaut : "-150"

Si vous le souhaitez nous en parlons sur le blog, alors n'hésitez pas à poser vos questions !

Lorsque vous souhaitez modifier un style, il vous suffit de compléter la fonction ainsi :

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

Ici j'ai modifier l'effet de disparition du sous-menu, je passe d'un fondu à un glissement.
Sachez qu'une classe .juizHovered est ajoutée à l'élément li survolé, ainsi que des classes .first et .last à chaque li concernés. Il vous est possible de personnaliser l'aspect grâce à CSS ou jQuery (en utilisant une sur-couche).
Enfin, les sous-menus sont accessibles au clavier (par tabulation).

Depuis la version 1.5 du plugin, la prise en charge d'un nouveau niveau de profondeur de sous-menu ajoute deux classes aux CSS, .hasSub lorsque le parent possède un sous-menu, et .hasSubSub lorsque le parent possède un sous-sous-menu..

* jQ.CreativeJuiz.fr *