Coder une Navbar en HTML et CSS: Guide pratique.

1-Mise en place de la Navbar

Avant de commencer, notre projet, il nous faut déterminer l’arborescence de notre site.
Nous allons imaginer un site vitrine avec une architecture classique de quatre pages et un logo.

L’arborescence

Comme précédemment indiqué, nous allons installer quatre pages au niveau de la balise <header>
Nous serions sur ces titres de page :

• Présentation
• Nos Produits
• Blog
• Contact

Le code ressemble à ceci :

<header>
  <nav>
    <ul>
      <li><a href="#">Presentation</a></li>
      <li><a href="#">Nos Produits</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Le résultat :

Pour l’instant rien d’extraordinaire… même c’est vraiment pas beau 😱.

A voir : Apprendre à faire une animation type scroll-snapping

2- Ajout du CSS

1- Faire passer le menu vertical à l’horizontal

Dans votre feuille de style, en sélectionnant la propriété <ul>, on va faire passer sur une ligne le menu et enlever les puces qui apparaissent par défaut :

ul{
display:flex;
list-style-type:none;
}

Le résultat :

2- Personnalisation du texte

À présent, j’aimerais changer la font, les couleurs et la taille par défaut, on procède comme ceci :

a {
font-family:'Poppins',sans-serif;
font-size:1.1em;
text-decoration:none;
color:#000000
}

3- Ajout des espaces intérieurs

On commence à avoir un résultat sympa !, mais il nous manque de l’espace parce que ça ne donne pas envie de regarder.

Du coup, on va procéder comme suit :

li{
padding-left:10px;
}

Le résultat:

A voir : Créer une animation type machine à écrire avec JavaScript

Ajout du logo du site

1- Modification du code HTML

Pour rajouter un logo, il faut changer la structure des balises, pour que le logo apparaisse à gauche de l’écran et le menu à droite. On procède comme ceci :

 <header>
  <div class="container-header">
    <div class="container-logo">
      <a href="#" class="logo">
        <img src="https://png.pngtree.com/png-clipart/20190604/original/pngtree-business-logo-design-png-image_915991.jpg" alt=""></a>
    </div>
    <div class="container-menu">
      <nav>
    <ul>
      <li><a href="#">Presentation</a></li>
      <li><a href="#">Nos Produits</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
    </div>
  </div>
  
</header>

et pour le CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{
  overflow-x:hidden;
}

.container-header{
  display:flex;
  flex-direction:row;
  width:100vw;
  padding-left:10vw;
  padding-right:10vw;
}

.container-logo{
 width:20%
}
.container-logo img{
  width:5rem;
  object-fit:contain;
}
.container-menu{
  width:60vw
}
.container-menu ul{
display:flex;
list-style-type:none;
justify-content:end;
}

.container-menu li{
padding-left:10px;
}

.container-menu a{
font-family:'Poppins',sans-serif;
font-size:1.1em;
text-decoration:none;
color:#000000
}

A voir : La balise dialog : créer des modales modernes et accessibles

Et voilà, nous avons codé notre navbar en utilisant du HTML et CSS