CSS - Barre de navigation : Votre passerelle vers la navigation sur le site

Salut à toi, futurs développeurs web ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde des barres de navigation CSS. En tant que votre enseignant de quartier bienveillant, je suis là pour vous guider à travers cet aspect essentiel du design web. Alors, prenez votre boisson favorite, installez-vous confortablement, et plongeon dans !

CSS - Navbar

Qu'est-ce qu'une barre de navigation ?

Avant de commencer à coder, comprenons ce qu'est une barre de navigation. Imaginez que vous êtes dans une énorme bibliothèque. Comment trouvez-vous le livre que vous souhaitez ? Vous utilisez des pancartes et des répertoires, non ? Eh bien, une barre de navigation est pareille pour les sites web. C'est un ensemble de liens qui aide les utilisateurs à se déplacer facilement sur votre site.

Maintenant, regardons les différents types de barres de navigation et comment les créer en utilisant CSS.

Barre de navigation horizontale CSS

Une barre de navigation horizontale est probablement le type le plus commun que vous verrez sur les sites web. C'est comme une rangée de boutons en haut de la page.

Voici un exemple simple :

<ul class="navbar">
<li><a href="#home">Accueil</a></li>
<li><a href="#about">À propos</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

Et voici le CSS pour le rendre joli :

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover {
background-color: #111;
}

Reprenons cela :

Nous enlevons les puces de la liste avec list-style-type: none;
Nous flottons les éléments de la liste à gauche pour les rendre horizontaux
Nous stylisons les liens pour qu'ils ressemblent à des boutons
Nous ajoutons un effet au survol pour le rendre interactif

Barre de navigation verticale CSS

Parfois, vous pourriez vouloir que votre barre de navigation soit verticale, surtout sur les appareils mobiles ou les barres latérales. Voici comment vous pouvez le faire :

<ul class="vertical-navbar">
<li><a href="#home">Accueil</a></li>
<li><a href="#news">Actualités</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">À propos</a></li>
</ul>

Et le CSS :

.vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

.vertical-navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

.vertical-navbar li a:hover {
background-color: #555;
color: white;
}

La principale différence ici est que nous ne flottons pas les éléments de la liste. Au lieu de cela, nous définissons une largeur pour la barre de navigation entière et laissons les éléments de la liste s'empiler naturellement.

Barre de navigation avec menu déroulant CSS

Maintenant, ajoutons un peu de peps avec un menu déroulant ! C'est génial pour organiser les sous-catégories.

<ul class="navbar">
<li><a href="#home">Accueil</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Produits</a>
<div class="dropdown-content">
<a href="#">Ordinateurs portables</a>
<a href="#">Tablettes</a>
<a href="#">Téléphones intelligents</a>
</div>
</li>
<li><a href="#contact">Contact</a></li>
</ul>

Et le CSS :

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}

Ce CSS utilise la pseudo-classe :hover pour afficher le contenu du menu déroulant lorsque l'utilisateur passe la souris sur le lien "Produits".

Barre de navigation fixe CSS

Une barre de navigation fixe reste en place même lorsque vous faites défiler. C'est comme avoir un guide personnel qui est toujours là lorsque vous en avez besoin.

Pour rendre une barre de navigation fixe, nous avons besoin d'ajouter une ligne à notre CSS :

.navbar {
/* ... autres styles ... */
position: fixed;
top: 0;
width: 100%;
}

Cela garde la barre de navigation en haut de l'écran à tout moment.

Barre de navigation collante CSS

Une barre de navigation collante est similaire à une barre de navigation fixe, mais elle ne devient fixe que lorsque vous avez défilé au-delà d'elle. C'est comme un ami qui vous suit, mais seulement après que vous avez marché un certain distance.

Voici comment faire une barre de navigation collante :

.navbar {
/* ... autres styles ... */
position: sticky;
top: 0;
}

La différence est que nous utilisons position: sticky au lieu de position: fixed.

Lignes de séparation pour la barre de navigation

Parfois, vous souhaitez séparer vos éléments de barre de navigation avec des lignes. Voici un joli truc pour le faire :

.navbar li {
border-right: 1px solid #bbb;
}

.navbar li:last-child {
border-right: none;
}

Cela ajoute une ligne entre chaque élément, sauf pour le dernier.

Barre de navigation verticale fixe

Enfin, combinons ce que nous avons appris pour créer une barre de navigation verticale fixe :

<ul class="fixed-vertical-navbar">
<li><a href="#home">Accueil</a></li>
<li><a href="#news">Actualités</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">À propos</a></li>
</ul>

Et le CSS :

.fixed-vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}

.fixed-vertical-navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

.fixed-vertical-navbar li a:hover {
background-color: #555;
color: white;
}

Cela crée une barre de navigation verticale qui reste sur le côté gauche de l'écran lorsque vous défilez.

Conclusion

Et voilà, les amis ! Nous avons couvert une variété de styles de barres de navigation, allant de l'horizontal à la verticale, en passant par le menu déroulant et le fixe. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces styles et de créer vos propres designs de barres de navigation uniques.

Voici un tableau résumant les différents types de barres de navigation que nous avons couverts :

Type de barre de navigation	Propriété CSS clé	Caractéristique principale
Horizontale	`float: left;`	Éléments alignés horizontalement
Verticale	`width: [valeur];`	Éléments empilés verticalement
Menu déroulant	`:hover`	Affiche des options supplémentaires au survol
Fixe	`position: fixed;`	Reste en place lors du défilement
Collante	`position: sticky;`	Devient fixe après le défilement

Souvenez-vous, coder c'est comme cuisiner - vous commencez avec des recettes de base, mais à mesure que vous vous sentez plus à l'aise, vous pouvez commencer à ajouter vos propres saveurs. Alors, mélangez et assortissez ces styles, et créez quelque chose de délicieux... je veux dire, visuellement attrayant !

Bonne programmation, et que vos barres de navigation vous conduisent toujours vers des destinations passionnantes !

Credits: Image by storyset