纯 HTML 和 CSS 实现折叠菜单栏

实现的效果如下：

当页面加载时，复选框默认是选中的，菜单栏会处于折叠状态。点击菜单图标时，复选框取消选中，菜单栏将展开；再次点击，菜单栏会重新折叠。

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单栏Demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <!-- 默认选中复选框 -->
        <input type="checkbox" id="toggler" checked>
        <label for="toggler" class="fas fa-bars">☰ Menu</label>
        <nav class="navbar">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#products">Products</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>
</body>
</html>

CSS 部分

header {
    position: relative;
}

.navbar {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* 动画效果 */
}

/* 当复选框未被选中时，菜单显示 */
#toggler:not(:checked) ~ .navbar {
    max-height: 500px; /* 假设最大高度，调整为实际菜单高度 */
}

/* 菜单项样式 */
.navbar a {
    display: block;
    padding: 10px;
    text-decoration: none;
    background: #333;
    color: #fff;
}

label {
    cursor: pointer;
    font-size: 24px;
}

使用 CSS 的 max-height 属性来控制菜单栏的高度，并通过 transition 属性让高度的变化更加平滑。复选框和菜单栏的关联通过 CSS 伪类 :checked 来实现。当复选框选中时，菜单栏收起；取消选中时，菜单栏展开。

相关文章：