在本教程中，当涉及到当前网站的主要内容时，我们将看到我们可以使用 html5 和 css3 实现什么：简陋的下拉导航菜单。我们还将使用 jquery 来处理效果并为我们添加最后的润色。
html5 为规范带来了一个专用<nav>元素，该元素应用作任何主要导航结构的容器，例如主要的垂直或水平站点导航菜单，或页内目录。
使用这些新功能，我们将使用干净且语义化的 HTML 代码构建一个下拉导航菜单。
让我们开始吧。
1.入门
在撰写本文时，我们需要最新版本的 jQuery 3.6.0 的副本。
在您的机器上的某处创建一个项目文件夹并调用它dropdown-web。在这个文件夹中，创建三个新文件夹：一个名为index.html用于 HTML 标记，一个名为style.css用于样式设置，一个名为script.js用于使用 jQuery 编写脚本。
2.创建底层页面
首先将 jQuery 和 font Awesome 导入 HTML 头部标签：
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script> </head>
<body> <header> <div class="header-container"> <div class="logo"> <a href="">LOGO</a> </div> <nav> <ul class="menu"> <!-- Nav --> <li class="nav-1"> <a href="">Nav Link 1</a> <i class="fas fa-arrow-down"></i> <div class="nav-items-1"> <a href="">Sub Nav Link 1</a> <a href="">Sub Nav Link 2</a> <a href="">Sub Nav Link 3</a> <a href="">Sub Nav Link 4</a> </div> </li> <!-- Nav --> <li class="nav-2"> <a href="">Nav Link 2</a> <i class="fas fa-arrow-down"></i> <div class="nav-items-2"> <a href="">Sub Nav Link 1</a> <a href="">Sub Nav Link 2</a> <a href="">Sub Nav Link 3</a> <a href="">Sub Nav Link 4</a> </div> </li> <!-- Nav --> <li class="nav-3"> <a href="">Nav Link 3</a> <i class="fas fa-arrow-down"></i> <div class="nav-items-3"> <a href="">Sub Nav Link 1</a> <a href="">Sub Nav Link 2</a> <a href="">Sub Nav Link 3</a> <a href="">Sub Nav Link 4</a> </div> </li> <!-- Nav --> <li class="nav-4"> <a href="">Nav Link 4</a> <i class="fas fa-arrow-down jsicon-2"></i> <div class="nav-items-4"> <a href="">Sub Nav Link 1</a> <a href="">Sub Nav Link 2</a> <a href="">Sub Nav Link 3</a> <a href="">Sub Nav Link 4</a> </div> </li> </ul> </nav> </div> </header> <script src="script.js"></script> </body> </html>
使用 HTML5<header>标记，我们创建了一个包含两个部分的标题 - 徽标部分和导航菜单。导航菜单包含导航列表。每个导航组都有一个链接、一个来自 Font Awesome 的图标，以及一个<div>包含四个子导航链接的链接。这些导航链接将显示在下拉菜单中。
我们将类属性分配给大多数标签，这将使我们能够稍后在样式表和 jQuery 脚本中访问它们。最后，在标记下方，我们使用一个<script>标签从script.js文件加载我们的脚本。
3.添加CSS
现在让我们添加一些基本样式。在style.css中创建以下样式表：
/* reset padding and margin, set document font */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
body{
width: 100%;
height: 100%;
background-color: #333;
}
/* Sets color of link texts to white */
a{
text-decoration: none;
color: #fff;
font-weight: 700;
}
li {
list-style-type: none;
}
/* Header 100 percent of body, position relative to body */
header {
width: 100%;
padding: 0 2%;
background-color: black;
position: relative;
}
/* Display logo and nav side by side to each other (flex) */
.header-container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 10px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Set color for Font Awesome icons */
.fas {
color: #fff;
}
.logo a {
font-size: 40px;
}
.menu {
display: flex;
}
.menu li {
margin-left: 60px;
}
.menu li a {
padding: 20px 0;
}
/* Change color of link texts when hovered upon */
.menu li a:hover {
color: #fb743e;
}
/* Also change color of icon when hover on link */
.menu li a:hover - .fas{
color: #fb743e;
}
/* Hide all sub nav links by default, display children in column when displayed */
.nav-items-1,.nav-items-2, .nav-items-3, .nav-items-4 {
text-align: center;
display: none;
flex-direction: column;
background-color: black;
}
.nav-items-1 a, .nav-items-2 a, .nav-items-3 a, .nav-items-4 a {
font-size: 14px;
}
.nav-items-1, .nav-items-2, .nav-items-3 {
width: 100%;
max-width: 150px;
position: absolute;
top: 64px;
padding: 10px;
}
.nav-items-4 {
width: 100%;
max-width: 130px;
position: absolute;
top: 64px;
}
/* This will be used to display sub links for a nav when active */
.navActive {
display: flex;
}我们首先将所有元素的内边距和边距重置0px为 HTML 文档并设置字体。
该类.navActive将切换到用户悬停在任何导航项上。这将依次切换主文本下方下拉列表中的导航链接项目。
此功能将在下一节中使用 jQuery 实现。
4.添加脚本
切换每个导航的脚本非常简单：
// toggle first nav on hover
$('.nav-1').hover(function() {
$('.nav-items-1').toggleClass('navActive')
})
// toggle second nav on hover
$('.nav-2').hover(function() {
$('.nav-items-2').toggleClass('navActive')
})
// toggle third nav on hover
$('.nav-3').hover(function() {
$('.nav-items-3').toggleClass('navActive')
})
// toggle fourth nav on hover
$('.nav-4').hover(function() {
$('.nav-items-4').toggleClass('navActive')
})在脚本中，我们说每当用户将鼠标悬停在任何具有 、 、 或 类的元素上时nav-1，nav-2我们nav-3都nav-4希望通过切换navActive元素上的类来在下拉菜单中显示其项目。
回想一下，在我们的样式表中，我们默认隐藏了下拉元素：
.nav-items-1,.nav-items-2, .nav-items-3, .nav-items-4 {
text-align: center;
display: none;
flex-direction: column;
background-color: black;}当用户将鼠标悬停在任何这些元素上时，jQuery 脚本将在所述元素上切换此类：
.navActive {
display: flex;
}结果，该div元素及其所有子元素将从hidden display变为flex display。
最后的想法
我希望本教程能帮助您更好地理解 HTML5 和 CSS。在构建这个下拉导航菜单的过程中，我们介绍了一些基本的 CSS 选择器和几个 HTML 标签，以帮助您构建和设计网页。
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
