Comment développer des sous-menus cachés

Voici une façon rapide et simple de créer un menu qui contient lui-même des sous-menus cachés tant que l’utilisateur ne cliquent pas sur le menu principal. Il y a des tonnes de script sur le web qui peuvent être exploités pour des menus dynamiques avec arborescence (treeview menu) mais si vous voulez faire ça rapidement, tout en apprenant un peu plus sur le DHTML (contrôle CSS par javascript), c’est une bonne façon de commencer, sans trop alourdir votre page de long programmes javascript tout usage pour un simple petit effet.

Voici notre menu typique, qui utilise la structure d’une liste:

1
2
3
4
5
6
7
8
9
10
11
<ul>
<li>Menu Principal
 
	<ul>
	<li><a href="sous-menu1.html">Sous Menu #1</a></li>
	<li><a href="sous-menu2.html">Sous Menu #2</a></li>
	<li><a href="sous-menu3.html">Sous Menu #3</a></li>
	</ul>
 
</li>
</ul>

Pour commencer, il faut cacher le menu secondaire avec l’attribut CSS display: none;. Ensuite, on va donner un id au menu pour pouvoir le contrôler avec javascript par la suite, comme suit id="sousmenu1":

1
2
3
4
5
6
7
8
9
10
11
<ul>
<li>Menu Principal
 
	<ul id="sousmenu1" style="display: none;">
	<li><a href="sous-menu1.html">Sous Menu #1</a></li>
	<li><a href="sous-menu2.html">Sous Menu #2</a></li>
	<li><a href="sous-menu3.html">Sous Menu #3</a></li>
	</ul>
 
</li>
</ul>

Maintenant, il nous faut écrire la petite fonction (minuscule!) javascript qui va afficher ou cacher le sous-menu lorsque l’utilisateur clique sur le menu principal:

1
2
3
4
function showmenu(menu) {
if (menu.style.display == 'none') menu.style.display = 'block';
else menu.style.display = 'none';
}

Comme on peut voir, tout ce que la fonction fait est de prendre l’élément de page identifié par le id, regarde si le menu est caché ou affiché, et change sa visibilité dans le sens contraire.

Si c’est encore un peu flou, vous allez comprendre lorsque nous allons ajouter la fonction dans le lien du menu principal:

1
2
3
4
5
6
7
8
9
10
11
12
<ul>
<li><a onclick="javascript: showmenu(document.getElementById('sousmenu1'));"
style="cursor: pointer;">Menu Principal</a>
 
	<ul id="sousmenu1" style="display: none;">
	<li><a href="sous-menu1.html">Sous Menu #1</a></li>
	<li><a href="sous-menu2.html">Sous Menu #2</a></li>
	<li><a href="sous-menu3.html">Sous Menu #3</a></li>
	</ul>
 
</li>
</ul>

Quand un utilisateur clique le menu principal, celui-ci prends l’élément de page sousmenu1 et interchange sa visibilité, pour le montrer s’il est caché, ou le cacher s’il est montré. J’ai aussi ajouté l’attribut CSS cursor: pointer; parce qu’un lien sans adresse href ne donne pas toujours de curseur en pointeur, dépendamment des navigateurs web.

Si vous voulez un menu géré par une base de donnée et PHP, veuillez vous référez à l’article Construire un menu arborescent avec une fonction récursive en PHP.

Note: Les liens qui utilisent seulement onclick peuvent encourir certains problèmes, prière de lire l’article La meilleure méthode pour exécuter une fonction javascript dans un lien HTML pour en savoir plus.

Partager cet article:

  • del.icio.us
  • Facebook
  • StumbleUpon
  • Twitter
  • LinkedIn

Catégories: Programmation web | 17 commentaires »
Les tags de cet article: ,

Note: Merci pour vos commentaires, j'apprécie ceux qui partagent leurs avis et leurs expériences de webmestre, ou s'il y a lieu, indiquent une erreur dans mes tutoriels, mais je ne peux évidemment pas faire de support technique pour votre site, alors veuillez éviter d'en faire la demande dans cette section.

