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/06/15 08:50] – [3. Mettre le menu en forme] phil | web:menucss [2024/04/02 07:23] (Version actuelle) – [2. Création de la structure du menu] phil | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | [[web: | ||
+ | |||
+ | ==== WEB - Conception d'un menu déroulant avec des règles CSS ==== | ||
+ | |||
+ | [Mise à jour le 1/4/2024] | ||
+ | |||
+ | * **Ressources** | ||
+ | * < | ||
+ | * CSS facile ! - < | ||
+ | |||
+ | ---- | ||
+ | |||
+ | === 1 Organisation du répertoire de travail === | ||
+ | * Créer un répertoire et l' | ||
+ | {{ : | ||
+ | |||
+ | === 2. Création de la structure du menu === | ||
+ | <callout type=" | ||
+ | |||
+ | {{ : | ||
+ | * Compléter le fichier // | ||
+ | |||
+ | <code html *.html> | ||
+ | < | ||
+ | < | ||
+ | |||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | <link rel=" | ||
+ | < | ||
+ | rel=' | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <nav> | ||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | <ul> | ||
+ | < | ||
+ | </ul> | ||
+ | </li> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </li> | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | \\ | ||
+ | |||
+ | // | ||
+ | === 3. Mise en forme du menu === | ||
+ | <callout type=" | ||
+ | |||
+ | * **3.1 Création d'une règle pour le corps de la page** | ||
+ | < | ||
+ | body { | ||
+ | font-family: | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * **3.2 Suppression du style par défaut des listes** | ||
+ | Créer la règle 1 comme ci-dessous : | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | /* Règle 1 */ | ||
+ | nav ul { | ||
+ | list-style: none; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * **3.3 Suppression du soulignement des liens** | ||
+ | Créer la règle 2 comme ci-dessous : | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | /* Règle 2 */ | ||
+ | nav ul li a { | ||
+ | text-decoration: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * **3.4 Suppression des marges par défaut** | ||
+ | Compléter la règle 1 avec les déclarations ci-dessous : | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | /* 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 : | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | /* 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 : | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | /* 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 : | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | /* Règle 4 */ | ||
+ | nav ul li { | ||
+ | background-color: | ||
+ | float: left; | ||
+ | line-height: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * **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 : | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | /* 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 : | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | /* Règle 5 */ | ||
+ | nav ul li:hover ul { | ||
+ | display: list-item ; | ||
+ | position: absolute; | ||
+ | } | ||
+ | </ | ||
+ | <callout type=" | ||
+ | |||
+ | |||
+ | * **3.10 Placement des items des sous-menus verticalement** | ||
+ | Créer la règle 6 comme ci-dessous : | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | /* Règle 6 */ | ||
+ | nav ul li:hover ul li { | ||
+ | float: none; | ||
+ | } | ||
+ | </ | ||
+ | <callout type=" | ||
+ | |||
+ | * **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 : | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | /* Règle 5 */ | ||
+ | nav ul li:hover ul { | ||
+ | margin-left: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * **3.12 Changement de la couleur du texte** | ||
+ | Compléter la règle 2 avec la déclaration de style ci-dessous : | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | 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 : | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | /* Règle 7 */ | ||
+ | li a:hover { | ||
+ | border-bottom: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * **3.14 On fait les finitions ** | ||
+ | Créer la règle 8. Modifier les règles 1, 2 et 5 comme ci-dessous : | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | /* Règle 8 */ | ||
+ | li { | ||
+ | padding: 5px; | ||
+ | } | ||
+ | |||
+ | /* Règle 1 */ | ||
+ | nav ul { | ||
+ | background-color: | ||
+ | list-style: none; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | /* Règle 2 */ | ||
+ | nav ul li a { | ||
+ | text-decoration: | ||
+ | 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: | ||
+ | } | ||
+ | </ | ||
+ | <callout type=" | ||