Comment créer une barre de navigation réactive en utilisant HTML et CSS

Hibou Gourou

Construire une barre de navigation réactive est un élément essentiel pour améliorer votre expérience utilisateur et vos compétences en conception Web. Dans cet article, nous allons vous montrer comment créer une barre de navigation réactive en utilisant uniquement du HTML et du CSS (pas même une seule ligne de JavaScript !).

Donc, si vous êtes un débutant qui apprend le développement front-end et que vous cherchez à créer une barre de navigation, vous êtes au bon endroit. Mais, avant de plonger plus profondément, commençons par comprendre les principes de conception de base d'une barre de navigation réactive.

Prérequis : les trois éléments clés d'une barre de navigation

Il est assez évident que la plupart des propriétaires de sites Web souhaitent acquérir de nouveaux visiteurs. La première étape pour y parvenir est de montrer aux visiteurs un chemin clair et concis. Vous êtes censé créer une barre de navigation qui inspire la curiosité et attire les visiteurs simultanément. Vous devriez avoir trois éléments clés lors de la conception d'une barre de navigation idéale :

Simple

Il doit être clair et facile à lire. Au lieu d'encombrer la barre de navigation avec des liens vers chaque page, vous devriez opter pour les catégories plus larges de votre site. Par la suite, vous pouvez ajouter des sous-menus sous forme de liste déroulante si nécessaire.

Perceptible

Une simple barre de navigation ne devrait pas être ennuyeuse du tout. Vous devez vous en tenir à une couleur de marque prédéterminée pour rendre le design plus cohérent. Vous pouvez expérimenter avec de nombreux schémas de couleurs et utiliser des nuances plus claires ou plus foncées pour la mise en évidence et les menus déroulants.

Sensible

Un rapport mondial sur l'utilisation d'Internet par Statista montre que 59,5% de la population mondiale utilise activement Internet et 92,6% l'utilisent via des appareils mobiles. C'est plus que suffisant pour comprendre l'importance de mettre en œuvre une navigation mobile responsive sur votre site.

La navigation mobile de haut niveau est très populaire. Vous pouvez utiliser un menu hamburger, une guillotine, des icônes flottantes et des onglets. C'est un sauveur lorsque vous avez cinq catégories ou plus avec plusieurs hiérarchies. La navigation de haut niveau peut économiser beaucoup d'espace sur l'écran, en particulier lorsque vous avez un site riche en contenu.

Les barres d'onglets avec des icônes pertinentes conviennent parfaitement à la barre de navigation inférieure car elles contiennent généralement de trois à cinq menus au même niveau de hiérarchie. Les sous-menus et les menus séquentiels suivent la catégorie principale avec la relation parent-enfant.

Construire une barre de navigation réactive avec le menu Hamburger

Maintenant que les principes de conception sont parfaitement clairs dans votre esprit, commençons à créer le menu. Nous allons créer une barre de navigation réactive en utilisant CSS Flexbox et Media Queries à partir de zéro.

Alors, à quoi ressemblera notre barre de navigation ? Il aura une navigation de haut niveau avec :

  • Logo
  • Menus de navigation
  • Menu déroulant
  • Menu Hamburger (en utilisant le hack de la case à cocher)

Premiers pas avec HTML

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link rel="stylesheet" href="style.css" />
 <title>Document</title>
 </head>
 <body>
 <nav class="navbar">
 <!-- LOGO -->
 <div class="logo">MUO</div>
 <!-- NAVIGATION MENU -->
 <ul class="nav-links">
 <!-- USING CHECKBOX HACK -->
 <input type="checkbox" id="checkbox_toggle" />
 <label for="checkbox_toggle" class="hamburger">&#9776;</label>
 <!-- NAVIGATION MENUS -->
 <div class="menu">
 <li><a href="/">Home</a></li>
 <li><a href="/">About</a></li>
 <li class="services">
 <a href="/">Services</a>
 <!-- DROPDOWN MENU -->
 <ul class="dropdown">
 <li><a href="/">Dropdown 1 </a></li>
 <li><a href="/">Dropdown 2</a></li>
 <li><a href="/">Dropdown 2</a></li>
 <li><a href="/">Dropdown 3</a></li>
 <li><a href="/">Dropdown 4</a></li>
 </ul>
 </li>
 <li><a href="/">Pricing</a></li>
 <li><a href="/">Contact</a></li>
 </div>
 </ul>
 </nav>
 </body>
 </html>

Nous aurons le menu déroulant dans le menu Service (principal). Nous pouvons ignorer le menu hamburger lors de la création de la barre de navigation du bureau. Après tout, nous n'avons pas encore discuté du workflow des cases à cocher.

Sortie :

Application CSS de base : utilitaires

 /* UTILITIES */
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 body {
 font-family: cursive;
 }
 a {
 text-decoration: none;
 }
 li {
 list-style: none;
 }

