随着移动设备的普及，越来越多的用户通过手机、平板等移动设备访问网站。而这些移动设备的屏幕尺寸相对于桌面电脑较小，导航条在这些设备上会占用过多的空间，从而影响用户体验。因此，在响应式设计中，如何应对多层级导航条问题，成为了前端工程师需要考虑和解决的问题。
什么是响应式设计
响应式设计指的是一种能自动适应不同屏幕尺寸、分辨率和设备类型的网站设计方法。通过使用 CSS3 媒体查询等技术，使网站能够自动适应不同设备的显示效果，提高用户体验。
怎样应对多层级导航条问题
折叠菜单
一种最常见的解决方案是使用折叠菜单。它能够在有限的空间内展示多个导航选项，并且不会占用太多的屏幕空间。通过点击菜单按钮，可以展开或收起菜单项，达到节省空间的效果。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>折叠菜单示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.navbar {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.navbar-title {
font-size: 1.5rem;
}
.navbar-toggle {
display: block;
font-size: 1.5rem;
padding: 10px;
cursor: pointer;
}
.navbar-nav {
display: none;
background-color: #555;
transform: translateX(-100%);
position: absolute;
top: 50px;
left: 0;
width: 100%;
z-index: 999;
}
.navbar-nav li {
padding: 10px;
border-bottom: 1px solid #444;
color: #fff;
text-align: center;
font-size: 1.2rem;
}
.navbar-nav li:last-child {
border-bottom: none;
}
.navbar-toggle.open + .navbar-nav {
display: block;
transform: translateX(0);
}
</style>
</head>
<body>
<nav class="navbar">
<div class="navbar-title">折叠菜单示例</div>
<div class="navbar-toggle">☰</div>
<ul class="navbar-nav">
<li>菜单项 1</li>
<li>菜单项 2</li>
<li>菜单项 3</li>
<li>菜单项 4</li>
<li>菜单项 5</li>
</ul>
</nav>
<script>
var navbarToggle = document.querySelector('.navbar-toggle');
navbarToggle.addEventListener('click', function() {
this.classList.toggle('open');
});
</script>
</body>
</html>Mega Menu
Mega Menu 是一种常用的多层级导航条解决方案，它能够在导航栏下面展示更多的选项以及子选项。使用 Mega Menu 可以将多个层级的菜单项全部显示出来，避免用户进一步点击才能进入目标页面的情况。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>Mega Menu 示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.navbar {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.navbar-title {
font-size: 1.5rem;
}
.navbar-nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
line-height: 50px;
}
.navbar-nav > li {
position: relative;
margin-right: 10px;
padding-right: 10px;
cursor: pointer;
}
.navbar-nav > li:last-child {
margin-right: 0;
padding-right: 0;
}
.navbar-nav > li:hover {
background-color: #444;
}
.navbar-nav > li > a {
color: #fff;
text-decoration: none;
font-size: 1.2rem;
}
.mega-menu {
display: none;
position: absolute;
top: 50px;
left: 0;
padding: 20px;
background-color: #555;
min-width: 100%;
z-index: 999;
}
.mega-menu a {
color: #fff;
text-decoration: none;
font-size: 1rem;
display: block;
margin-bottom: 10px;
}
.navbar-nav > li:hover .mega-menu {
display: block;
}
.navbar-nav > li.active {
background-color: #444;
}
.navbar-nav > li.active .mega-menu {
display: block;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="navbar-title">Mega Menu 示例</div>
<ul class="navbar-nav">
<li><a href="#">菜单项 1</a>
<div class="mega-menu">
<a href="#">子菜单项 1</a>
<a href="#">子菜单项 2</a>
<a href="#">子菜单项 3</a>
<a href="#">子菜单项 4</a>
</div>
</li>
<li><a href="#">菜单项 2</a></li>
<li><a href="#">菜单项 3</a>
<div class="mega-menu">
<a href="#">子菜单项 1</a>
<a href="#">子菜单项 2</a>
<a href="#">子菜单项 3</a>
<a href="#">子菜单项 4</a>
</div>
</li>
<li><a href="#">菜单项 4</a></li>
<li><a href="#">菜单项 5</a></li>
</ul>
</nav>
<script>
var navItems = document.querySelectorAll('.navbar-nav > li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
this.classList.toggle('active');
});
}
</script>
</body>
</html>总结
以上两种方式都可以应对多层级导航条问题，前者通过折叠菜单来最简化导航条，在移动设备上更加友好；后者则推崇以 Mega Menu 的方式来应对多层级导航条问题。
在开发过程中，我们需要不断地尝试新的解决方案来找到最适合自己的方式，以便为用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653ef24c7d4982a6eb856acc