当前位置：首页 > news >正文

使用css做出折叠导航栏的功能

news 来源：原创 2025/6/23 13:55:31

实现原理：

利用隐藏的复选框记录点击状态，通过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>