WEB - Conception d'un menu déroulant avec des règles CSS
1 Organisation du répertoire du projet
Créer un répertoire et l'organiser comme ci-dessous
2. Créer la strucure du menu
Compléter le fichier index.html comme ci-dessous.
- *.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Menu déroulant</title> <link rel="stylesheet" type="text/css" href="styles/style.css" /> <!--<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css' />--> </head> <body> <nav> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a> <ul> <li><a href="#">sous-menu 2.1</a></li> </ul> </li> <li><a href="#">menu3</a> <ul> <li><a href="#">sous-menu 3.1</a></li> <li><a href="#">sous-menu 3.2</a></li> </ul> </li> <li><a href="#">menu4</a></li> </ul> </nav> </body> </html>
3. Mettre le menu en forme
Les règles CSS sont placées dans la page style.css.
- 3.1 Créer une règle pour la page
- *.css
body { font: 12px "Lato", sans-serif; }
- 3.2 Supprimer le style par défaut des listes
Créer la règle 1 comme ci-dessous :
- *.css
/* Règle 1 */ nav ul { list-style: none; }
- 3.3 Supprimer le soulignement des liens
Créer la règle 2 comme ci-dessous :
- *.css
/* Règle 2 */ nav ul li a { text-decoration: none; }
- 3.4 Supprimer les marges par défaut
Modifier la règle 1 comme ci-dessous :
- *.css
/* Règle 1 */ nav ul { list-style: none; padding: 0; margin: 0; }
- 3.5 Cacher les sous-menus
Créer la règle 3 comme ci-dessous :
- *.css
/* Règle 3 */ nav ul li ul { display: none; }
- 3.6 Aficher le premier niveau du menu « en ligne »
Créer la règle 4 comme ci-dessous :
- *.css
/* Règle 4 */ nav ul li { float: left; }
- 3.7 Régler la hauteur du menu de premier niveau et ajouter de la couleur
Modifier la règle 4 come ci-dessous :
- *.css
/* Règle 4 */ nav ul li { background-color: #64abfb; float: left; line-height: 35px; }
- 3.8 Éloigner les éléments du menu de premier niveau
Modifier la règle 2 comme ci-dessous :
- *.css
/* Règle 2 */ nav ul li a { text-decoration: none; padding: 5px; }
- 3.9 Faire apparaître les sous-menus au passage de la souris
Créer la règle 5 comme ci-dessous :
- *.css
/* Règle 5 */ nav ul li:hover ul { display: list-item ; position: absolute; }
Les déclarations display: list-item et position: absolute sur MDN Web Docs
- 3.10 Placer les items des sous-menus verticalement
Créer la règle 6 comme ci-dessous :
- *.css
/* Règle 6 */ nav ul li:hover ul li { float: none; }
La propriété float sur MDN Web Docs
- 3.11 Décaler les sous-menus sur la gauche de npx
Modifier la règle 5 comme ci-dessous
- *.css
/* Règle 5 */ nav ul li:hover ul { display: list-item; position: absolute; margin-left: -10px; }
- 3.12 Changer la couleur du texte
Modifier la règle 2 comme ci-dessous :
- *.css
nav ul li a { text-decoration: none; padding: 5px; color: #FFF; }
- 3.13 Souligner le texte au passage de la souris
Créer la règle 7 comme ci-dessous :
- *.css
/* Règle 7 */ li a:hover { border-bottom: 3px #FFF solid; }
- 3.14 Faire les finitions
Créer la règle 8. Modifier les règles 1, 2 et 5 comme ci-dessous :
- *.css
/* Règle 8 */ li { padding: 5px; } /* Règle 1 */ nav ul { background-color: #64abfb; /* A ajouter */ list-style: none; padding: 0; margin: 0; } /* Règle 2 */ nav ul li a { text-decoration: none; padding: 5px; color: #FFF; font-size: 15px; /* A ajouter */ } /* Règle 5 */ nav ul li:hover ul { z-index: 9999; /* A ajouter */ display: list-item ; position: absolute; margin-left: -10px; }
La propriété z-index sur MDN Web Docs.