Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
web:menucss [2021/08/11 11:24] – phil | web:menucss [2024/04/02 07:23] (Version actuelle) – [2. Création de la structure du menu] phil | ||
---|---|---|---|
Ligne 3: | Ligne 3: | ||
==== WEB - Conception d'un menu déroulant avec des règles CSS ==== | ==== WEB - Conception d'un menu déroulant avec des règles CSS ==== | ||
- | [Mise à jour le 15/6/2021] | + | [Mise à jour le 1/4/2024] |
* **Ressources** | * **Ressources** | ||
Ligne 11: | Ligne 11: | ||
---- | ---- | ||
- | === 1 Organisation du répertoire | + | === 1 Organisation du répertoire |
- | Créer un répertoire et l' | + | |
{{ : | {{ : | ||
- | === 2. Créer | + | === 2. Création de la structure |
+ | <callout type=" | ||
{{ : | {{ : | ||
- | Compléter le fichier | + | * Compléter le fichier |
<code html *.html> | <code html *.html> | ||
< | < | ||
Ligne 25: | Ligne 28: | ||
<meta charset=" | <meta charset=" | ||
< | < | ||
- | <link rel=" | + | <link rel=" |
- | < | + | < |
rel=' | rel=' | ||
</ | </ | ||
Ligne 52: | Ligne 55: | ||
</ | </ | ||
</ | </ | ||
+ | \\ | ||
- | === 3. Mettre le menu en forme === | + | // |
- | Les règles CSS sont placées | + | === 3. Mise en forme du menu === |
+ | <callout type=" | ||
- | * **3.1 Créer | + | * **3.1 Création d'une règle pour le corps de la page** |
< | < | ||
body { | body { | ||
- | font: 12px " | + | font-family: " |
+ | font-size: 12px; | ||
} | } | ||
</ | </ | ||
- | * **3.2 Supprimer le style par défaut des listes** | + | * **3.2 Suppression du style par défaut des listes** |
Créer la règle 1 comme ci-dessous : | Créer la règle 1 comme ci-dessous : | ||
{{ : | {{ : | ||
Ligne 73: | Ligne 79: | ||
</ | </ | ||
- | * **3.3 Supprimer le soulignement des liens** | + | * **3.3 Suppression du soulignement des liens** |
Créer la règle 2 comme ci-dessous : | Créer la règle 2 comme ci-dessous : | ||
{{ : | {{ : | ||
Ligne 83: | Ligne 89: | ||
</ | </ | ||
- | * **3.4 Supprimer les marges par défaut** | + | * **3.4 Suppression des marges par défaut** |
- | Modifier | + | Compléter |
{{ : | {{ : | ||
<code css *.css> | <code css *.css> | ||
/* Règle 1 */ | /* Règle 1 */ | ||
nav ul { | nav ul { | ||
- | list-style: none; | ||
padding: 0; | padding: 0; | ||
margin: 0; | margin: 0; | ||
Ligne 95: | Ligne 100: | ||
</ | </ | ||
- | * **3.5 Cacher les sous-menus** | + | * **3.5 Les sous-menus |
Créer la règle 3 comme ci-dessous : | Créer la règle 3 comme ci-dessous : | ||
{{ : | {{ : | ||
Ligne 105: | Ligne 110: | ||
</ | </ | ||
- | * **3.6 Aficher le premier niveau du menu « en ligne »** | + | * **3.6 Afichage du premier niveau du menu « en ligne »** |
Créer la règle 4 comme ci-dessous : | Créer la règle 4 comme ci-dessous : | ||
{{ : | {{ : | ||
Ligne 115: | Ligne 120: | ||
</ | </ | ||
- | * **3.7 Régler | + | * **3.7 Réglage de la hauteur du menu de premier niveau et ajout de la couleur ** |
- | Modifier | + | Compléter |
{{ : | {{ : | ||
<code css *.css> | <code css *.css> | ||
Ligne 127: | Ligne 132: | ||
</ | </ | ||
- | * **3.8 Éloigner les éléments du menu de premier niveau** | + | * **3.8 Les éléments du menu de premier niveau |
- | Modifier | + | Compléter |
{{ : | {{ : | ||
<code css *.css> | <code css *.css> | ||
/* Règle 2 */ | /* Règle 2 */ | ||
nav ul li a { | nav ul li a { | ||
- | text-decoration: | ||
padding: 5px; | padding: 5px; | ||
} | } | ||
</ | </ | ||
- | * **3.9 Faire apparaître les sous-menus au passage de la souris** | + | * **3.9 Apparition des sous-menus au passage de la souris** |
Créer la règle 5 comme ci-dessous : | Créer la règle 5 comme ci-dessous : | ||
{{ : | {{ : | ||
Ligne 148: | Ligne 152: | ||
} | } | ||
</ | </ | ||
+ | <callout type=" | ||
- | < | ||
- | * **3.10 | + | * **3.10 |
Créer la règle 6 comme ci-dessous : | Créer la règle 6 comme ci-dessous : | ||
{{ : | {{ : | ||
Ligne 160: | Ligne 164: | ||
} | } | ||
</ | </ | ||
+ | <callout type=" | ||
- | < | + | |
- | + | Compléter | |
- | | + | |
- | Modifier | + | |
{{ : | {{ : | ||
<code css *.css> | <code css *.css> | ||
/* Règle 5 */ | /* Règle 5 */ | ||
nav ul li:hover ul { | nav ul li:hover ul { | ||
- | display: list-item; | ||
- | position: absolute; | ||
margin-left: | margin-left: | ||
} | } | ||
</ | </ | ||
- | * **3.12 | + | * **3.12 |
- | Modifier | + | Compléter |
{{ : | {{ : | ||
<code css *.css> | <code css *.css> | ||
nav ul li a { | nav ul li a { | ||
- | text-decoration: | ||
- | padding: 5px; | ||
color: #FFF; | color: #FFF; | ||
} | } | ||
</ | </ | ||
- | * **3.13 | + | * **3.13 |
Créer la règle 7 comme ci-dessous : | Créer la règle 7 comme ci-dessous : | ||
{{ : | {{ : | ||
Ligne 196: | Ligne 195: | ||
</ | </ | ||
- | * **3.14 | + | * **3.14 |
Créer la règle 8. Modifier les règles 1, 2 et 5 comme ci-dessous : | Créer la règle 8. Modifier les règles 1, 2 et 5 comme ci-dessous : | ||
{{ : | {{ : | ||
Ligne 229: | Ligne 228: | ||
} | } | ||
</ | </ | ||
+ | <callout type=" | ||
- | < |