Créer Navbar Simple avec HTML & CSS

Apprenons étape par étape comment créer une barre de navigation qui fonctionne bien sur les grands écrans (ordinateur) et les petits écrans (mobile). Même si vous êtes débutant, vous comprendrez !

Un navbar est une barre de menu que l'on trouve sur presque tous les sites web. Elle permet d'accéder rapidement aux différentes parties du site, telles que :

Accueil
À propos
Services
Contact

À la fin de ce tutoriel, votre menu pourra :

S'afficher en ligne sur un grand écran.
Se transformer en un bouton menu (burger) sur un petit écran.

🛠️ Étape 1 : Écrire le HTML (le squelette)

Le HTML construit la structure de votre menu. Copiez ce code dans votre fichier HTML.

Code HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Simple</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Menu de navigation -->
  <nav class="navbar">
    <!-- Nom ou logo -->
    <div class="logo">MonSite</div>

    <!-- Liens du menu -->
    <ul class="nav-links">
      <li><a href="#accueil">Accueil</a></li>
      <li><a href="#apropos">À propos</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>

    <!-- Menu burger pour les petits écrans -->
    <div class="burger">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </nav>
</body>
</html>

📝 Explications

<nav> : Cette balise est la "maison" de tout votre menu. Tout ce qui concerne le navbar se trouve à l’intérieur.
<div class="logo"> : Ici, vous mettez soit le nom de votre site (par exemple : "MonSite"), soit un logo.
<ul class="nav-links"> : Une liste des liens du menu. Chaque lien est un <li> (élément de liste).
<div class="burger"> : Un bouton spécial qui apparaîtra sur mobile. Les trois <span> représentent les trois lignes du menu burger.

🎨 Étape 2 : Ajouter le CSS (le style)

Passons maintenant à la partie amusante : rendre notre menu joli !

Code CSS :

Collez ce code dans un fichier nommé styles.css.

/* Général : On règle les bases */
body {
  margin: 0; /* Enlève les marges par défaut */
  font-family: Arial, sans-serif; /* Choix d’une police simple */
}

/* La navbar */
.navbar {
  display: flex; /* Place les éléments en ligne */
  justify-content: space-between; /* Sépare le logo des liens */
  align-items: center; /* Aligne les éléments verticalement */
  background-color: #333; /* Couleur de fond : noir/gris */
  padding: 1rem; /* Ajoute de l’espace autour */
  color: white; /* Texte blanc */
}

/* Logo */
.logo {
  font-size: 1.5rem; /* Texte plus grand */
  font-weight: bold; /* Texte en gras */
}

/* Liens du menu */
.nav-links {
  display: flex; /* Place les liens en ligne */
  list-style: none; /* Supprime les puces */
}

.nav-links li {
  margin-left: 20px; /* Ajoute de l’espace entre chaque lien */
}

.nav-links a {
  text-decoration: none; /* Supprime le soulignement des liens */
  color: white; /* Couleur du texte : blanc */
  transition: color 0.3s; /* Animation douce pour le changement de couleur */
}

.nav-links a:hover {
  color: #4CAF50; /* Change la couleur en vert au survol */
}

/* Menu burger */
.burger {
  display: none; /* Cache le burger par défaut */
  flex-direction: column; /* Arrange les lignes verticalement */
  cursor: pointer; /* Change le curseur en "main" au survol */
}

.burger span {
  width: 25px; /* Largeur des lignes */
  height: 3px; /* Épaisseur des lignes */
  background: white; /* Couleur des lignes */
  margin: 4px; /* Espace entre les lignes */
}

/* Style pour les petits écrans */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* Cache les liens par défaut */
    flex-direction: column; /* Arrange les liens verticalement */
    background-color: #333; /* Fond noir/gris */
    position: absolute; /* Position flottante */
    top: 60px; /* Sous la navbar */
    right: 0; /* Collé à droite */
    width: 200px; /* Largeur du menu */
    padding: 1rem; /* Espace intérieur */
  }

  .nav-links.active {
    display: flex; /* Affiche les liens quand activé */
  }

  .burger {
    display: flex; /* Affiche le menu burger */
  }
}

📝 Explications du CSS

Couleurs et marges :
- background-color: #333; : Couleur noire/grise pour le fond de la navbar.
- color: white; : Texte blanc pour la visibilité.
Alignement avec Flexbox :
- display: flex; : Organise les éléments en ligne (logo, liens, burger).
- justify-content: space-between; : Le logo est à gauche, les liens à droite.
Effet au survol des liens :
- a:hover { color: #4CAF50; } : Change la couleur des liens en vert au survol.
Menu burger :
- display: none; : Cache le menu burger sur les grands écrans.
- display: flex; : Affiche le menu burger sur mobile grâce à @media.
Responsive Design :
- @media (max-width: 768px) : Ces styles s’appliquent seulement sur les écrans plus petits que 768px.

🎯 Qu’est-ce qu’il se passe ?

Sur un ordinateur : Les liens s’affichent en ligne.
Sur un mobile : Un bouton menu burger apparaît.

Challenge !

👉 Ajoutez du JavaScript pour que le menu burger fonctionne ! Vous êtes prêts à essayer ? 😊

Comment créer un menu de navigation (Navbar) simple avec HTML et CSS

✨ Comment créer un menu de navigation (Navbar) simple avec HTML et CSS

💡 Qu'est-ce qu'un Navbar ?