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 [2024/03/30 11:00] – [3. Mise en forme du menu] 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 30/3/2024] | + | [Mise à jour le 1/4/2024] |
* **Ressources** | * **Ressources** | ||
Ligne 16: | Ligne 16: | ||
=== 2. Création de la structure du menu === | === 2. Création de la structure du menu === | ||
- | <callout type=" | + | <callout type=" |
{{ : | {{ : | ||
Ligne 29: | Ligne 29: | ||
< | < | ||
<link rel=" | <link rel=" | ||
- | < | + | < |
rel=' | rel=' | ||
</ | </ | ||
Ligne 57: | Ligne 57: | ||
\\ | \\ | ||
+ | // | ||
=== 3. Mise en forme du menu === | === 3. Mise en forme du menu === | ||
<callout type=" | <callout type=" | ||
Ligne 63: | Ligne 64: | ||
< | < | ||
body { | body { | ||
- | font: 12px " | + | font-family: " |
+ | font-size: 12px; | ||
} | } | ||
</ | </ | ||
Ligne 130: | Ligne 132: | ||
</ | </ | ||
- | * **3.8 On éloigne 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 On fait 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 154: | Ligne 155: | ||
- | * **3.10 | + | * **3.10 |
Créer la règle 6 comme ci-dessous : | Créer la règle 6 comme ci-dessous : | ||
{{ : | {{ : | ||
Ligne 165: | Ligne 166: | ||
<callout type=" | <callout type=" | ||
- | * **3.11 | + | * **3.11 |
- | Modifier | + | Compléter |
{{ : | {{ : | ||
<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 : | ||
{{ : | {{ : |