Tuto Jquery

Menu déroulant Jquery

Un site internet, qu'il soit développé en PHP, Python ou Wordpress contient dans la plupart des cas un menu permettant la navigation entre les différentes pages et rubriques. Il en est de même pour les applications mobiles Android et IOS (et parfois certains documents de type Word, Excel...). Plus un site web ou une application mobile est complexe et son contenu est dense, plus le menu aura besoin d'être structuré sur plusieurs niveaux afin que l'utilisateur puisse trouver rapidement et facilement son chemin vers les informations ou fonctionnalités recherchées. Dans la plupart des cas l'interaction avec le menu est gérée côté front-end (c'est à dire côté utilisateur) grâce au trio HTML, CSS et Javascript (ou Vanilla JS comme certains l'appelle). Le langage Javascript permet en effet d'interagir entre des évènements (click, a href, survol souris, touche enter...) à partir des balises HTML identifiées par des class ou des ID et des fonctions Javascript chargées d'exécuter l'action souhaitée. Afin d'exécuter ces fonctions, on peut utiliser du Javascript natif, se servir d'un framework (Angular, React, VueJS...) ou d'une librairie supplémentaire telle que Jquery (qui facilite notamment l'utilisation d'AJAX). Dans l'exemple suivant je vais utiliser la librairie Jquery pour construire un menu déroulant vertical. Celui ci est structuré en modules, chapitres et articles. Libre à vous de modifier l'aspect (responsive, Bootstrap...), les titres et le contenu si vous souhaitez ajouter du texte, des images, des liens vers des documents PDF etc...

Menu déroulant vertical Jquery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Menus déroulants Jquery</title>
        <style>
            body{
                font-family:arial;
                font-size:14px;
                margin-left:5%;
                margin-right:5%;
            }
            .module-container{
                margin-left:20px;
            }
            .chapitre-container{
                margin-left:40px;
            }
            .article-container{
                margin-left:20px;
           }
            h1{
                font-size:22px;
                color:black;
            }
            h2{
                font-size:20px;
                color:#06568e;
                text-transform: uppercase;
            }
            h3{
                font-size:18px;
                color:grey;
                margin-left:20px;
                text-transform: uppercase;
            }
            h4{
                color:#fe9c3f;
            }
            h2:hover{
                cursor: pointer;
            }
            h3:hover{
                cursor: pointer;
            }
            h4:hover{
                cursor: pointer;
            }
            .deroule:hover{
                cursor: pointer;
                color:#fe9c3f;
            }
            textarea {
                border-style: none;
                resize:none;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <body>
        <h1>Exemple de menus déroulants imbriqués avec Jquery</h1>
        <div class="deroule" onclick="derouler()">Tout dérouler</div>
        
        <h2>MODULE 1</h2>
        <div class="module-container">
            <h3>CHAPITRE 1</h3>
            <div class="chapitre-container">
                <h4>Sous chapitre 1</h4>
                <textarea class="article-container">
Blablablablabla....
                </textarea>
                <h4>Sous chapitre 2</h4>
                <textarea class="article-container">
Blablablablabla....
                </textarea>
            </div>
            <h3>CHAPITRE 2</h3>
            <div class="chapitre-container">
                <h4>Sous chapitre 1</h4>
                <textarea class="article-container">
Blablablablabla....
                </textarea>
                <h4>Sous chapitre 2</h4>
                <textarea class="article-container">
Blablablablabla....
                </textarea>
            </div>
        </div>
        
        <h2>MODULE 2</h2>
        <div class="module-container">
            <h3>CHAPITRE 1</h3>
            <div class="chapitre-container">
                <h4>Sous chapitre 1</h4>
                <textarea class="article-container">
Blablablablabla....
                </textarea>
                <h4>Sous chapitre 2</h4>
                <textarea class="article-container">
Blablablablabla....
                </textarea>
            </div>
            <h3>CHAPITRE 2</h3>
            <div class="chapitre-container">
                <h4>Sous chapitre 1</h4>
                <textarea class="article-container">
Blablablablabla....
                </textarea>
                <h4>Sous chapitre 2</h4>
                <textarea class="article-container">
Blablablablabla....
                </textarea>
            </div>
        </div>
        <h2><!--IMPORTANT: laisser la dernière balise H2 vide pour les besoins du code--></h2>
        <script>
            var deroulement = 0;

            function init() {
                $("textarea").each(function () {
                    this.style.height = this.scrollHeight+'px';
                });
                $('.module-container, .chapitre-container, .article-container').hide();
            }

            $("h2, h3, h4").click(function(){
                if ($( this ).next().is(":hidden")) {
                    $( this ).next().show();
                } else {
                    $( this ).next().hide();
                }
            });

            function derouler() {
                if (deroulement == 1) {
                    $('.module-container, .chapitre-container, .article-container').hide();
                    deroulement = 0;
                } else {
                    $('.module-container, .chapitre-container, .article-container').show();
                    deroulement = 1;
                }
            }

            init();
        </script>
    </body>
</html>