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:
- Menu Principal
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":
- Menu Principal
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:
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:
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.
salut,
help …
ou touve ton ces balises à modifier ?
dans le sidebar.php ?
thanks
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.
Bonjour,
Votre code fonctionne parfaitement! Cependant si on souhaite réaliser un menu horizontal? Qu’est ce qui faut changer pour y arriver?
Merci.
Pour un menu horizontal tu dois mettre float: left; dans ton code css.
Où doit-on installer la petite fonction javascript?
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
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 » »;
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.