Afficher la pageAnciennes révisionsLiens de retourExporter en PDFHaut de page Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur. [[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]] ==== WEB - Conception d'un menu déroulant avec des règles CSS ==== [Mise à jour le 18/6/2023] * **Ressources** * <html><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/CSS_layout/Introduction" target="_blank">Introduction à la mise en page en CSS</a></html> * CSS facile ! - <html><a href="http://www.css-faciles.com/" target="_blank">Propriétés CSS</a></html> ---- === 1 Organisation du répertoire du projet === Créer un répertoire et l'organiser comme ci-dessous {{ :web:repmenu.png?nolink |}} === 2. Créer la strucure du menu === {{ :web:structure.png?nolink&160|}} Compléter le fichier index.html comme ci-dessous. <code html *.html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Menu déroulant</title> <link rel="stylesheet" type="text/css" href="styles/style.css" /> <!--<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css' />--> </head> <body> <nav> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a> <ul> <li><a href="#">sous-menu 2.1</a></li> </ul> </li> <li><a href="#">menu3</a> <ul> <li><a href="#">sous-menu 3.1</a></li> <li><a href="#">sous-menu 3.2</a></li> </ul> </li> <li><a href="#">menu4</a></li> </ul> </nav> </body> </html> </code> === 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** <code css *.css> body { font: 12px "Lato", sans-serif; } </code> * **3.2 Supprimer le style par défaut des listes** Créer la règle 1 comme ci-dessous : {{ :web:structure2.png?nolink&160|}} <code css *.css> /* Règle 1 */ nav ul { list-style: none; } </code> * **3.3 Supprimer le soulignement des liens** Créer la règle 2 comme ci-dessous : {{ :web:structure3.png?nolink&160|}} <code css *.css> /* Règle 2 */ nav ul li a { text-decoration: none; } </code> * **3.4 Supprimer les marges par défaut** Modifier la règle 1 comme ci-dessous : {{ :web:structure4.png?nolink&100|}} <code css *.css> /* Règle 1 */ nav ul { list-style: none; padding: 0; margin: 0; } </code> * **3.5 Cacher les sous-menus** Créer la règle 3 comme ci-dessous : {{ :web:structure5.png?nolink&60|}} <code css *.css> /* Règle 3 */ nav ul li ul { display: none; } </code> * **3.6 Aficher le premier niveau du menu « en ligne »** Créer la règle 4 comme ci-dessous : {{ :web:structure6.png?nolink&200|}} <code css *.css> /* Règle 4 */ nav ul li { float: left; } </code> * **3.7 Régler la hauteur du menu de premier niveau et ajouter de la couleur ** Modifier la règle 4 come ci-dessous : {{ :web:structure7.png?nolink&200|}} <code css *.css> /* Règle 4 */ nav ul li { background-color: #64abfb; float: left; line-height: 35px; } </code> * **3.8 Éloigner les éléments du menu de premier niveau** Modifier la règle 2 comme ci-dessous : {{ :web:structure8.png?nolink&200|}} <code css *.css> /* Règle 2 */ nav ul li a { text-decoration: none; padding: 5px; } </code> * **3.9 Faire apparaître les sous-menus au passage de la souris** Créer la règle 5 comme ci-dessous : {{ :web:structure9.png?nolink|}} <code css *.css> /* Règle 5 */ nav ul li:hover ul { display: list-item ; position: absolute; } </code> <callout type="info" icon="true">Les déclarations <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS/display-listitem" target="_blank">display: list-item</a></html> et <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS/position" target="_blank">position: absolute</a></html> sur MDN Web Docs.</callout> * **3.10 Placer les items des sous-menus verticalement** Créer la règle 6 comme ci-dessous : {{ :web:structure10.png?nolink&220|}} <code css *.css> /* Règle 6 */ nav ul li:hover ul li { float: none; } </code> <callout type="info" icon="true"><html>La propriété <a href="https://developer.mozilla.org/fr/docs/Web/CSS/float" target="_blank">float</a></html> sur MDN Web Docs</callout> * **3.11 Décaler les sous-menus sur la gauche de npx** Modifier la règle 5 comme ci-dessous {{ :web:structure11.png?nolink&220|}} <code css *.css> /* Règle 5 */ nav ul li:hover ul { display: list-item; position: absolute; margin-left: -10px; } </code> * **3.12 Changer la couleur du texte** Modifier la règle 2 comme ci-dessous : {{ :web:structure12.png?nolink&220|}} <code css *.css> nav ul li a { text-decoration: none; padding: 5px; color: #FFF; } </code> * **3.13 Souligner le texte au passage de la souris ** Créer la règle 7 comme ci-dessous : {{ :web:structure13.png?nolink&220|}} <code css *.css> /* Règle 7 */ li a:hover { border-bottom: 3px #FFF solid; } </code> * **3.14 Faire les finitions ** Créer la règle 8. Modifier les règles 1, 2 et 5 comme ci-dessous : {{ :web:structure14.png?nolink&220|}} <code css *.css> /* 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; } </code> <callout type="info" icon="true">La propriété <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS/z-index" target="_blank">z-index </a></html>sur MDN Web Docs.</callout> web/menucss.txt Dernière modification : 2023/06/18 18:24de phil