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

实现原理:

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

页面如下:

相关推荐
超人不会飛11 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦14 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想17 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z25 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982431 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴36 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干39 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗41 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder1 小时前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder1 小时前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github