HTML+CSS 响应式侧边栏菜单

最新推荐文章于 2024-07-18 20:18:47 发布

耀南.

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量114

点赞数 2

分类专栏：前端好玩炫酷的动画小案例文章标签： html css 前端

本文链接：https://blog.csdn.net/YN2000609/article/details/140022536

版权

前端好玩炫酷的动画小案例专栏收录该内容

68 篇文章 9 订阅

订阅专栏

效果演示

实现了一个响应式的侧边栏菜单，当用户点击菜单按钮时，菜单会从左侧滑出，同时页面内容会向右移动，展示菜单选项。菜单选项包括一个头像和用户名，以及其他的菜单项，当用户将鼠标悬停在菜单项上时，菜单项会高亮显示。这段代码使用了CSS的flex布局和过渡效果，以及JavaScript的事件监听来实现菜单的响应式效果。

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式侧边栏菜单</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./07-响应式侧边栏菜单.css">
</head>

<body>
    <div class="navbar">
        <input type="checkbox" id="checkbox">
        <label for="checkbox">
            <i class="fa fa-bars" aria-hidden="true"></i>
        </label>
        <ul>
            <li>
                <img src="../resource/IMAGES/若冰.png" alt="">
                <span>欢迎您！管理员</span>
            </li>
            <li>
                <a href="javascript:void(0)">
                    <i class="fa fa-home" aria-hidden="true"></i>
                    <span>后台首页</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)">
                    <i class="fa fa-sitemap" aria-hidden="true"></i>
                    <span>商品列表</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)">
                    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                    <span>用户列表</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)">
                    <i class="fa fa-shopping-bag" aria-hidden="true"></i>
                    <span>订单列表</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)">
                    <i class="fa fa-th-large" aria-hidden="true"></i>
                    <span>功能列表</span>
                </a>
            </li>
        </ul>
        <div class="main">
            内容区
        </div>
    </div>
</body>

</html>

* {
    margin: 0; /* 设置所有元素的外边距为0 */
    padding: 0; /* 设置所有元素的内边距为0 */
}
body {
    overflow: hidden; /* 隐藏页面滚动条 */
}
.navbar {
    position: relative; /* 设置导航栏相对定位 */
    width: 100vw; /* 设置导航栏宽度为视口宽度 */
    display: flex; /* 使用弹性布局 */
}
.main {
    font-size: 40px; /* 设置主要内容的字体大小 */
    font-weight: bold; /* 设置主要内容的字体粗细 */
    flex: 1; /* 设置主要内容弹性伸缩 */
    height: calc(100vh - 43px); /* 计算主要内容高度 */
    position: relative; /* 设置主要内容相对定位 */
    top: 43px; /* 使主要内容距离顶部导航栏高度 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
#checkbox {
    display: none; /* 隐藏复选框 */
}
.navbar label {
    position: absolute; /* 设置标签绝对定位 */
    top: 0; /* 距离顶部0像素 */
    left: 70px; /* 距离左侧70像素 */
    width: 100%; /* 宽度100% */
    height: 43px; /* 高度43像素 */
    font-size: 30px; /* 字体大小30像素 */
    color: #5a738e; /* 字体颜色 */
    background-color: #ededed; /* 背景颜色 */
    padding-left: 20px; /* 左内边距20像素 */
    border: 1px solid #d9dee4; /* 边框样式 */
    cursor: pointer; /* 鼠标指针样式为手型 */
    transition: all 0.5s; /* 动画过渡效果 */
}
.navbar ul {
    list-style: none; /* 移除列表样式 */
    width: 70px; /* 宽度70像素 */
    height: 100vh; /* 高度100%视口高度 */
    background-color: #2a3f54; /* 背景颜色 */
    transition: all 0.5s; /* 动画过渡效果 */
    overflow: hidden; /* 内容溢出隐藏 */
}
.navbar ul li {
    height: 70px; /* 高度70像素 */
    margin-bottom: 10px; /* 下外边距10像素 */
}
.navbar ul li:first-child {
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    padding: 0 10px; /* 上下内边距0，左右内边距10像素 */
}
.navbar ul li:first-child img {
    width: 50px; /* 图片宽度50像素 */
    height: 50px; /* 图片高度50像素 */
    border-radius: 50%; /* 图片圆角 */
}
.navbar ul li:first-child span {
    color: #fff; /* 字体颜色为白色 */
    white-space: nowrap; /* 不换行显示 */
    padding-left: 10px; /* 左内边距10像素 */
    display: none; /* 初始隐藏 */
}
.navbar ul li a {
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    flex-direction: column; /* 垂直排列 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    color: #d1d1d1; /* 字体颜色 */
    text-decoration: none; /* 文本无下划线 */
}
.navbar ul li a i {
    font-size: 25px; /* 图标字体大小 */
    margin-bottom: 10px; /* 下外边距10像素 */
}
.navbar ul li a span {
    font-size: 12px; /* 字体大小12像素 */
    white-space: nowrap; /* 不换行显示 */
}
.navbar ul li a:hover {
    color: #fff; /* 鼠标悬停时字体颜色为白色 */
    background-color: #35495d; /* 鼠标悬停时背景颜色 */
}
.navbar input:checked+label {
    left: 200px; /* 复选框选中时标签左移200像素 */
}
.navbar input:checked~ul {
    width: 200px; /* 复选框选中时列表宽度变为200像素 */
}
.navbar input:checked~ul li:first-child {
    justify-content: flex-start; /* 复选框选中时第一个列表项左对齐 */
}
.navbar input:checked~ul li:first-child span {
    display: block; /* 复选框选中时第一个列表项显示 */
}
.navbar input:checked~ul li a {
    flex-direction: row; /* 复选框选中时列表项水平排列 */
    justify-content: flex-start; /* 列表项左对齐 */
}
.navbar input:checked~ul li a i {
    font-size: 18px; /* 复选框选中时图标字体大小 */
    margin: 0 15px 0 30px; /* 图标外边距 */
}
.navbar input:checked~ul li a span {
    font-size: 14px; /* 复选框选中时字体大小 */
}

耀南.

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML+CSS 响应式侧边栏菜单

实现了一个响应式的侧边栏菜单，当用户点击菜单按钮时，菜单会从左侧滑出，同时页面内容会向右移动，展示菜单选项。菜单选项包括一个头像和用户名，以及其他的菜单项，当用户将鼠标悬停在菜单项上时，菜单项会高亮显示。这段代码使用了CSS的flex布局和过渡效果，以及JavaScript的事件监听来实现菜单的响应式效果。
复制链接

扫一扫