web:menucss

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
web:menucss [2021/08/11 11:23] – philweb:menucss [2024/04/02 07:23] (Version actuelle) – [2. Création de la structure du menu] phil
Ligne 1: Ligne 1:
 [[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]] [[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]]
  
-==== WEB - Conception d'un menu déroulant avec 8 règles CSS simples ====+==== WEB - Conception d'un menu déroulant avec des règles CSS ====
  
-[Mise à jour le 15/6/2021]+[Mise à jour le 1/4/2024]
  
   * **Ressources**   * **Ressources**
Ligne 11: Ligne 11:
 ---- ----
  
-=== 1 Organisation du répertoire du projet === +=== 1 Organisation du répertoire de travail === 
-Créer un répertoire et l'organiser comme ci-dessous+  * Créer un répertoire et l'organiser comme ci-dessous.
 {{ :web:repmenu.png?nolink |}} {{ :web:repmenu.png?nolink |}}
  
-=== 2. Créer la strucure du menu  ===+=== 2. Création de la structure du menu  === 
 +<callout type="info" icon="true">La **structure** du menu est créée dans le fichier //**menu.html**// à l'aide d'une **liste non ordonnée** . </callout> 
 {{ :web:structure.png?nolink&160|}} {{ :web:structure.png?nolink&160|}}
-Compléter le fichier index.html comme ci-dessous.+  * Compléter le fichier //**menu.html**// comme ci-dessous. 
 <code html *.html> <code html *.html>
 <!DOCTYPE html> <!DOCTYPE html>
Ligne 25: Ligne 28:
     <meta charset="utf-8">     <meta charset="utf-8">
     <title>Menu déroulant</title>     <title>Menu déroulant</title>
-    <link rel="stylesheet" type="text/css" href="styles/style.css" /> +    <link rel="stylesheet" type="text/css" href="styles/menu.css" /> 
-    <!--<link href='http://fonts.googleapis.com/css?family=Lato' +    <!--<link href='https://fonts.googleapis.com/css?family=Lato' 
     rel='stylesheet' type='text/css' />-->     rel='stylesheet' type='text/css' />-->
 </head> </head>
Ligne 52: Ligne 55:
 </html> </html>
 </code> </code>
 +\\
  
-=== 3. Mettre le menu en forme === +//Remarque// : le lien en commentaire montre comment utiliser une <html><a href="https://developers.google.com/fonts/docs/getting_started?hl=fr" target="_blank">police de caractères</a></html> Google. 
-Les règles CSS sont placées dans la page style.css.+=== 3. Mise en forme du menu === 
 +<callout type="warning" title="CSS" icon="true">Placer les règles CSS dans la page //**menu.css**//.</callout>
  
-  * **3.1 Créer une règle pour la page**+  * **3.1 Création d'une règle pour le corps de la page**
  <code css *.css>  <code css *.css>
 body { body {
-    font: 12px "Lato", sans-serif;+    font-family: "Lato", sans-serif; 
 +    font-size: 12px;
 } }
 </code>  </code> 
  
-  * **3.2 Supprimer le style par défaut des listes**+  * **3.2 Suppression du style par défaut des listes**
 Créer la règle 1 comme ci-dessous :  Créer la règle 1 comme ci-dessous : 
 {{ :web:structure2.png?nolink&160|}} {{ :web:structure2.png?nolink&160|}}
Ligne 73: Ligne 79:
 </code> </code>
  
-  * **3.3 Supprimer le soulignement des liens**+  * **3.3 Suppression du soulignement des liens**
 Créer la règle 2 comme ci-dessous :  Créer la règle 2 comme ci-dessous : 
 {{ :web:structure3.png?nolink&160|}} {{ :web:structure3.png?nolink&160|}}
Ligne 83: Ligne 89:
 </code> </code>
  
