[[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]]
==== WEB - Conception d'un menu déroulant avec des règles CSS ====
[Mise à jour le 1/4/2024]
* **Ressources**
* Introduction à la mise en page en CSS
* CSS facile ! - Propriétés CSS
----
=== 1 Organisation du répertoire de travail ===
* Créer un répertoire et l'organiser comme ci-dessous.
{{ :web:repmenu.png?nolink |}}
=== 2. Création de la structure du menu ===
La **structure** du menu est créée dans le fichier //**menu.html**// à l'aide d'une **liste non ordonnée** .
{{ :web:structure.png?nolink&160|}}
* Compléter le fichier //**menu.html**// comme ci-dessous.
Menu déroulant
\\
//Remarque// : le lien en commentaire montre comment utiliser une police de caractères Google.
=== 3. Mise en forme du menu ===
Placer les règles CSS dans la page //**menu.css**//.
* **3.1 Création d'une règle pour le corps de la page**
body {
font-family: "Lato", sans-serif;
font-size: 12px;
}
* **3.2 Suppression du style par défaut des listes**
Créer la règle 1 comme ci-dessous :
{{ :web:structure2.png?nolink&160|}}
/* Règle 1 */
nav ul {
list-style: none;
}
* **3.3 Suppression du soulignement des liens**
Créer la règle 2 comme ci-dessous :
{{ :web:structure3.png?nolink&160|}}
/* Règle 2 */
nav ul li a {
text-decoration: none;
}
* **3.4 Suppression des marges par défaut**
Compléter la règle 1 avec les déclarations ci-dessous :
{{ :web:structure4.png?nolink&100|}}
/* Règle 1 */
nav ul {
padding: 0;
margin: 0;
}
* **3.5 Les sous-menus sont masqués**
Créer la règle 3 comme ci-dessous :
{{ :web:structure5.png?nolink&60|}}
/* Règle 3 */
nav ul li ul {
display: none;
}
* **3.6 Afichage du premier niveau du menu « en ligne »**
Créer la règle 4 comme ci-dessous :
{{ :web:structure6.png?nolink&200|}}
/* Règle 4 */
nav ul li {
float: left;
}
* **3.7 Réglage de la hauteur du menu de premier niveau et ajout de la couleur **
Compléter la règle 4 avec les déclarations ci-dessous :
{{ :web:structure7.png?nolink&200|}}
/* Règle 4 */
nav ul li {
background-color: #64abfb;
float: left;
line-height: 35px;
}
* **3.8 Les éléments du menu de premier niveau sont éloignés**
Compléter la règle 2 avec la déclaration de style ci-dessous :
{{ :web:structure8.png?nolink&200|}}
/* Règle 2 */
nav ul li a {
padding: 5px;
}
* **3.9 Apparition des sous-menus au passage de la souris**
Créer la règle 5 comme ci-dessous :
{{ :web:structure9.png?nolink|}}
/* 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 Placement des items des sous-menus verticalement**
Créer la règle 6 comme ci-dessous :
{{ :web:structure10.png?nolink&220|}}
/* Règle 6 */
nav ul li:hover ul li {
float: none;
}
La propriété float sur MDN Web Docs
* **3.11 Décalage des sous-menus sur la gauche de n pixel**
Compléter la règle 5 avec la déclaration de style ci-dessous :
{{ :web:structure11.png?nolink&220|}}
/* Règle 5 */
nav ul li:hover ul {
margin-left: -10px;
}
* **3.12 Changement de la couleur du texte**
Compléter la règle 2 avec la déclaration de style ci-dessous :
{{ :web:structure12.png?nolink&220|}}
nav ul li a {
color: #FFF;
}
* **3.13 Le texte est souligné au passage de la souris **
Créer la règle 7 comme ci-dessous :
{{ :web:structure13.png?nolink&220|}}
/* Règle 7 */
li a:hover {
border-bottom: 3px #FFF solid;
}
* **3.14 On fait les finitions **
Créer la règle 8. Modifier les règles 1, 2 et 5 comme ci-dessous :
{{ :web:structure14.png?nolink&220|}}
/* 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.