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.
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 :
.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éepour créer le menu de navigation. En définissantdisplay: 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.来创建导航菜单。通过设置display: inline-block;，使得菜单项水平排列。鼠标悬停时，菜单项的背景色会发生变化，以提供视觉反馈。
垂直导航菜单是另一种常见的导航菜单类型。它通常呈现为一列垂直排列的链接，用于导航到不同页面。以下是一个简单的垂直导航菜单的代码示例：
.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;，使得菜单项垂直排列，之间有一定的间距。鼠标悬停时，菜单项的背景色也会发生变化。
下拉菜单是一种常见的交互式导航菜单，它可以展示更多的菜单选项，并且在鼠标悬停时显示隐藏的选项。以下是一个简单的下拉菜单的代码示例：
.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;
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.
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!
![Le cours front-end qui vous comprend le mieux : HTML5/CSS3/ES6/NPM/Vue/...[Original]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
