Menu de navigation Web CSS : créez divers menus de navigation interactifs

Menu de navigation Web CSS : la création de divers menus de navigation interactifs nécessite des exemples de code spécifiques

Le menu de navigation est l'un des composants les plus importants de la page Web, qui peut aider les utilisateurs à naviguer rapidement vers différentes pages du site Web. Grâce à l'utilisation flexible du CSS, nous pouvons créer divers menus de navigation interactifs pour améliorer l'expérience utilisateur et la convivialité du site Web. Dans cet article, je présenterai quelques types de menus de navigation courants et donnerai des exemples de code correspondants à titre de référence.

<li>Menu de navigation horizontale

Le menu de navigation horizontale est le type de menu de navigation le plus courant. Il est généralement présenté sous la forme d’une rangée de liens disposés horizontalement et utilisés pour naviguer vers différentes pages. Voici un exemple de code pour un menu de navigation horizontal simple :

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

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

.horizontal-menu li {
  display: inline-block;
}

.horizontal-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.horizontal-menu li a:hover {
  background-color: #f1f1f1;
}

Le code ci-dessus utilise une liste non ordonnée <ul> et un élément de liste <li> pour créer le menu de navigation. En définissant display: inline-block;, les éléments de menu sont disposés horizontalement. La couleur d'arrière-plan des éléments de menu change au survol de la souris pour fournir un retour visuel. <ul> 和列表项 <li> 来创建导航菜单。通过设置 display: inline-block;，使得菜单项水平排列。鼠标悬停时，菜单项的背景色会发生变化，以提供视觉反馈。

<li>垂直导航菜单

垂直导航菜单是另一种常见的导航菜单类型。它通常呈现为一列垂直排列的链接，用于导航到不同页面。以下是一个简单的垂直导航菜单的代码示例：

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

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

.vertical-menu li {
  margin-bottom: 10px;
}

.vertical-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.vertical-menu li a:hover {
  background-color: #f1f1f1;
}

以上代码同样使用了无序列表和列表项来创建导航菜单。通过设置 margin-bottom: 10px;，使得菜单项垂直排列，之间有一定的间距。鼠标悬停时，菜单项的背景色也会发生变化。

<li>下拉菜单

下拉菜单是一种常见的交互式导航菜单，它可以展示更多的菜单选项，并且在鼠标悬停时显示隐藏的选项。以下是一个简单的下拉菜单的代码示例：

<ul class="dropdown-menu">
  <li><a href="#">产品</a>
    <ul>
      <li><a href="#">产品一</a></li>
      <li><a href="#">产品二</a></li>
      <li><a href="#">产品三</a></li>
    </ul>
  </li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

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

.dropdown-menu li {
  display: inline-block;
  position: relative;
}

.dropdown-menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.dropdown-menu li:hover ul {
  display: block;
}

.dropdown-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

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

以上代码中，通过设置 position: relative; 和 position: absolute;，使得隐藏的下拉菜单在鼠标悬停时显示在父菜单下方。另外，通过设置 display: none; 和 display: block;

Menu de navigation verticale
🎜Le menu de navigation verticale est un autre type courant de menu de navigation. Il est généralement présenté sous la forme d’une colonne de liens disposés verticalement et utilisée pour naviguer vers différentes pages. Voici un exemple de code pour un menu de navigation vertical simple : 🎜rrreeerrreee🎜Le code ci-dessus utilise également une liste non ordonnée et des éléments de liste pour créer un menu de navigation. En définissant margin-bottom: 10px;, les éléments de menu sont disposés verticalement avec un certain espacement entre eux. La couleur d'arrière-plan de l'élément de menu change également au survol de la souris. 🎜
🎜Menu déroulant🎜🎜🎜Le menu déroulant est un menu de navigation interactif commun qui peut afficher plus d'options de menu et afficher des options masquées au survol de la souris. Ce qui suit est un exemple de code d'un menu déroulant simple : 🎜rrreeerrreee🎜Dans le code ci-dessus, en définissant position : relative; et position : absolue;, le message caché le menu déroulant apparaît sous le menu parent au survol de la souris. De plus, en définissant display: none; et display: block;, le menu peut être affiché et masqué. 🎜🎜Avec les exemples de code ci-dessus, nous pouvons créer différents types de menus de navigation interactifs. Bien sûr, ce ne sont que quelques exemples de base et vous pouvez les développer et les modifier en fonction de vos besoins pour créer un menu de navigation plus unique et adapté à votre site Web. Bonne chance pour créer un menu de navigation beau et fonctionnel ! 🎜

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!