Conception de la barre de navigation Web CSS : création de différents styles de barre de navigation

Conception de la barre de navigation Web CSS : pour créer différents styles de barre de navigation, des exemples de code spécifiques sont nécessaires

La barre de navigation est l'un des composants les plus importants de la conception Web. Elle permet non seulement aux utilisateurs de parcourir les différentes pages du site Web. , mais également fournir des indications claires sur la structure du site Web. Lors de la conception d’une barre de navigation, le problème auquel nous sommes souvent confrontés est de savoir comment créer une barre de navigation à la fois belle et fonctionnelle. Cet article présentera quelques méthodes courantes de conception de barres de navigation CSS et donnera des exemples de code correspondants pour aider les lecteurs à mieux les comprendre et les appliquer.

1. Barre de navigation de base
   La barre de navigation de base est la conception la plus courante, utilisant généralement une liste non ordonnée (ul) pour représenter les éléments de menu de la barre de navigation. Nous pouvons utiliser CSS pour définir le style de la barre de navigation, comme la couleur d'arrière-plan, la taille de la police, les marges, etc.

Exemple de code HTML :

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

Exemple de code CSS :

nav {
  background-color: #333;
  padding: 10px;
}

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

nav li {
  display: inline;
}

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

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

2. Barre de navigation réactive
Avec la popularité des appareils mobiles, de plus en plus d'utilisateurs naviguent sur le Web via des téléphones mobiles ou des tablettes. Par conséquent, nous devons concevoir un style réactif pour la barre de navigation afin de présenter la meilleure expérience utilisateur sur différents appareils.

Une conception courante de barre de navigation réactive est le menu déroulant mobile. Lorsque la largeur de l'écran est inférieure à un certain seuil, l'élément de menu dans la barre de navigation sera présenté sous la forme d'un bouton. Après que l'utilisateur ait cliqué sur le bouton, l'élément de menu sera affiché sous la forme d'une liste déroulante. .

Exemple de code HTML :

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
  <button class="menu-btn">&#9776;</button>
</nav>

Exemple de code CSS :

nav {
  background-color: #333;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

nav li {
  display: inline;
}

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

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

.menu-btn {
  display: none;
}

@media only screen and (max-width: 768px) {
  nav ul {
    display: none;
  }
  
  .menu-btn {
    display: block;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 10px;
  }
  
  .menu-btn:hover {
    background-color: #666;
  }
  
  .menu-btn:focus {
    outline: none;
  }
  
  .menu-dropdown {
    display: none;
    background-color: #333;
    padding: 10px;
  }
  
  .show {
    display: block;
  }
}

3. Barre de navigation déroulante
La barre de navigation déroulante peut mieux organiser et afficher les sous-pages du site Web, offrant plus d'options de navigation. Nous pouvons utiliser la pseudo-classe CSS:hover pour obtenir l'effet déroulant.

Exemple de code HTML :

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a>
      <ul class="submenu">
        <li><a href="#">公司简介</a></li>
        <li><a href="#">团队介绍</a></li>
      </ul>
    </li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

Exemple de code CSS :

nav {
  background-color: #333;
  padding: 10px;
}

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

nav li {
  display: inline-block;
}

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

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

.submenu {
  display: none;
  background-color: #666;
  position: absolute;
  top: 100%;
  left: 0;
}

nav li:hover .submenu {
  display: block;
}

Cet article présente la méthode de conception de la barre de navigation de base, de la barre de navigation réactive et de la barre de navigation déroulante, et donne des exemples de code correspondants. Les lecteurs peuvent modifier et personnaliser ces exemples de codes pour répondre aux besoins de leur propre site Web. Grâce à une conception CSS raisonnable, nous pouvons créer différents styles de barres de navigation pour offrir aux utilisateurs une meilleure expérience de navigation sur le site Web. Bien sûr, ce n'est que la pointe de l'iceberg lorsqu'il s'agit de concevoir des barres de navigation. D'autres techniques et détails de conception nous attendent pour être explorés et appliqués. J'espère que cet article sera utile aux lecteurs !

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!