Dernière mise à jour : 29 décembre 2021
Il existe plusieurs techniques pour créer un menu déroulant, dans cet article je vais vous montrer comment créer un menu déroulant sans JavaScript, sans Jquery, vous pouvez créer votre propre menu déroulant seulement en utilisant le CSS (Cascading Style Sheet).
Je vais commencer par vous présenter le code HTML du menu. (l’explication juste après)
<ul id="menu-easy"> <li> <a href="#">Accueil</a> </li> <li> <a href="#">Produits</a> <ul class="sous-menu"> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> </ul> </li> <li> <a href="#">EasyTutoriel.com</a> <ul class="sous-menu"> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> </ul> </li> <li> <a href="#">Contact</a> <ul class="sous-menu"> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> <li><a href="#">Sous menu</a></li> </ul> </li> </ul>
Dans le code HTML en haut, vous allez remarquer qu'on a utilisé ces balises : <ul> <li> <a>. Chaque menu commence avec une liste non-ordonnée qui commence par un élément <ul>. Pour chaque balise <ul> on trouve des balises <li> enchaînés, ce sont les éléments du menu. Et pour mettre un élément du menu, on a utilisé la balise <a>avec l'attribut href="#" pour définir le lien.
Voici la structure d'un menu simple sans CSS (Sans class, sans id) :
<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul>
Maintenant, on va ajouter le style CSS, pour rendre le menu plus agréable. Pour le fournir l'effet de montrer/cacher des sous-menus sans JavaScript. En modifiant le code qui suit, vous pouvez changer les couleurs de votre menu.
#menu-easy { background: 004772; width: 644px; height: 30px; font-size:16px; font-family:sans-serif,arial; list-style-type: none; margin: 0; padding: 0; border: 0; position: absolute; top: 0; left: 0; } #menu-easy li { float: left; width: 150px; margin: 0; padding: 0; border: 0; } #menu-easy li a:link, #menu-easy li a:visited { display: block; height: 1%; color: #FFF; background: black; margin: 0; padding: 4px 8px; border-right: 1px solid #fff; text-decoration: none; } #menu-easy li a:hover { background-color: #003453; } #menu-easy li a:active { background-color: #003453; } #menu-easy .sous-menu { display: none; list-style-type: none; margin: 0; padding: 0; border: 0; } #menu-easy .sous-menu li { float: none; margin: 0; padding: 0; border: 0; width: 149px; border-top: 1px solid #003453; border-right: 1px solid #003453; } #menu-easy .sous-menu li a:link, #menu-easy .sous-menu li a:visited { display: block; color: #FFF; margin: 0; border: 0; text-decoration: none; background: #005182; } #menu-easy .sous-menu li a:hover { background-image: none; background-color: #002c47; } #menu-easy li:hover > .sous-menu { display: block; }
Voilà, maintenant, vous êtes opérationnel et vous pouvez modifier le CSS pour adapter la présentation de votre site.
Amusez-vous avec votre nouveau menu !
N'oubliez pas de publier vos commentaires.
Soufiane Sabiri - Easytutoriel.com
Bonjour,
Génial et tres clair.
Mais je ne comprends pas comment rendre tout le menu vertical ?
A+
Patrick
C'est sympa c'est tuto. je peux vous assurer que je me demandait comment je pourrai y arriver sans javascript car c'est pour moi une bte noir. merci infiniment pour cette promotion de la science
très bien fait sauf qu'on ne peut pas faire du copier coller
merci
Bonjour Baba,
Copier-coller de quoi ?
Explications très claires. Merci
Salut Soufiane,
C'est très bien explique ce menu déreoulant avec du CSS, car avant je croyais qu'on peut faire un menu déroulant qu'avec du javascript. Mais là, je comprend très bien l'explication dans ce tuto.
Merci pour ce tuto, tu serai un grand professeur.
Bonjour Oniesta,
Vous allez découvrir plusieurs autres choses dans les prochains jours, car aujourd'hui ce site web n'est qu'en version beta (version d'évaluation).
Merci de vos commentaires que vous avez posté dans ce site web !
Et soyez le bienvenue sur EasyTutoriel.com
Amicalement,
Soufiane
Salut soufiane,
Est ce que tu as testé ton menu sur plusieurs navigateurs pour savoir sur lesquels il est compatible ?
Bonjour Jérôme,
.
Non, car je suis en période d'examens, dès que j'aurais fini l'examen nationale, je vais analyser le contenu que j'ai mit quand j'étais stressé :(.
Bref, je vais le tester le mois prochain, je suis en période d'examens
Merci pour votre remarque !
A toute.
Bon travail.
Je me permets juste une petite correction à des fins visuelles.
Suis sous Firefox 4 et IE 7.
Tel qu'indiqué dans le script, la largeur des lignes des sous-menu est de 149px. Dans mes navigateurs, j'ai un petit décalage à droite qui n'est pas très joli.
En indiquant 148px, tout est nickel.
Pour les débutants, il s'agit de la ligne 51 de la partie CSS.
Bonne continuation
Bonjour Broeck,
Merci pour votre remarque, juste en ce qui concerne le décalage à droite, je vous propose de modifier le "width" de la balise ou bien de la balise , ou bien comme vous avez fait, vous avez modifier le width des balises , et ça aussi peut marcher ^^.
Amicalement.
Merci
Je vous remercie tous pour l'encouragement !
un trés bon travail mr soufiane bon continuation
niiice
très bien