实现原理:
利用隐藏的复选框记录点击状态,通过CSS选择器 :checked 和相邻兄弟选择器控制导航菜单的显示/隐藏。
html代码如下:
javascript
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 隐藏复选框 */
#nav-toggle { display: none; }
/* 汉堡菜单样式 */
.toggle-label {
display: block;
cursor: pointer;
padding: 15px;
background: #333;
color: white;
font-size: 24px;
}
/* 导航菜单 - 默认隐藏 */
.nav-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
background: #f1f1f1;
}
/* 当复选框选中时显示菜单 */
#nav-toggle:checked ~ .nav-menu {
max-height: 300px; /* 需大于菜单总高度 */
}
</style>
</head>
<body>
<!-- 使用label关联隐藏的checkbox -->
<label for="nav-toggle" class="toggle-label">☰</label>
<input type="checkbox" id="nav-toggle">
<!-- 导航菜单 -->
<nav class="nav-menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</nav>
</body>
</html>
页面如下:
