web:menucss [WEBGE Wikis]

web:menucss

[Mise à jour le 18/6/2023]

Ressources
- Introduction à la mise en page en CSS
- CSS facile ! - Propriétés CSS

1 Organisation du répertoire du projet

Créer un répertoire et l'organiser comme ci-dessous

2. Créer la strucure du menu

Compléter le fichier index.html comme ci-dessous.

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Menu déroulant</title>
    <link rel="stylesheet" type="text/css" href="styles/style.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>

3. Mettre le menu en forme

Les règles CSS sont placées dans la page style.css.

3.1 Créer une règle pour la page

body {
    font: 12px "Lato", sans-serif;
}

3.2 Supprimer le style par défaut des listes

Créer la règle 1 comme ci-dessous :

/* Règle 1 */
nav ul {
    list-style: none;
}

3.3 Supprimer le soulignement des liens

Créer la règle 2 comme ci-dessous :

/* Règle 2 */
nav ul li a {
    text-decoration: none;
}

3.4 Supprimer les marges par défaut

Modifier la règle 1 comme ci-dessous :

/* Règle 1 */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

3.5 Cacher les sous-menus

Créer la règle 3 comme ci-dessous :

/* Règle 3 */
nav ul li ul {
    display: none;
}

3.6 Aficher le premier niveau du menu « en ligne »

Créer la règle 4 comme ci-dessous :

/* Règle 4  */
nav ul li {
    float: left;
}

3.7 Régler la hauteur du menu de premier niveau et ajouter de la couleur

Modifier la règle 4 come ci-dessous :

/* Règle 4 */
nav ul li {
    background-color: #64abfb;
    float: left;
    line-height: 35px;
}

3.8 Éloigner les éléments du menu de premier niveau

Modifier la règle 2 comme ci-dessous :

/* Règle 2 */
nav ul li a {
    text-decoration: none;
    padding: 5px;
}

3.9 Faire apparaître les sous-menus au passage de la souris

Créer la règle 5 comme ci-dessous :

/* Règle 5 */
nav ul li:hover ul {
    display: list-item ;
    position: absolute;
}

Les déclarations display: list-item et position: absolute sur MDN Web Docs.

3.10 Placer les items des sous-menus verticalement

Créer la règle 6 comme ci-dessous :

/* Règle 6 */
nav ul li:hover ul li {
    float: none;
}

La propriété float sur MDN Web Docs

3.11 Décaler les sous-menus sur la gauche de npx

Modifier la règle 5 comme ci-dessous

/* Règle 5 */
nav ul li:hover ul {
    display: list-item;
    position: absolute;
    margin-left: -10px;
}

3.12 Changer la couleur du texte

Modifier la règle 2 comme ci-dessous :

nav ul li a {
    text-decoration: none;
    padding: 5px;
    color: #FFF;
}

3.13 Souligner le texte au passage de la souris

Créer la règle 7 comme ci-dessous :

/* Règle 7 */
li a:hover {
    border-bottom: 3px #FFF solid;
}

3.14 Faire les finitions

Créer la règle 8. Modifier les règles 1, 2 et 5 comme ci-dessous :

/* 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;
}

La propriété z-index sur MDN Web Docs.

web/menucss.txt
Dernière modification : 2023/06/18 18:24
de phil