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.
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 .
Salut Bez856, j’ai bien testé avec Firefox, IE 6.0 et IE 7.0 je ne vois pas ton problème…
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
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; »
salut.
un bon et un simple cours .
merci merci
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.
J’ai essayé ce bout de code, ca marcheniquel sous Firefox, par contre sur Safari, ca n’affiche rien du tout…
J’ai oublié de préciser que j’étais sur wordpress, dans la sidebar…
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.