Implémentation du menu HTML-Questions et réponses frontales-php.cn

Le menu HTML est un composant souvent utilisé dans la conception Web et peut être utilisé pour afficher les options de navigation et de fonctionnement du site Web. Cet article explique comment créer un menu HTML de base en utilisant HTML et CSS.

1. Utilisez HTML pour créer une barre de menus

En HTML, nous pouvons utiliser les balises <ul> et <li> pour créer la barre de menus. <ul> représente une liste non ordonnée, tandis que <li> est utilisé pour représenter chaque élément de menu. Le code est le suivant : <ul>和<li>标签来构建菜单栏。<ul>代表无序列表，而<li>用于表示每一项菜单。代码如下：

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

Copier après la connexion

在上面的代码中，我们创建了一个包含四个菜单项的无序列表。每个菜单项都包含一个链接<a>，用于链接到其他页面。重新运行代码可以看到一个垂直排列的菜单栏。这个菜单栏还缺少一个样式和交互效果，下面我们将会添加样式。

二、使用CSS添加菜单栏样式

现在我们需要为菜单栏添加一些样式来使其更具吸引力并且更容易阅读。我们可以通过CSS样式表来控制菜单栏的外观。代码如下：

<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  li {
    float: left;
  }
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  li a:hover {
    background-color: #111;
  }
</style>

Copier après la connexion

在上述代码中，我们使用了以下CSS属性：

<ul><li>list-style-type: none：将列表项的默认符号去掉，以得到一个更干净的外观。<li>margin: 0; padding: 0;：将菜单栏的内外边距设为0，以去掉默认间距。<li>overflow: hidden：用于清除浮动元素，以防止出现布局问题。<li>background-color: #333：用于设置菜单栏的背景颜色。<li>float: left：使每个菜单项向左浮动，并在一行上显示。<li>display: block：使链接元素成为块级元素，从而允许我们对它们应用样式。<li>color: white：将链接的文本设置为白色。<li>text-align: center：将菜单项的文本内容居中对齐。<li>padding: 14px 16px：设置每个菜单项的内边距。<li>text-decoration: none：去掉链接的默认下划线。<li>li a:hover：当用户将鼠标悬停在菜单项上时，为链接元素添加一个新的背景颜色。

三、使用CSS实现下拉菜单

下拉菜单是一种常见的HTML菜单类型，它以垂直向下的形式呈现多级菜单结构。下面的代码演示了如何使用无序列表和CSS实现一个简单的下拉菜单：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
  background-color: #111;
}
.active {
  background-color: #4CAF50;
}
.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">首页</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系我们</a></li>
</ul>

</body>
</html>

Copier après la connexion

在这个例子中，我们添加了一个下拉菜单的第二个菜单项。下拉菜单由一个普通菜单项和一个包含链接的容器组成。当鼠标悬停在普通菜单项上时，会显示下拉菜单容器。容器包含了菜单项和附加样式。我们使用CSS对菜单项和下拉菜单添加样式。

值得注意的是，我们在这个样例中使用了JavaScript来模拟触发器，以便在鼠标悬停时控制下拉菜单的显示和隐藏状态。这段代码如下所示：

<a href="javascript:void(0)" class="dropbtn">Dropdown</a>

Copier après la connexion

此外，还使用了以下CSS属性：

<ul> <li> .dropdown：为一个包含下拉菜单的容器元素添加样式。 <li> .dropdown-content：为下拉菜单容器的菜单项添加样式和指定它们为绝对定位元素。 <li> .dropdown:hover .dropdown-content：为当鼠标悬停在dropdown元素时，将dropdown-contentrrreee Dans le code ci-dessus, nous avons créé une liste non ordonnée de quatre éléments de menu. Chaque élément de menu contient un lien <a> vers une autre page. Réexécutez le code pour voir une barre de menu disposée verticalement. Cette barre de menus manque encore d'effet de style et d'interaction. Nous ajouterons des styles ci-dessous.

