Testé et fonctionnel sur
Firefox 3.6+, Chrome 4.5+, Safari 4+, Opera 10.5+

Explications

Ce plugin jQuery personnalisable vous offre la possibilité de transformer vos menus en ul>li à 1 niveau d'imbrication (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.

Démonstration

Voici un menu simplement composé d'une liste de listes (structure ul et li imbriquée)

Cliquez ici pour transformer ce menu grâce au plugin

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 (3,64 Ko) et peut même encore être réduit grâce à la compression Gzip (1,36 Ko)

1. Pour commencer 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>
2. Chargez ensuite le plugin de la même manière (n'oubliez pas de le télécharger). Surtout placez-le après la ligne d'appel de la bibliothèque.
   Ici nous imaginons donc 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/jquery-juizDDM.min.js"></script>
   
3. Maintenant il vous faut simplement appeler la fonction en ciblant précisément la division qui contient votre liste de liens. Placez ce code à la suite des deux précédentes lignes (ici on cible l'élément porteur de l'identificateur dropdown).
   <script type="text/javascript"> $(document).ready(function() { $("#dropdown").juizDropDownMenu(); }); </script>

Personnalisation

Ce plugin vous offre pas mal personnalisations qui seront peut-être encore étendues par la suite. Cela laisse très peu de place à ceux qui souhaitent ajouter des choses grâce à un feuille de style CSS, mais les paramètres proposés sont déjà très nombreux et permettent une personnalisation efficace (déjà testée :p).

//the div container menuHeight : '43px', menuBgMain : 'transparent url(images/main-bg.png) scroll center left no-repeat', menuBgRight : 'transparent url(images/main-bg-right.png) scroll center right no-repeat', menuFontSize : '15px', menuLineHeight : '42px', menuMainTextAlign : 'center', //first level of anchors menuPaddingFirstA : '0 20px 0 22px', menuColorFirstA : '#6d6d6d', menuShadowFirstA : '1px 1px 0 #fff', menuBgFirstA : 'none', menuSeparatorFirstA : 'transparent url(images/separator.png) scroll left center no-repeat', //second level of anchors menuPadddingSecondA : '0 14px', menuColorSecondA : '#6d6d6d', menuShadowSecondA : '1px 1px 0 #fff', menuBgSecondA : 'transparent url(images/hover.png) scroll -150px 0px no-repeat', menuBgSecondAgoTo : '0px 0px', menuBgSecondAgoBack : '-150px 0px', //submenu menuBgSubMenu : 'rgba(220,220,220,0.9)', menuBoxShadowSub : '0 0 1px #fff inset, 0 3px 4px #999', menuBorderRadiusSub : '0 0 15px 15px', menuPaddingSub : '0.4em 0', menuLineHeightSub : '1.3em', menuBorderSeparatorSub : '1px solid #eee', //animations speed slidedownSpeed : 400, fadeoutSpeed : 400, slideinBgSpeed : 200, slideoutBgSpeed : 200

Ces styles se mettent en place automatiquement, dès l'appel de la fonction (étape 3).

Si cela vous fait un peu peur au premier abord, nous en parlons sur le blog, alors n'hésitez pas à aller à la pêche aux info ou à poser vos questions !

Lorsque vous souhaitez modifier un style, il vous suffit de compléter la fonction en précisant le style à modifier, puis sa valeur, ainsi :

$("#dropdown").juizDropDownMenu({ 'menuBgSecondAgoTo' : "150px 0px", 'menuBorderSeparatorSub': "1px dotted #fff" });

Ici j'ai modifier la destination de l'image de fond au survol des liens de sous-menus, puis j'ai changé l'aspect des lignes séparatrices des sous-menus. Essayez chez vous ;)
Comme vous pouvez le voir, il suffit de compléter uniquement les styles que vous souhaitez modifier (c'est du CSS pour les valeurs), inutile de reprendre toute la liste précédente.
Sachez qu'une classe .drop_active est ajoutée à l'élément li survolé. Il vous est possible de personnaliser l'aspect grâce à CSS ou jQuery (en utilisant une sur-couche).

Enjoy !

Téléchargements

Dernière mise à jour le 8 Août 2010