HTML+CSS 响应式侧边栏菜单

最新推荐文章于 2024-07-31 17:45:09 发布

若冰说

最新推荐文章于 2024-07-31 17:45:09 发布

阅读量997

点赞数 19

分类专栏：若冰说CSS css 文章标签： html css 前端若冰说CSS

本文链接：https://blog.csdn.net/weixin_72553980/article/details/139362128

版权

本文介绍如何实现一个响应式的侧边栏菜单，菜单在点击按钮时从左侧滑出，内容区随之移动。利用CSS flex布局、过渡效果和JavaScript事件监听，菜单项在鼠标悬停时高亮显示。同时，详细解析了代码实现过程，涉及body的overflow属性、导航栏和主要内容区域的样式设置、以及复选框控制菜单显示隐藏的逻辑。

摘要由CSDN通过智能技术生成

效果演示

07-响应式侧边栏菜单.gif

实现了一个响应式的侧边栏菜单，当用户点击菜单按钮时，菜单会从左侧滑出，同时页面内容会向右移动，展示菜单选项。菜单选项包括一个头像和用户名，以及其他的菜单项，当用户将鼠标悬停在菜单项上时，菜单项会高亮显示。这段代码使用了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>