web:menucss [WEBGE Wikis]

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 1/4/2024]

  * **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 de travail ===
  * Créer un répertoire et l'organiser comme ci-dessous.
{{ :web:repmenu.png?nolink |}}

=== 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|}}
  * Compléter le fichier //**menu.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/menu.css" />
    <!--<link href='https://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>
\\

//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.
=== 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éation d'une règle pour le corps de la page**
 <code css *.css>
body {
    font-family: "Lato", sans-serif;
    font-size: 12px;
}
</code> 

  * **3.2 Suppression du 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 Suppression du 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 Suppression des marges par défaut**
Compléter la règle 1 avec les déclarations ci-dessous : 
{{ :web:structure4.png?nolink&100|}}
<code css *.css>
/* Règle 1 */
nav ul {
    padding: 0;
    margin: 0;
}
</code>

  * **3.5 Les sous-menus sont masqués**
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 Afichage du 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é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 : 
{{ :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 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 :
{{ :web:structure8.png?nolink&200|}}
<code css *.css>
/* Règle 2 */
nav ul li a {
    padding: 5px;
}
</code>

  * **3.9 Apparition des 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 Placement des 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écalage des sous-menus sur la gauche de n pixel**
Compléter la règle 5 avec la déclaration de style ci-dessous :
{{ :web:structure11.png?nolink&220|}}
<code css *.css>
/* Règle 5 */
nav ul li:hover ul {
    margin-left: -10px;
}
</code>

  * **3.12 Changement de la couleur du texte**
Compléter la règle 2 avec la déclaration de style ci-dessous :
{{ :web:structure12.png?nolink&220|}}
<code css *.css>
nav ul li a {
    color: #FFF;
}
</code>

  * **3.13 Le texte est souligné 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 On fait 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>