Comment implémenter la navigation dans les menus en CSS

CSS est un langage de conception puissant qui peut être utilisé pour embellir le style et la mise en page des éléments d'une page Web. Parmi eux, la mise en œuvre de la navigation dans les menus est une application courante du CSS. Dans cet article, nous détaillerons comment implémenter la navigation dans les menus à l'aide de CSS.

1. Structure de base HTML

Avant de commencer à écrire des styles CSS, nous devons comprendre la structure de base du HTML. Dans cet exemple, nous devons créer un menu de navigation et définir sa structure de base. Voici un code HTML de base :

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

Dans cette structure HTML, nous utilisons la balise <nav> pour définir la navigation dans les menus. La balise <ul> est utilisée pour créer une liste non ordonnée, et les éléments de la liste utilisent la balise <li>. Chaque élément de la liste contient un lien utilisant la balise <a>. Maintenant que nous avons défini la structure de base de la navigation dans les menus, nous allons commencer à écrire des styles CSS <nav>标签来定义菜单导航。<ul>标签用于创建一个无序列表，列表项使用<li>标签。每个列表项内包含一个链接，使用<a>标签。现在，我们已经定义好了菜单导航的基础结构，接下来将会开始编写CSS样式

二、基础样式

在开始样式设计之前，可以先为整个菜单添加一些基础样式，如下所示：

nav {
  background-color: #333;
  font-size: 18px;
  border-radius: 5px;
}

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

li {
  display: inline-block;
  margin: 0 10px;
}

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

在这些基础样式中，我们设置了菜单导航的背景颜色、字体大小、边框圆角等样式。对于无序列表，我们将其显示样式设置为无，将内外边距都设置为0，而每个列表项都是内联块级元素，并且有一定的外边距。链接样式的样式包括将文本颜色设置为白色、设置无下划线、内边距等。

三、鼠标悬停和选中样式

接下来，我们可以添加鼠标悬停和选中时的样式效果。例如，当鼠标移动到链接上，我们希望链接背景颜色发生变化，提示用户当前链接处于活动状态。该效果可以通过以下代码来实现：

a:hover {
  background-color: #555;
}

a:active {
  background-color: #777;
}

当鼠标悬停在链接上时，链接的背景颜色将变成深灰色；当用户单击链接时，背景颜色将进一步变成浅灰色，以突出链接的活动状态。

四、下拉菜单

对于具有子菜单的主菜单项，我们可能需要实现下拉菜单的效果，以便用户更方便地访问子菜单项。下拉菜单可以使用CSS伪类及其属性来实现。可以通过以下代码将下拉菜单添加到主菜单项中：

li:hover ul {
  display: block;
}

ul ul {
  display: none;
  position: absolute;
  top: 40px;
  background-color: #555;
}

ul ul li {
  display: block;
  width: 200px;
}

ul ul li a {
  padding: 8px;
}

在这段代码中，我们使用了li:hover伪类来检测鼠标是否悬停在主菜单项上。如果是，则在下面的子元素中显示下拉菜单。对于下拉菜单，由于其实在主菜单项下方，因此我们需要绝对定位，并将其置于主菜单项的下面。下拉菜单的文本颜色和背景颜色也可能略有不同，以便用户清楚地区分主菜单项和子菜单项。

五、响应式设计

在设计网站时，我们应该考虑到不同设备之间的差异。因此，为了确保菜单导航在移动设备上显示正常，我们需要添加一些响应式设计的样式。例如，我们可能需要在移动设备上隐藏下拉菜单，并在触摸屏设备上添加特定的样式。可以通过以下代码来实现：

@media screen and (max-width: 768px) {
  ul {
    display: none;
    position: absolute;
    top: 60px;
    width: 100%;
    background-color: #333;
  }

  li {
    display: block;
    margin: 0;
  }

  li:hover ul {
    display: none;
  }

  a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #fff;
  }
}

在这段代码中，我们添加了一个@media

