Nous allons voir dans ce tutoriel comment créer un menu déroulant uniquement en HTML CSS sans utiliser du JavaScript.
Le menu est un élément essentiel de tout site internet, il participe grandement au confort d’utilisation des lecteurs en facilitant la navigation à l’intérieur du site.
Lorsqu’on apprend les langages web, on commence toujours par les indispensables HTML CSS avant de se plonger dans le JavaScript. Ce dernier est beaucoup plus long à appréhender et est beaucoup plus difficile à utiliser dans la création des menus d’un site Web.
Vous ne maîtrisez pas encore le JavaScript et souhaitez tout de même créer un site intégrant un menu déroulant, voyons comment le créer en HTML – CSS.
1 : Création du code HTML
La première étape consiste à créer le code HTML du menu.
Notre menu va comporter 3 liens, l’un d’entre eux va contenir un sous-menu qui va apparaître (se dérouler) lorsqu’on survole le lien avec la souris.
A) : création de la barre de navigation.
On crée la division (div) qui va contenir le menu et on lui donne une classe (navbar) qui nous servira ensuite pour la styliser via le fichier CSS.
B) : Création des liens du menu du premier niveau.
On crée ensuite une liste qui va contenir 3 liens.
A la place de # rentrez l’adresse de votre lien (page).
Exemple :
<a href= »accueil.html »>Accueil</a>
C) : Création des liens du menu déroulant (sous-menu).
À l’intérieur du 3e lien (services), on crée une autre liste dans laquelle on va placer les liens du menu déroulant.
Bien nous avons fini avec le HTML, pour l’instant le rendu est pour le moins très moche, ce qui est normal puisque nous n’avons pas stylisé notre menu avec du CSS. On va donc y remédier tout de suite.
2 : Création du code CSS
Bien il est temps maintenant de styliser notre menu avec du code CSS.
A) : Barre de navigation.
Commençons par styliser la barre de navigation avec la classe CSS navbar que nous avons mise dans le code HTML.
On lui donne une couleur de fond, une police d’écriture et une hauteur de 80 px. On centre ensuite le menu en ajoutant une marge internet haute (padding-top).
B) : Liste.
Ici, nous allons déterminer les marges externes (margin) et internes (padding) de la liste. Nous allons aussi enlever le style par défaut des listes avec list-style :none.
C) : Liste des liens.
- On positionne les liens vers la gauche : float:left.
- On définit les dimensions (hauteur et une largeur) : width: 200px / height: 40px.
- On donne une hauteur de ligne : line-height: 40px.
- On aligne le texte au centre : text-align: center.
- On choisit la taille de caractère : font-size: 20px.
D) : Les liens.
- On enlève la décoration (le soulignement) : text-decoration: none.
- On définit leur couleur : color: white.
- On les dispose en bloc : display: block.
Au passage de la souris, on change la couleur de fond et la couleur du texte avec la propriété hover.
E) : Les liens du sous-menu.
C’est ici que se trouve le problème majeur. Comment faire disparaître le sous-menu et le faire réapparaître au passage de la souris.
En fait, c’est très simple.
En premier, on fait disparaître le sous-menu avec display :none.
Puis on le fait apparaître au passage de la souris avec la propriété hover et display : block. C’est aussi simple que ça.
Resultat final
Conclusion
Comme vous pouvez le constater, il est tout à fait possible de créer un menu déroulant très facilement sans utiliser de JavaScript, néanmoins pour des menus plus complexes ce dernier deviendra vite indispensable.
