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 Prochaine révisionLes deux révisions suivantes | ||
web:menucss [2021/06/15 08:50] – [3. Mettre le menu en forme] phil | web:menucss [2021/08/11 11:23] – phil | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | [[web: | ||
+ | ==== WEB - Conception d'un menu déroulant avec 8 règles CSS simples ==== | ||
+ | |||
+ | [Mise à jour le 15/6/2021] | ||
+ | |||
+ | * **Ressources** | ||
+ | * < | ||
+ | * CSS facile ! - < | ||
+ | |||
+ | ---- | ||
+ | |||
+ | === 1 Organisation du répertoire du projet === | ||
+ | Créer un répertoire et l' | ||
+ | {{ : | ||
+ | |||
+ | === 2. Créer la strucure du menu === | ||
+ | {{ : | ||
+ | Compléter le fichier index.html comme ci-dessous. | ||
+ | <code html *.html> | ||
+ | < | ||
+ | < | ||
+ | |||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | <link rel=" | ||
+ | < | ||
+ | rel=' | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <nav> | ||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | <ul> | ||
+ | < | ||
+ | </ul> | ||
+ | </li> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </li> | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | === 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** | ||
+ | < | ||
+ | body { | ||
+ | font: 12px " | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * **3.2 Supprimer le 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 Supprimer le 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 Supprimer les marges par défaut** | ||
+ | Modifier la règle 1 comme ci-dessous : | ||
+ | {{ : | ||
+ | <code css *.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 : | ||
+ | {{ : | ||
+ | <code css *.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 : | ||
+ | {{ : | ||
+ | <code css *.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 : | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | /* Règle 4 */ | ||
+ | nav ul li { | ||
+ | background-color: | ||
+ | float: left; | ||
+ | line-height: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * **3.8 Éloigner les éléments du menu de premier niveau** | ||
+ | Modifier la règle 2 comme ci-dessous : | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | /* Règle 2 */ | ||
+ | nav ul li a { | ||
+ | text-decoration: | ||
+ | padding: 5px; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * **3.9 Faire apparaître les 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; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | * **3.10 Placer les 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; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | * **3.11 Décaler les sous-menus sur la gauche de npx** | ||
+ | Modifier la règle 5 comme ci-dessous | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | /* Règle 5 */ | ||
+ | nav ul li:hover ul { | ||
+ | display: list-item; | ||
+ | position: absolute; | ||
+ | margin-left: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * **3.12 Changer la couleur du texte** | ||
+ | Modifier la règle 2 comme ci-dessous : | ||
+ | {{ : | ||
+ | <code css *.css> | ||
+ | nav ul li a { | ||
+ | text-decoration: | ||
+ | padding: 5px; | ||
+ | color: #FFF; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * **3.13 Souligner le texte 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 Faire 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: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | < |