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)
-
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>
-
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.
-
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).
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).
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 :
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
Télécharger la démonstration
Télécharger la demoTélécharger le plugin uniquement (conseillé)
Télécharger le pluginDernière mise à jour le 8 Août 2010