2. Ajouter un style de barre de menus à l'aide de CSS

Nous devons maintenant ajouter quelques styles à la barre de menus pour la rendre plus attrayante et plus facile à lire. Nous pouvons contrôler l'apparence de la barre de menus via des feuilles de style CSS. Le code est le suivant :

rrreee🎜Dans le code ci-dessus, nous utilisons les propriétés CSS suivantes : 🎜<ul> <li> list-style-type : none : Supprime le symbole par défaut de la liste article pour obtenir un look plus propre. 🎜 <li> margin: 0; padding: 0; : définissez les marges intérieure et extérieure de la barre de menu sur 0 pour supprimer l'espacement par défaut. 🎜 <li> overflow : caché : utilisé pour effacer les éléments flottants afin d'éviter les problèmes de mise en page. 🎜 <li> background-color: #333 : Utilisé pour définir la couleur d'arrière-plan de la barre de menu. 🎜 <li> float: left : faites flotter chaque élément de menu vers la gauche et affichez-le sur une seule ligne. 🎜 <li> display: block : crée des liens entre les éléments au niveau du bloc, nous permettant de leur appliquer des styles. 🎜 <li> color: white : Définissez le texte du lien en blanc. 🎜 <li> text-align: center : centrez le contenu du texte de l'élément de menu. 🎜 <li> padding : 14px 16px : définissez le remplissage de chaque élément de menu. 🎜 <li> text-decoration: none : Supprimez le soulignement par défaut du lien. 🎜 <li> li a:hover : ajoute une nouvelle couleur d'arrière-plan à l'élément de lien lorsque l'utilisateur survole l'élément de menu. 🎜🎜🎜 3. Utilisez CSS pour implémenter le menu déroulant 🎜🎜 Le menu déroulant est un type de menu HTML courant, qui présente une structure de menu à plusieurs niveaux sous une forme verticale descendante. Le code ci-dessous montre comment implémenter un menu déroulant simple en utilisant une liste non ordonnée et CSS : 🎜rrreee🎜 Dans cet exemple, nous ajoutons un deuxième élément de menu au menu déroulant. Un menu déroulant se compose d'un élément de menu normal et d'un conteneur contenant des liens. Un conteneur de menu déroulant apparaît lorsque la souris passe sur un élément de menu normal. Le conteneur contient des éléments de menu et des styles supplémentaires. Nous utilisons CSS pour styliser les éléments de menu et les menus déroulants. 🎜🎜Il convient de noter que nous utilisons JavaScript dans cet exemple pour simuler un déclencheur afin de contrôler l'état d'affichage et de masquage du menu déroulant lorsque la souris est survolée. Ce code ressemble à ceci : 🎜rrreee🎜 De plus, les propriétés CSS suivantes sont utilisées : 🎜<ul> <li> .dropdown : ajoutez des styles à un élément conteneur qui contient un menu déroulant. 🎜 <li> .dropdown-content : ajoutez des styles aux éléments de menu du conteneur de menu déroulant et désignez-les comme éléments à position absolue. 🎜 <li> .dropdown:hover .dropdown-content : définissez le conteneur dropdown-content lorsque la souris survole l'élément dropdown. être visible. 🎜🎜🎜4. Résumé🎜🎜Le menu HTML est un composant couramment utilisé dans la conception de sites Web et est généralement utilisé pour afficher les options de navigation et de fonctionnement du site Web. Nous pouvons généralement créer des menus HTML de base en utilisant HTML et CSS. Pour implémenter un menu déroulant, nous devons ajouter du code CSS et JavaScript supplémentaire pour contrôler l'affichage et le masquage du menu déroulant. Lors de la conception d’un menu, veillez à sa facilité d’utilisation et à sa lisibilité, afin que les utilisateurs puissent trouver facilement les informations dont ils ont besoin. 🎜

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!