使用css做出折叠导航栏的功能
实现原理：
利用隐藏的复选框记录点击状态，通过CSS选择器 :checked 和相邻兄弟选择器控制导航菜单的显示/隐藏。
html代码如下：
<!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>
页面如下：
