Tutorial JQuery #5 : créer un menu accordéon
tags : JQuery, menu accordéon
Pour aujourd’hui pas de tutorial pour un plugin JQuery mais un tutorial pour créer un menu accordéon tout simple. Je sais qu’il existe des plugins qui permettent de la faire, il n’est pas forcément nécessaire d’alourdir encore la page en sachant qu’on peut le réaliser avec seulement 7 lignes de JavaScript grâce à JQuery !
Comme d’hab, il est possible d’essayer une démonstration.
Donc pour commencer, il faut intégrer le framework JQuery sur la page :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>
Ensuite on va ajouter le code JQuery qui va permettre d’activer le menu accordéon (les sélecteurs sont entièrement adaptables) :
$(document).ready(function() { $('.accordeon').hide(); // on cache tous les textes (blocs ayant la classe accordeon) $('h4').click(function() { // si on clique sur un titre (ici tous les éléments contenu en les balises h4) $(this).next('div:hidden').slideDown() // on deroule le div caché qui suit directement le titre .siblings('div:visible').slideUp(); // et on cache les div similaires qui etait visible }); });
Enfin il n’y a plus qu’à faire le code HTML des différents éléments du menu accordéon. Ces éléments seront sous la forme un titre, un bloc, un titre, un bloc. Il ne faut pas oublier d’affecter la classe accordeon à tous les blocs de contenu pour qu’ils soient tous cachés au chargement de la page.
<h4>Avec du texte</h4> <!-- premier titre --> <div class="accordeon"><!-- premier bloc de contenu, associé au premier titre --> Amiens est une ville française du nord de la France située sur la Somme. Administrativement, cette commune est la préfecture de la région de Picardie ainsi que du département de la Somme et chef-lieu de canton. </div> <h4>Avec une photo</h4> <!-- deuxieme titre --> <div class="accordeon"><!-- deuxieme bloc de contenu --> <img src="3.jpg" alt="Metz" width="300" height="225" /> </div> <h4>Avec une liste</h4> <!-- troisieme titre --> <div class="accordeon"><!-- troisieme bloc de contenu --> <ul> <li>C'est fou ce qu'on peut mettre dans un menu accordéon !</li> <li><a href="http://blog.arnaud-k.fr">Mon blog</a></li> <li><a href="http://arnaud-k.fr">Mon site</a></li> </ul> </div>
Et c’est tout, rien de bien compliqué au final !
catégorie : JQuery
Encore un article agréable sur JQuery. Tes commentaires sur chaque ligne rendent le tutoriel vraiment intuitif.
Merci pour ton commentaire. J’essaie de mettre le plus d’explications possibles pour permettre de vraiment comprendre ce que l’on fait !
Ce site est très sympa J’ai aimé tous les sujets.
Je vous demande de transmettre certains de ses articles sur ce site
http://www.malak-rouhi.com/vb/
Bonsoir!
Je trouve cela très pratique mais comme je suis une débutante, j’ai juste besoin de savoir ou le script se met (dans la page html?) et ou le javascript se met(dans la page html?) car c’est ce que j’ai fait et cela ne marche pas.
merci
@musseau, pour plus d’explications, n’hésite pas à aller voir le code de la page de démonstration du tuto (dispo ici http://blog.arnaud-k.fr/menuAccordeon/ ). Pour ça fait un clique-droit puis « afficher la source » ou directement CTRL+U sous Firefox.
En fait tous les codes javascript que tu veux insérer dans la page HTML doivent être entre les balises :
<script type= »text/javascript »> et </script>
PS : Je viens de me rendre compte que le lien vers la démo était éronné, je l’ai corrigé dans le post ci-dessus.
Peut être que les listes de définitions auraient étaient sémantiquement plus adaptées pour ce genre d’effets…
sympa ton blog
[...] : permet de faire des menus de type accordéon (voir le tuto similaire). La particularité du plugin est qu’il peut gérer les accordéons sur plusieurs niveaux (un [...]
[...] Lien : Créer un menu accordéon avec jQuery [...]
Bonjour,
Est-ce qu’on pourrait ajouter du code dans le script pour que chaque menu se referme si l’on clique dessus et pas seulement si on ouvre un autre menu..si oui, lequel?
Merci
Bonjour,
je voulais savoir quelle était l’utilité du code « » dans ton script ? Là où tu insères jQuery… J’ai remarqué ça et c’est la 1ere fois que je le vois (ou y fais attention ^^)
Merci de ta réponse s’il y a !
Bye !
Merci pour ce tuto super simple à appréhender pour un débutant comme moi !
Je l’ai juste complété avec un code péché sur alsacreation pour que les onglets se referment si on clique dessus avec :
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next(« div:visible »).length != 0) {
$(this).next(« div.accordeon »).slideUp(« normal »); }
else { //suite du code
[...] fortement inspiré du blog de Arnaud Koncina, j’ai simplement ajouté la possibilité de rétracter la div en re-cliquant sur le même [...]
Bonsoir,
Alors je préviens…
Je vais être un véritable boulet…
Mais je ne comprends rien à rien à ce langage informatique et pourtant j’en ai besoin pour créer le site sur Wiféo :
Donc pour commencer, il faut intégrer le framework JQuery sur la page :
* Que veut dire ceci ?
Ensuite on va ajouter le code JQuery qui va permettre d’activer le menu accordéon (les sélecteurs sont entièrement adaptables) :
**Puis ceci ?
Enfin il n’y a plus qu’à faire le code HTML des différents éléments du menu accordéon. Ces éléments seront sous la forme un titre, un bloc, un titre, un bloc. Il ne faut pas oublier d’affecter la classe accordeon à tous les blocs de contenu pour qu’ils soient tous cachés au chargement de la page.
***Et pour finir ceci ? ? S’il vous plaît ?
Désolée… Je n’y comprends rien à rien…
Bonne soirée.
@nathan :
ben tout est détaillé au-dessus… Intégrer jQuery par exemple, il suffit de mettre le script (fichier .js) de jquery dans un dossier, puis d’écrire » dans la balise de ta page.. Il suffit presque de faire un simple copier/coller du tutoriel de cette page :/
Merci pour ce très beau raccourci de script.
Dommage qu’Internet Explorer ne prenne pas en compte la propriété ‘-moz-border-radius’ pour les coins arrondis.
Hello ! Merci pour le script, très bon site !!
Est-ce que quelqu’un peut me dire où je dois mettre la ligne de code qui permet de refermer le menu quand on clique sur un des items.
ligne de code citée dans le commentaire de Nouben
salut super mais si je vx avoir le fichier jquery.min.js sans avois l integrer a partir du site et merci