上一篇
三级导航条，先以`
和`标签构建HTML结构，再通过CSS设置样式，如隐藏子菜单、定位显示位置等，还可添加JavaScript实现交互效果
网页设计中,三级导航条是一种常见的导航结构，它能够帮助用户更清晰地浏览网站内容，以下是如何使用HTML制作三级导航条的详细步骤和示例代码：
HTML结构搭建
三级导航条的HTML结构通常由多个嵌套的<ul>（无序列表）和<li>（列表项）标签组成，以表示不同层级的菜单，每个<li>标签内可以包含一个链接<a>作为菜单项的文本，以及一个嵌套的<ul>来表示下一级菜单。
示例代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">三级导航条示例</title>
<style>
/ CSS样式将在后续部分介绍 /
</style>
</head>
<body>
<nav>
<ul class="nav">
<li><a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1-1</a>
<ul>
<li><a href="#">三级菜单1-1-1</a></li>
<li><a href="#">三级菜单1-1-2</a></li>
</ul>
</li>
<li><a href="#">二级菜单1-2</a>
<ul>
<li><a href="#">三级菜单1-2-1</a></li>
<li><a href="#">三级菜单1-2-2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">一级菜单2</a>
<ul>
<li><a href="#">二级菜单2-1</a>
<ul>
<li><a href="#">三级菜单2-1-1</a></li>
<li><a href="#">三级菜单2-1-2</a></li>
</ul>
</li>
<li><a href="#">二级菜单2-2</a>
<ul>
<li><a href="#">三级菜单2-2-1</a></li>
<li><a href="#">三级菜单2-2-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
CSS样式设计
为了使导航条在视觉上层次分明且具备交互效果,我们需要使用CSS进行样式设计，以下是一些关键的CSS样式设置：
- 重置默认样式：清除列表的默认样式，如
list-style、margin和padding。 - 设置导航条背景和文字颜色：导航条的背景色与文字颜色会形成对比，以便用户清晰阅读。
- 布局和定位：使用
display: none;隐藏子菜单，当鼠标悬停在父菜单上时，通过:hover伪类显示子菜单，使用position: absolute;来定位子菜单的位置。 - 过渡效果：为了增强用户体验，可以为子菜单的显示和隐藏添加过渡效果。
示例CSS代码：
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background-color: #333; / 导航条背景色 /
color: #fff; / 文字颜色 /
font-family: Arial, sans-serif; / 字体 /
}
.nav {
list-style: none;
margin: 0;
padding: 0;
display: flex; / 使用flex布局使一级菜单水平排列 /
}
.nav > li {
position: relative; / 相对定位，为子菜单的定位提供参考 /
}
.nav > li > a {
display: block;
padding: 15px 20px; / 内边距 /
color: #fff; / 文字颜色 /
text-decoration: none; / 去除下划线 /
}
.nav > li:hover > a {
background-color: #555; / 鼠标悬停时一级菜单背景色变化 /
}
.nav > li > ul {
display: none; / 隐藏二级菜单 /
position: absolute; / 绝对定位 /
top: 100%; / 二级菜单位于一级菜单下方 /
left: 0;
background-color: #444; / 二级菜单背景色 /
list-style: none;
margin: 0;
padding: 0;
min-width: 150px; / 设置最小宽度 /
}
.nav > li:hover > ul {
display: block; / 鼠标悬停时显示二级菜单 /
}
.nav > li > ul > li {
position: relative; / 相对定位，为三级菜单的定位提供参考 /
}
.nav > li > ul > li > a {
display: block;
padding: 10px 20px; / 内边距 /
color: #fff; / 文字颜色 /
text-decoration: none; / 去除下划线 /
}
.nav > li > ul > li:hover > a {
background-color: #666; / 鼠标悬停时二级菜单项背景色变化 /
}
.nav > li > ul > li > ul {
display: none; / 隐藏三级菜单 /
position: absolute; / 绝对定位 /
top: 0; / 三级菜单与二级菜单对齐 /
left: 100%; / 三级菜单位于二级菜单右侧 /
background-color: #555; / 三级菜单背景色 /
list-style: none;
margin: 0;
padding: 0;
min-width: 150px; / 设置最小宽度 /
}
.nav > li > ul > li:hover > ul {
display: block; / 鼠标悬停时显示三级菜单 /
}
JavaScript实现交互效果（可选）
虽然纯CSS也可以实现三级导航条的基本功能,但通过JavaScript可以进一步增强交互性，例如点击后显示和隐藏子菜单，或者实现更复杂的动画效果，以下是一个简单的JavaScript示例，用于点击一级菜单时显示或隐藏二级菜单：
示例JavaScript代码：
document.addEventListener('DOMContentLoaded', function() {
var navItems = document.querySelectorAll('.nav > li');
navItems.forEach(function(item) {
item.addEventListener('click', function(event) {
var subMenu = this.querySelector('ul');
if (subMenu) {
event.preventDefault(); // 阻止默认行为（跳转）
var isVisible = subMenu.style.display === 'block';
subMenu.style.display = isVisible ? 'none' : 'block'; // 切换显示状态
}
});
});
});
响应式设计（可选）
为了确保导航条在不同设备上的良好体验,我们还需要进行响应式设计，可以使用媒体查询（Media Queries）来调整导航条在小屏设备上的显示效果，在小屏设备上，可以将水平排列的一级菜单改为垂直排列，并调整子菜单的显示方式。
示例响应式CSS代码：
@media (max-width: 768px) {
.nav {
flex-direction: column; / 垂直排列一级菜单 /
}
.nav > li > ul {
position: static; / 取消绝对定位，使二级菜单正常流布 /
display: none; / 隐藏二级菜单 /
}
.nav > li:hover > ul {
display: block; / 鼠标悬停时显示二级菜单 /
}
}
完整示例代码
将上述HTML、CSS和JavaScript代码整合在一起，即可得到一个完整的三级导航条示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">三级导航条示例</title>
<style>
/ 上述CSS代码 /
</style>
</head>
<body>
<nav>
<ul class="nav">
<!-上述HTML结构 -->
</ul>
</nav>
<script>
// 上述JavaScript代码
</script>
</body>