17 commentaires pour “Comment développer des sous-menus cachés”

  1. Bez856 dit: 31 décembre 2008 at 10:35

    Bonjour, je viens d’appliquer votre méthode et cela marche simplement bien. Seulement j’ai un petit soucis, lorsque la page se charge, on est obligés de cliquer deux fois sur le menu avant qu’il ne se déplie. Par la suite il n’y a pas de problème, un clique suffit pour enrouler ou dérouler le menu.
    Est ce que par hasard vous aurez une petite idée de où cela peut il venir ??

    Merci d’avance .

  2. Martin dit: 5 janvier 2009 at 1:10

    Salut Bez856, j’ai bien testé avec Firefox, IE 6.0 et IE 7.0 je ne vois pas ton problème…

  3. Bez856 dit: 5 janvier 2009 at 5:20

    Bonjour Martin, et bien moi je suis sous Ubuntu avec Firefox et j’ai toujours le problème que j’ai dit avant. Malheureusement je n’ai pour le moment pas sous la main une machine sous Windows pour tester si le problème est le même . . .
    Es-tu sous windows toi ??

    Merci

    Bez856

  4. Martin dit: 9 janvier 2009 at 18:59

    Salut Bez856, es-tu sur d’avoir l’attribut display: none dans le code html et non dans le fichier css? Le problème semble arriver si on insére cet attribut dans un fichier css externe au lieu de l’intégrer directement dans le code html de l’élément que tu veux cacher, comme suit: style= »display: none; »

  5. jonah dit: 20 juin 2009 at 4:46

    salut.
    un bon et un simple cours .
    merci merci

  6. adil dit: 23 juillet 2009 at 5:28

    salut tout le monde,
    merci bcp pour la fonction mais j’ai un pit probème,
    ca marche pour moi avec firefox mai pas IE 6!
    avez vous une solution ?
    merci d’avance.

  7. quentin dit: 9 novembre 2009 at 21:18

    J’ai essayé ce bout de code, ca marcheniquel sous Firefox, par contre sur Safari, ca n’affiche rien du tout…

  8. quentin dit: 9 novembre 2009 at 21:19

    J’ai oublié de préciser que j’étais sur wordpress, dans la sidebar…

  9. younes dit: 9 mars 2010 at 18:28

    j’ai testé ce code, ça marche bien avec IE mais il y a un petit problème c’est que l’utlisateur doit cliquer sur le menu principal pour affiche les sous menus et aussi il doit cliquer la deuxieme fois pour disparaitre les sous menus et ça je pense que c’est inconvinient. je veux que les sous menus disparraitre lors de la sortie des sous menus par exemple.
    merci d’avance.

  10. azerty dit: 24 mai 2010 at 8:49

    salut,

    help …

    ou touve ton ces balises à modifier ?

    dans le sidebar.php ?

    thanks

  11. Olivier C dit: 11 juin 2010 at 11:19

    Bonjour,

    Votre code me paraît intéressant car pas trop compliqué. Cependant je n’y connais pas grand chose…

    Où doit t’on mettre la fonction javascript ? J’ai essayé de la mettre entre des balises « script » juste avant le menu. Après un échec j’ai tenté dans le header… bref je ne sais pas comment procéder…

    Pourriez vous me donner quelques précisions ?

    D’avance merci.

  12. Simon dit: 6 juin 2011 at 4:31

    Bonjour,

    Votre code fonctionne parfaitement! Cependant si on souhaite réaliser un menu horizontal? Qu’est ce qui faut changer pour y arriver?

    Merci.

  13. Geoffrey dit: 21 juin 2011 at 5:34

    Pour un menu horizontal tu dois mettre float: left; dans ton code css.

  14. Berthe-Hélène Boulianne dit: 20 avril 2012 at 9:27

    Où doit-on installer la petite fonction javascript?

  15. Rachid dit: 19 mars 2013 at 6:07

    Bonjour;
    SVP, j’ai un grand problème…lol
    je vais m’expliquer, en fait je voulais faire ce meme genre de menu, mais en php, car en fait le nombre de fils de chaque lien sera dynamique en fonction de mes données, alors je voudrai faire un menu mais en php.
    est ce que y’a quelqu’un qui pourra m’aider?
    merci d’avance.
    je vous laisse mon mail, si vous avez un lien util ou un exemple: loukyhappy@hotmail.com

  16. Rachid dit: 19 mars 2013 at 12:47

    Bonsoir;
    pour la solution php j’ai bien trouvé la solution, ce que je n’arrive pas a faire, c’est d’avoir un menu à plusieurs niveaux, est ce que y’a quelqu’un qui pourra m’aider svp.

    merci d’avance.

    je profite l’occasion pour poster mon code, pour ceux qui s’intéressent.
    //////////////////////////////////////////.
    echo »";

    echo »";

    echo »Client\n »;//onclick=’javascript:montre();’
    $x=0;
    for($x=0;$x<3;$x++){

    echo"SD ».$x. »\n »;//

    echo »";
    echo »";
    echo »Application« ;
    echo »";
    echo »techno\n »;
    echo »";
    echo »\n »;
    echo »Infrastructure\n »;
    echo »";
    echo » « ;
    }

    echo »";
    echo »";

  17. Kanulambi dit: 27 août 2016 at 11:03

    Bonjour! je veux savoir comment je peux créer mes menus horizotal et vertical sur mon et comment créer le corps et le pied de page mon gabarit.

    Merci d’avance.

Laisser un commentaire