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
Dernière révisionLes deux révisions suivantes
web:menucss [2021/06/15 08:50] – [3. Mettre le menu en forme] philweb:menucss [2024/04/02 07:21] – [3. Mise en forme du menu] 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 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='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>
 +\\
 +
 +//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>
  
  • web/menucss.txt
  • Dernière modification : 2024/04/02 07:23
  • de phil