CSS - Barre de navigation

Les bases de la barre de navigation

Une barre de navigation, ou navbar en abrégé, est un élément clé du design web qui aide les utilisateurs à naviguer sur un site internet. Elle contient généralement une liste de liens qui dirigent les utilisateurs vers différentes sections ou pages du site. Dans cette partie, vous apprendrez la structure de base d'une barre de navigation en HTML, comment la styliser avec CSS, et comment la positionner sur la page.

Pour créer une barre de navigation basique en HTML, utilisez l'élément <nav> pour envelopper une liste de liens. À l'intérieur de l'élément <nav>, utilisez une liste non ordonnée (<ul>) pour contenir les éléments de navigation. Chaque élément de la liste est représenté par un élément de liste (<li>) contenant un élément ancre (<a>) avec un attribut href pointant vers la page ou la section souhaitée.

<nav>
  <ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">À propos</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Une fois que vous avez la structure HTML de base en place, utilisez CSS pour styliser la barre de navigation. Vous pouvez appliquer des styles aux éléments <nav>, <ul>, <li>, et <a> pour changer son apparence. Par exemple, supprimez le style de liste par défaut en utilisant list-style: none;, ajoutez du padding et de la marge aux éléments de liste, et stylisez les liens avec des couleurs et des polices personnalisées.

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
}

Le positionnement de la barre de navigation sur votre page est important pour le design web. Utilisez CSS pour contrôler son placement. Par défaut, elle sera positionnée dans le flux normal du document. Cependant, vous pouvez utiliser des changements de la propriété position comme position: fixed; pour qu'elle reste en haut même lorsque les utilisateurs défilent.

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f5f5f5;
  padding: 10px;
}

En comprenant ces bases - structure, style et positionnement - vous pouvez créer une navigation fonctionnelle pour votre site web.

Création d'une barre de navigation horizontale

Une barre de navigation horizontale est un choix de conception courant pour les sites web, car elle offre un accès facile aux principales sections ou pages sur une seule ligne. Pour créer une barre de navigation horizontale, commencez par une liste non ordonnée (<ul>) à l'intérieur d'un élément <nav>. Chaque élément de liste (<li>) représentera un élément de navigation, contenant un élément ancre (<a>) avec un attribut href pointant vers la page ou la section correspondante.

Pour faire apparaître les éléments de liste horizontalement, utilisez la propriété CSS display: inline-block; sur les éléments <li>. Cela les fera s'aligner côte à côte, plutôt que verticalement. Ajoutez un peu de rembourrage aux éléments de liste pour créer de l'espace entre eux et utilisez la marge pour contrôler le positionnement global de la barre de navigation.

<nav>
  <ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">À propos</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  display: block;
  padding: 10px;
}

nav {
  background-color: #f5f5f5;
}

nav a {
  color: #333;
}

nav a:hover {
  background-color: #333;
}

Création d'une barre de navigation verticale

Une barre de navigation verticale empile les éléments de navigation verticalement. Cette conception est utile lorsque vous disposez d'un espace horizontal limité ou souhaitez créer une navigation latérale. Pour créer une barre de navigation verticale, commencez par une liste non ordonnée (<ul>) à l'intérieur d'un élément <nav>. Au lieu d'afficher les éléments de la liste comme des éléments inline-block, stylisez-les comme des éléments block.

<nav>
  <ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">À propos</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: block;
  margin-bottom: 10px;
}

nav a {
  display: block;
  padding: 10px;
}

nav {
  background-color: #f5f5f5;
  width: 200px;
}

nav a {
  color: #333;
  text-decoration: none;
}

nav a:hover {
  background-color: #333;
  color: #fff;
}

Barres de navigation réactives

Il est important de créer des barres de navigation réactives qui s'adaptent à différentes largeurs de fenêtre. Les barres de navigation réactives offrent une bonne expérience utilisateur en ajustant leur mise en page et leur fonctionnalité en fonction de l'espace d'écran disponible. Dans cette section, nous utiliserons des requêtes média pour créer des barres de navigation réactives, masquer et afficher la barre de navigation en fonction de la taille de l'écran, et créer un bouton de bascule pour les appareils mobiles.

Les requêtes média sont une fonctionnalité CSS qui permet d'appliquer différents styles en fonction des caractéristiques de l'appareil, comme la largeur de l'écran. Pour créer une barre de navigation réactive, vous pouvez utiliser des requêtes média pour modifier sa mise en page et son style à différents points de rupture. Vous pouvez avoir une barre de navigation horizontale sur les grands écrans et passer à une barre de navigation verticale ou masquée sur les petits écrans.

/* Styles pour les grands écrans */
nav {
  display: flex;
  justify-content: space-between;
  background-color: #f5f5f5;
  padding: 10px;
}

/* Styles pour les petits écrans */
@media (max-width: 600px) {
  nav {
    flex-direction: column;
  }

  nav ul {
    display: none;
  }
}

Dans l'exemple ci-dessus, la barre de navigation est affichée comme un conteneur flex avec de l'espace entre les éléments sur les grands écrans. Lorsque la largeur de l'écran est de 600 pixels ou moins, la barre de navigation passe à une mise en page verticale en utilisant flex-direction: column;, et les éléments de navigation sont masqués avec display: none;.

Pour permettre l'accès à la barre de navigation masquée sur les petits écrans, vous pouvez créer un bouton de bascule. Le bouton de bascule permet aux utilisateurs d'afficher ou de masquer la barre de navigation en cliquant dessus. Vous pouvez créer ce bouton en utilisant HTML et CSS et utiliser JavaScript pour la fonctionnalité de bascule.

<nav>
  <div class="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">À propos</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.hamburger {
  display: none;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #333;
  margin-bottom: 5px;
}

@media (max-width: 600px) {
  .hamburger {
    display: block;
  }
}

const hamburger = document.querySelector('.hamburger');
const navList = document.querySelector('nav ul');

hamburger.addEventListener('click', () => {
   navList.classList.toggle('show');
});