Tutorial Plugin JQuery #3, menu deroulant : Droppy

Pour continuer avec les tuto sur les plugins JQuery, j’ai choisi de présenter aujourd’hui Droppy. Droppy (dont le nom provient d’un jeu de mot avec « drop-down menu », menu déroulant en english) permet de faire très facilement un menu déroulant multi-niveau avec des effets d’apparition et de disparition très simples.

faire un menu déroulant avec Jquery : plugin droppy

Pour celui pas vraiment de connaissances sont nécessaires. Il faut juste que le fichier html soit bien structuré pour éviter les bugs d’affichage.

Voir une démo du plugin JQuery.droppy

Comme à chaque fois, il faut commencer par charger le framwork JQuery suivi du plugin et du fichier contenant les styles css nécessaires au plugin (bien penser à mettre la bonne adresse pour le chargement des fichiers…)

1
2
3
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.droppy.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="js/droppy.css" />

Il faut ensuite initialiser le plugin (à insérer dans votre fichier JavaScript perso ou dans la page html entre les balises <script>). « nav » correspond à l’id de la liste non ordonnée (<ul>) contenant le menu :

1
2
3
$(document).ready( function () {
    		$('#nav').droppy();
});

C’est maintenant dans le code html qu’il faut être attentif. Tout est basé sur les listes non ordonnées (<ul> et <li>). Le menu est contenu dans un premier ul qui a pour id « nav ». Chaque élément du menu est un lien contenu dans des li. Pour créer un sous-menu, il suffit d’encapsuler un autre ul (sans id) dans l’élément de liste (li). Un exemple devrait être plus clair ;) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<ul id="nav">
		<li> <!-- premier élément du menu, n'a pas de sous-menu -->
			<a href="#">Menu 1</a>
		</li>
 
		<li> <!-- deuxième élément du menu, avec un sous-menu -->
			<a href="#">Menu 2</a> <!-- lien du menu -->
			<ul> <!-- début du sous-menu -->
				<li> <!-- premier élément du sous-menu -->
					<a href="#">Sous-menu 2.1</a>
				</li>
 
				<li> <!-- deuxième élément du sous-menu -->
					<a href="#">Sous-menu 2.2</a>
				</li>
 
				<li> <!-- troisième élément du sous-menu, avec un sous-sous-menu -->
					<a href="#">Sous-menu 2.3</a>
                                        <ul> <!-- début du sous-sous-menu -->
						<li><a href="#">Sous-sous-menu 2.3.1</a></li>
						<li><a href="#">Sous-sous-menu 2.3.2</a></li>
						<li><a href="#">Sous-sous-menu 2.3.3</a></li>
					</ul> <!-- fin du sous-sous-menu -->
				</li>
			</ul> <!-- fin du sous-menu -->
		</li>
</ul>

Toutes les couleurs sont changeables dans le fichier CSS fourni en téléchargeant le plugin.

Je tiens à préciser que pour des raisons d’accessibilité, il est très souvent déconseillé de mettre plusieurs niveaux dans un menu déroulant, il vaut mieux ne mettre qu’un seul niveau de sous-menu.

Cette entrée a été publiée dans JQuery, avec comme mot(s)-clef(s) , , , , . Vous pouvez la mettre en favoris avec ce permalien.

10 reponses a Tutorial Plugin JQuery #3, menu déroulant : Droppy

  1. cosinus dit :

    bon travail, mais ton menu ne marche pas comme il faut sous ie !
    il y a des espaces entre les items de menu.
    je cherche depuis quelques jours une solution mais je ne suis pas doué en css.
    j’attends un fix alors..
    Bon courage

  2. Ping : » Plugin JQuery : menus déroulants multi-niveaux // JQuery, PHP, html, design… // arnaud-k : un blog de geek

  3. Dave035 dit :

    Bonjour,

    Je suis en pleine prise de tête; comme souvent…
    Je ne suis pas un crac en matière de site mais je débute et tente de m’accrocher. Voilà pour la présentation.
    J’ai utilisé ton tuto sur le Jquery Droppy, que j’ai installé sur ma page web, mais le souci c’est que j’ai l’impression qu’il y a un conflit avec un autre script (Lightbox 2 en scriptaculous et prototype). J’ai galéré, essayé plein de trucs, et soit l’un ou l’autre fonctionnent sur la page mais jamais les deux en même temps.
    Si tu peux m’aider,

    Merci,

    David

  4. arnaud dit :

    Bonjour,
    le plugin Droppy est fait pour fonctionner avec le framework JavaScript JQuery.
    Scriptaculous et Prototype étant d’autres frameworks JavaScript, l’incompatibilité doit venir de là.

    Pour résoudre ton problème tu pourrai essayer de trouver un plugin pour Prototype qui fait des menus déroulants comme par exemple celui-ci.

  5. Dave035 dit :

    Merci pour ta réponse rapide. En effet, après plusieurs recherches, cela peut être la solution. Ou alors mettre une lightbox fonctionnant sous Jquery?
    Lytebox en est-elle une?

    David

  6. Dave035 dit :

    Ca y est, j’ai résolu mon problème. J’ai installé une Lytebox à la place et tout marche maintenant,
    merci,

    David

  7. arnaud dit :

    Content que ça marche et d’avoir pu t’aider !

  8. kronos dit :

    bonjour j ai utilisé ton script, mais j ai un soucis.

    Regarde sous IE, quand tu fait dérouler ton menu, il y a un dépôt de trame du menu (regarde tu comprendra), au début j’ai cru que ca venait de moi mais en vérifiant sur ta page de démo, je me suis apercu que le pb ne venait pas de moi mais du script d’origine.

    Si tu peut faire un truc tient moi au courant.

  9. Ping : » Les 10 meilleurs plugins JQuery – septembre 2009 - JQuery, PHP, html, design… // arnaud-k : un blog de geek

  10. ROUANET dit :

    Bonjour,

    Une solution a-t-elle été trouvée pour la compatibilité avec IE?

    Merci d’avance.

    Cordialement,

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>