Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente Prochaine révisionLes deux révisions suivantes |
web:menucss [2021/08/11 11:22] – phil | web:menucss [2023/06/18 18:24] – phil |
---|
[[web:accueilweb|{{ :iconemaison.jpg?nolink&25|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 18/6/2023] |
| |
* **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 ==== | |
| ---- |
| |
| === 1 Organisation du répertoire du projet === |
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éer la strucure du menu === |
{{ :web:structure.png?nolink&160|}} | {{ :web:structure.png?nolink&160|}} |
Compléter le fichier index.html comme ci-dessous. | Compléter le fichier index.html comme ci-dessous. |
</code> | </code> |
| |
==== 3. Mettre le menu en forme ==== | === 3. Mettre le menu en forme === |
Les règles CSS sont placées dans la page style.css. | Les règles CSS sont placées dans la page style.css. |
| |
} | } |
</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 Placer les items des sous-menus verticalement** |
} | } |
</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écaler les sous-menus sur la gauche de npx** | * **3.11 Décaler les sous-menus sur la gauche de npx** |
} | } |
</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> | |