Allons de l'avant, stylisons notre barre de navigation.

Styliser la barre de navigation à l'aide de CSS Flexbox

Nous utiliserons CSS Flexbox et appliquerons des effets de survol pour la mise en évidence. Le menu Service a besoin d'un peu plus d'attention car vous devez régler l' affichage : aucun ; pour des conditions normales et réglez-le pour afficher : bloquer ; quand quelqu'un passe dessus.

 /* NAVBAR STYLING STARTS */
 .navbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px;
 background-color: teal;
 color: #fff;
 }
 .nav-links a {
 color: #fff;
 }
 /* LOGO */
 .logo {
 font-size: 32px;
 }
 /* NAVBAR MENU */
 .menu {
 display: flex;
 gap: 1em;
 font-size: 18px;
 }
 .menu li:hover {
 background-color: #4c9e9e;
 border-radius: 5px;
 transition: 0.3s ease;
 }
 .menu li {
 padding: 5px 14px;
 }
 /* DROPDOWN MENU */
 .services {
 position: relative;
 }
 .dropdown {
 background-color: rgb(1, 139, 139);
 padding: 1em 0;
 position: absolute; /*WITH RESPECT TO PARENT*/
 display: none;
 border-radius: 8px;
 top: 35px;
 }
 .dropdown li + li {
 margin-top: 10px;
 }
 .dropdown li {
 padding: 0.5em 1em;
 width: 8em;
 text-align: center;
 }
 .dropdown li:hover {
 background-color: #4c9e9e;
 }
 .services:hover .dropdown {
 display: block;
 }

Sortie :

Barre de navigation réactive à l'aide de requêtes multimédia CSS

Comme indiqué, nous aurons un menu de hamburgers qui n'apparaîtra que sur les appareils mobiles dotés d'un écran de petite taille. Pour cela, nous aurons deux enfants de <ul class="nav-links"> . Tout d'abord, nous allons utiliser input type="checkbox" et donner à l'étiquette une class="hamburger" . Deuxièmement, nous allons donner à notre menu de navigation class="menu" .

Notez que &#9776; est une entité HTML qui affiche le ☰ (icône de hamburger.)

 <body>
 <nav class="navbar">
 <!-- LOGO -->
 <div class="logo">MUO</div>
 <!-- NAVIGATION MENU -->
 <ul class="nav-links">
 <!-- USING CHECKBOX HACK -->
 <input type="checkbox" id="checkbox_toggle" />
 <label for="checkbox_toggle" class="hamburger">&#9776;</label>
 <!-- NAVIGATION MENUS -->
 <div class=”menu”>...</div>
 </ul>
 </nav>
 </body>

La logique derrière l'utilisation de l'élément checkbox est que lorsqu'il n'est pas coché, il affichera : none; alors que, bien que coché, cela changera la propriété CSS du sélecteur général de frères et sœurs (~) en le définissant pour afficher: block ; En termes simples, nous utilisons la case à cocher pour basculer le hamburger et les menus de navigation entre les états développé et caché.

Stylisez la barre de navigation pour les appareils mobiles à l'aide de requêtes multimédia CSS, comme indiqué ci-dessous. Dans ce cas, vous pouvez également utiliser la grille CSS et JS pour le menu mobile .

 /*RESPONSIVE NAVBAR MENU STARTS*/
 /* CHECKBOX HACK */
 input[type=checkbox]{
 display: none;
 }
 /*HAMBURGER MENU*/
 .hamburger {
 display: none;
 font-size: 24px;
 user-select: none;
 }
 /* APPLYING MEDIA QUERIES */
 @media (max-width: 768px) {
 .menu {
 display:none;
 position: absolute;
 background-color:teal;
 right: 0;
 left: 0;
 text-align: center;
 padding: 16px 0;
 }
 .menu li:hover {
 display: inline-block;
 background-color:#4c9e9e;
 transition: 0.3s ease;
 }
 .menu li + li {
 margin-top: 12px;
 }
 input[type=checkbox]:checked ~ .menu{
 display: block;
 }
 .hamburger {
 display: block;
 }
 .dropdown {
 left: 50%;
 top: 30px;
 transform: translateX(35%);
 }
 .dropdown li:hover {
 background-color: #4c9e9e;
 }
 }

Voici ce que nous avons construit :

Bureau

Appareils mobiles

Expérimenter est le meilleur moyen de concevoir votre barre de navigation idéale

Une bonne navigation sur le site Web a un impact considérable sur les taux de rebond et les taux de conversion. Essentiellement, le premier volet de votre site Web doit avoir un contexte clair, une navigation hiérarchique et une incitation à l'action. La structure de navigation de votre site Web doit aider les visiteurs à accéder aux pages populaires ou tendances de votre site en trois clics ou moins. Alors, continuez à expérimenter et à concevoir une meilleure navigation sur le site !