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 10:17] – phil | web:menucss [2024/04/02 07:23] (Version actuelle) – [2. Création de la structure du menu] phil |
---|
{{ :suivant.png?nolink&30|}} {{ :retour.png?nolink&30|}} [[web:accueilweb|{{ :iconemaison.jpg?nolink&30|Sommaire Web}}]] | [[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire 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** |
* <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> | * <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> | * 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 | ---- |
| |
| === 1 Organisation du répertoire de travail === |
| * 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> |
<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> |
</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|}} |
</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|}} |
</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; |
</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|}} |
</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|}} |
</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> |
</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|}} |
} | } |
</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|}} |
} | } |
</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|}} |
</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|}} |
} | } |
</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> | |