2. Styles de base

Avant de commencer la conception des styles, vous pouvez ajouter quelques styles de base à l'ensemble du menu, comme indiqué ci-dessous : 🎜 rrreee🎜In Ces styles de base, nous définissons la couleur d'arrière-plan, la taille de la police, les coins arrondis des bordures et d'autres styles de navigation dans les menus. Pour la liste non ordonnée, nous définissons son style d'affichage sur Aucun, définissons les marges intérieure et extérieure sur 0, et chaque élément de liste est un élément de niveau bloc en ligne avec certaines marges. Les styles pour les styles de lien incluent la définition de la couleur du texte sur blanc, l'absence de soulignement, de remplissage, etc. 🎜🎜3. Styles de survol et de sélection🎜🎜Ensuite, nous pouvons ajouter des effets de style lors du survol et de la sélection. Par exemple, lorsque la souris survole un lien, nous souhaitons que la couleur d'arrière-plan du lien change pour indiquer à l'utilisateur que le lien est actuellement actif. Cet effet peut être obtenu par le code suivant : 🎜rrreee🎜 Lorsque la souris survole le lien, la couleur d'arrière-plan du lien deviendra gris foncé ; lorsque l'utilisateur clique sur le lien, la couleur d'arrière-plan deviendra ensuite gris clair pour devenir mettez en surbrillance l’état de l’activité du lien. 🎜🎜4. Menu déroulant🎜🎜Pour les éléments du menu principal avec des sous-menus, nous devrons peut-être implémenter l'effet des menus déroulants afin que les utilisateurs puissent accéder plus facilement aux éléments de sous-menu. Les menus déroulants peuvent être implémentés à l'aide de pseudo-classes CSS et de leurs propriétés. Un menu déroulant peut être ajouté à l'élément du menu principal avec le code suivant : 🎜rrreee🎜 Dans ce code, nous avons utilisé la pseudo-classe li:hover pour détecter si la souris survole l'élément principal élément de menu. Si tel est le cas, affichez le menu déroulant dans l'élément enfant ci-dessous. Pour le menu déroulant, puisqu’il se trouve en fait en dessous de l’élément du menu principal, nous devons absolument le positionner et le placer sous l’élément du menu principal. La couleur du texte et la couleur d'arrière-plan des menus déroulants peuvent également être légèrement différentes afin que les utilisateurs puissent clairement différencier les éléments du menu principal et les éléments du sous-menu. 🎜🎜5. Responsive Design🎜🎜Lors de la conception d'un site Web, nous devons prendre en compte les différences entre les différents appareils. Par conséquent, afin de garantir que la navigation dans les menus s'affiche correctement sur les appareils mobiles, nous devons ajouter des styles de conception réactifs. Par exemple, nous devrons peut-être masquer un menu déroulant sur les appareils mobiles et ajouter un style spécifique sur les appareils à écran tactile. Ceci peut être réalisé avec le code suivant : 🎜rrreee🎜 Dans ce code, nous avons ajouté une requête multimédia @media pour détecter la taille de l'écran de l'appareil. Certains styles changent si la largeur de l'écran est inférieure ou égale à 768 pixels. Par exemple, nous allons désactiver le menu déroulant et empiler les éléments de menu les uns sur les autres tout en ajoutant une bordure inférieure pour différencier chaque élément de menu. De plus, nous avons déplacé l'intégralité du menu vers le haut de la page en utilisant un positionnement absolu pour garantir que le menu soit plus facile à utiliser sur les appareils à écran tactile. 🎜🎜Ce qui précède est la conception de style requise pour implémenter la navigation dans les menus. Copiez simplement ces codes de style CSS et ajoutez-les à votre page Web. Bien sûr, dans le développement réel, certaines modifications devront être apportées en fonction des exigences spécifiques du site Web, mais elles constituent un bon point de départ pour ajouter un beau menu de navigation à votre site Web. 🎜

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!