Plugin jQuery – Un menu déroulant à partir d’une simple liste

Après m’être amusé longuement à la visite de nombreux sites habillés de jolis menus déroulant, il m’a pris l’envie de réaliser un plugin facile d’installation pour les utilisateurs de jQuery.
Sur un design léger et des fichiers qui le sont tout autant, celui-ci reste grandement personnalisable.

Le principe

En partant de simples listes imbriquées (sur un niveau de profondeur uniquement, pour le moment…), l’activation de ce plugin provoquera la mise en place d’un menu déroulant avec comme effet un slidedown au survol, un fadeout lorsqu’on quitte le sous-menu. Un petit effet gadget a été ajouté sur les liens des sous-menus au survol. Je vous laisse prendre connaissance de cela :
Plugin jQuery – DropDown Menu

Édition : le plugin dont il est question a subit une refonte structurelle, la CSS a été externalisée, le comportement et la compatibilité améliorés. Les informations qui suivent ne sont donc plus vraiment d’actualité. Cet article est conservé pour les archives 😉

Le code de base

Il vous faudra simplement un menu non-ordonné dans un autre menu non-ordonné.
Exemple :

<div  id="dropdown">
	<ul>
		<li><a href="#accueil">Accueil</a></li>
		<li><a href="#rea">Nos services</a>
			<ul>
				<li><a href="#print">Print</a></li>
				<li><a href="#web">Web</a></li>
				<li><a href="#marketing">Marketing</a></li>
				<li><a href="#ref">Référencement</a></li>
				<li><a href="#access">Accessibilité</a></li>
			</ul>
		</li>
		<li><a href="#comp">À propos</a>
			<ul>
				<li><a href="#who">Qui sommes nous ?</a></li>
				<li><a href="#what">Nos compétences</a></li>
				<li><a href="#ref">Nos références</a></li>
			</ul>
		</li>
		<li><a href="#contact">Contact</a></li>
	</ul>
</div>

L’important c’est d’avoir de quoi cibler votre menu précisément grâce à un élément de type block conteneur (par l’utilisation d’une classe ou d’un identifiant soit directement sur l’élément soit sur un parent assez proche).

Mise en place et personnalisation

Je ne vais pas vous redonner le contenu de la page du plugin, je vous laisse en prendre connaissance :
Plugin jQuery – DropDown Menu – Utilisation

La personnalisation passe principalement par du CSS écrit grâce à jQuery. Une multitude de variables sont donc disponibles et modifiables. J’admets que ce n’est pas forcément le plus aisé pour une personne qui s’y connait en CSS, car en plus des modifications à effectuer il faut s’habituer aux noms des variables (rendues les plus explicites possible) ; mais ce plugin s’adresse justement à un public plutôt large, et doit comprendre les novices en ce langage de style.

Améliorations

Pour toute suggestion d’amélioration ou rapport de bogue, n’hésitez pas à me contacter ici ou via le formulaire de contact du blog, des plugins, du book, etc. (au choix, pas partout en même temps :p )

Merci, et amusez-vous bien !

Liens utiles :
– Plugin jQuery – DropDown Menu
– Les Plugins jQuery sur CreativeJuiz