Table des matières

Sommaire Web

WEB - Conception d'un menu simple avec des règles CSS

[Mise à jour le 1/4/2024]


1 Organisation du répertoire de travail

2. Création de la structure du menu

La structure du menu est créée dans le fichier menu.html à l'aide d'une liste non ordonnée .

*.html
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>Menu simple</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="#">page1</a></li>
      <li><a href="#">page2</a></li>
      <li><a href="#">page3</a></li>
      <li><a href="#">page4</a></li>
    </ul>
  </nav>
</body>
 
</html>


Remarque : le lien en commentaire montre comment utiliser une police de caractères Google.

3. Mise en forme du menu

CSS

Les règles CSS sont déclarées dans la page menu.css.
*.css
body {
    font-family: "Lato", sans-serif;
    font-size: 12px;
}

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

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

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

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

Compléter la règle 1 avec les déclarations ci-dessous :

*.css
/* Règle 1 */
nav ul {
    padding: 0;
    margin: 0;
}

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

*.css
/* Règle 3  */
nav ul li {
    float: left;
}

Compléter la règle 3 avec les déclarations ci-dessous :

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

Compléter la règle 2 avec la déclaration de style ci-dessous :

*.css
/* Règle 2 */
nav ul li a {
    margin-left: 20px;
    margin-left: 20px;
}