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

Une barre de navigation (navbar) bien conçue et fonctionnelle est l'un des éléments clés de tout site Web. Il sert de feuille de route aux utilisateurs, les aidant à naviguer à travers les différentes pages. Une barre de navigation est généralement positionnée en haut d'une page Web, où elle est toujours visible pour que les utilisateurs puissent accéder aux liens clés. Dans cet article, nous explorerons comment créer une barre de navigation CSS visuellement attrayante et fonctionnelle en utilisant HTML et CSS. Nous discuterons également de diverses techniques pour garantir que la barre de navigation reste en haut de la page.

Vous pouvez consulter une démo en direct de cette barre de navigation et explorer ses fonctionnalités en visitant l'aperçu sur CodePen.

L'extrait de code suivant montre la création d'une barre de navigation réactive avec un logo, des éléments de menu et un bouton d'appel à l'action. Voici le code HTML et CSS :

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar</title>
    <style>
      body {
        background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
        height: 100vh;
        margin: 0;
        padding-top: 10px;
      }

      .navbar {
        display: flex;
        background: #fff;
        border-radius: 30px;
        padding: 10px 20px;
        margin: 0 auto;
        width: 95%;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
      }

      .logo {
        width: 12rem;
      }

      .menu {
        display: flex;
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .item {
        margin: 0 15px;
      }

      .item a {
        text-decoration: none;
        color: #333;
        font-weight: bold;
      }

      .item a:hover {
        color: #2258c3;
      }

      button {
        background-color: #2258c3;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 20px;
        cursor: pointer;
      }

      button:hover {
        background-color: #fd2df3;
      }
    </style>
  

  
    <nav class="navbar">
      <img src="https://bitlearners.com/wp-content/uploads/2024/06/BitLearners-logo-1.png" alt="Comment créer une barre de navigation en utilisant HTML et CSS" class="logo">

      <ul class="menu">
        <li class="item"><a href="#">Home</a></li>
        <li class="item"><a href="#">About Us</a></li>
        <li class="item"><a href="#">Contact Us</a></li>
        <li class="item"><a href="#">Blog</a></li>
      </ul>

      <button type="submit">Call Now</button>
    </nav>
  

Décrypter le code
Examinons de plus près comment la barre de navigation est créée en utilisant HTML et CSS.

Structure HTML

La partie HTML du code est simple. Il se compose d'un élément nav qui contient trois composants principaux :

• Un logo (une image)
• Une liste **menu ** avec des liens cliquables (Accueil, À propos de nous, Contactez-nous, Blog)
• Un **bouton **qui sert d'appel à l'action (Appeler maintenant)
• La structure est enveloppée dans un élément, qui fait office de conteneur pour la barre de navigation.

<nav class="navbar">
  <img src="logo-url" alt="Comment créer une barre de navigation en utilisant HTML et CSS" class="logo">
  <ul class="menu">
    <li class="item"><a href="#">Home</a></li>
    <li class="item"><a href="#">About Us</a></li>
    <li class="item"><a href="#">Contact Us</a></li>
    <li class="item"><a href="#">Blog</a></li>
  </ul>
  <button type="submit">Call Now</button>
</nav>

Le logo est créé à l'aide d'une balise . Le menu est une liste non ordonnée (

)

qui contient des éléments de liste (

)

, et chaque élément de liste a une balise d'ancrage () pour créer des liens vers différentes pages. Enfin, le bouton est une simple balise avec style.

Styliser avec CSS

La magie opère dans la section CSS, où nous définissons la disposition et l'apparence de la barre de navigation. Discutons de certains des éléments clés.

Arrière-plan et style du corps
Le corps a un fond dégradé qui passe du bleu (#2258c3) au rose (#fd2df3). La hauteur est définie sur 100vh (hauteur de la fenêtre), ce qui garantit que l'arrière-plan remplit tout l'écran et qu'il n'y a aucune marge pour éviter tout espace indésirable autour de la page.

body {
  background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
  height: 100vh;
  margin: 0;
  padding-top: 10px;
}

Style de la barre de navigation

La barre de navigation a un fond blanc et des coins arrondis (border-radius : 30px). Le remplissage et la marge créent un espacement à l'intérieur et à l'extérieur de la barre de navigation. La propriété display: flex fait de la barre de navigation une flexbox, permettant l'alignement horizontal de ses éléments enfants. Le justifier-contenu : espace-entre garantit que le logo, le menu et le bouton sont uniformément espacés.

.navbar {
  display: flex;
  background: #fff;
  border-radius: 30px;
  padding: 10px 20px;
  margin: 0 auto;
  width: 95%;
  justify-content: space-between;
  align-items: center;
}

Fixer la barre de navigation en haut

L'une des fonctionnalités clés d'une barre de navigation est de rester en haut de la page lors du défilement. Pour y parvenir, nous utilisons la position : propriété fixe. Cela permet à la barre de navigation de rester fixe en haut (top : 0) quel que soit le défilement. De plus, le z-index : 9999 garantit que la barre de navigation est toujours au-dessus des autres éléments de la page.

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

Éléments de menu et interactivité

Les éléments de menu sont affichés horizontalement en utilisant display: flex sur la classe .menu. Les éléments sont espacés dans la marge et chaque élément est stylisé pour supprimer le style de liste et le remplissage par défaut. Les liens dans les éléments de menu n'ont pas de décorations de texte et sont stylisés avec une police en gras et une couleur sombre.

L'effet de survol sur les liens change la couleur pour correspondre à la couleur de fond bleu (#2258c3), fournissant un signal visuel indiquant que le lien est interactif.

.menu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.item {
  margin: 0 15px;
}

.item a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.item a:hover {
  color: #2258c3;
}

Style des boutons

Le bouton est doté d'un fond bleu (#2258c3), de texte blanc et de coins arrondis (border-radius : 20px). Au survol, l'arrière-plan devient rose (#fd2df3) pour correspondre au dégradé de l'arrière-plan.

button {
  background-color: #2258c3;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
}

button:hover {
  background-color: #fd2df3;
}

Comment garder la barre de navigation toujours au top

Pour corriger l'en-tête en haut de la page avec CSS, vous utilisez la propriété position:fixed avec top:0. Cela garantit que la barre de navigation restera en haut pendant que l'utilisateur fait défiler. Voici comment cela est appliqué dans le code :

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!