Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:menucss [2021/06/15 08:50] – [3. Mettre le menu en forme] phil
+++ web:menucss [2021/08/11 11:24] – phil
@@ Ligne 1: / Ligne 1: @@
+[[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]]
+==== WEB - Conception d'un menu déroulant avec des règles CSS ====
+[Mise à jour le 15/6/2021]
+  * **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>
+<note>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</note>
+  * **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>
+<note><html>La propriété <a href="https://developer.mozilla.org/fr/docs/Web/CSS/float" target="_blank">float</a></html> sur MDN Web Docs</note>
+  * **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>
+<note>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.</note>