-  * **3.4 Supprimer les marges par défaut** +  * **3.4 Suppression des marges par défaut** 
-Modifier la règle 1 comme ci-dessous : +Compléter la règle 1 avec les déclarations ci-dessous : 
 {{ :web:structure4.png?nolink&100|}} {{ :web:structure4.png?nolink&100|}}
 <code css *.css> <code css *.css>
 /* Règle 1 */ /* Règle 1 */
 nav ul { nav ul {
-    list-style: none; 
     padding: 0;     padding: 0;
     margin: 0;     margin: 0;
Ligne 95: Ligne 100:
 </code> </code>
  
-  * **3.5 Cacher les sous-menus**+  * **3.5 Les sous-menus sont masqués**
 Créer la règle 3 comme ci-dessous :  Créer la règle 3 comme ci-dessous : 
 {{ :web:structure5.png?nolink&60|}} {{ :web:structure5.png?nolink&60|}}
Ligne 105: Ligne 110:
 </code> </code>
  
-  * **3.6 Aficher le premier niveau du menu « en ligne »**+  * **3.6 Afichage du premier niveau du menu « en ligne »**
 Créer la règle 4 comme ci-dessous :  Créer la règle 4 comme ci-dessous : 
 {{ :web:structure6.png?nolink&200|}} {{ :web:structure6.png?nolink&200|}}
Ligne 115: Ligne 120:
 </code> </code>
  
-  * **3.7 Régler la hauteur du menu de premier niveau et ajouter de la couleur ** +  * **3.7 Réglage de la hauteur du menu de premier niveau et ajout de la couleur ** 
-Modifier la règle 4 come ci-dessous : +Compléter la règle 4 avec les déclarations ci-dessous : 
 {{ :web:structure7.png?nolink&200|}} {{ :web:structure7.png?nolink&200|}}
 <code css *.css> <code css *.css>
Ligne 127: Ligne 132:
 </code> </code>
  
-  * **3.8 Éloigner les éléments du menu de premier niveau** +  * **3.8 Les éléments du menu de premier niveau sont éloignés** 
-Modifier la règle 2 comme ci-dessous :+Compléter la règle 2 avec la déclaration de style ci-dessous :
 {{ :web:structure8.png?nolink&200|}} {{ :web:structure8.png?nolink&200|}}
 <code css *.css> <code css *.css>
 /* Règle 2 */ /* Règle 2 */
 nav ul li a { nav ul li a {
-    text-decoration: none; 
     padding: 5px;     padding: 5px;
 } }
 </code> </code>
  
-  * **3.9 Faire 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 :
 {{ :web:structure9.png?nolink|}} {{ :web:structure9.png?nolink|}}
Ligne 148: Ligne 152:
 } }
 </code> </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>
  
-<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**+  * **3.10 Placement des items des sous-menus verticalement**
 Créer la règle 6 comme ci-dessous : Créer la règle 6 comme ci-dessous :
 {{ :web:structure10.png?nolink&220|}} {{ :web:structure10.png?nolink&220|}}
Ligne 160: Ligne 164:
 } }
 </code> </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>
  
-<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écalage des sous-menus sur la gauche de n pixel** 
- +Compléter la règle 5 avec la déclaration de style ci-dessous :
-  * **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|}} {{ :web:structure11.png?nolink&220|}}
 <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: -10px;     margin-left: -10px;
 } }
 </code> </code>
  
-  * **3.12 Changer la couleur du texte** +  * **3.12 Changement de la couleur du texte** 
-Modifier la règle 2 comme ci-dessous :+Compléter la règle 2 avec la déclaration de style ci-dessous :
 {{ :web:structure12.png?nolink&220|}} {{ :web:structure12.png?nolink&220|}}
 <code css *.css> <code css *.css>
 nav ul li a { nav ul li a {
-    text-decoration: none; 
-    padding: 5px; 
     color: #FFF;     color: #FFF;
 } }
 </code> </code>
  
-  * **3.13 Souligner le texte au passage de la souris **+  * **3.13 Le texte est souligné au passage de la souris **
 Créer la règle 7 comme ci-dessous : Créer la règle 7 comme ci-dessous :
 {{ :web:structure13.png?nolink&220|}} {{ :web:structure13.png?nolink&220|}}
Ligne 196: Ligne 195:
 </code> </code>
  
-  * **3.14 Faire les finitions **+  * **3.14 On fait les finitions **
 Créer la règle 8. Modifier les règles 1, 2 et 5 comme ci-dessous : Créer la règle 8. Modifier les règles 1, 2 et 5 comme ci-dessous :
 {{ :web:structure14.png?nolink&220|}} {{ :web:structure14.png?nolink&220|}}
Ligne 229: Ligne 228:
 } }
 </code> </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>
  
-<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> 
  • web/menucss.1628673832.txt.gz
  • Dernière modification : 2021/08/11 11:23
  • de phil