HTML+CSS 响应式侧边栏菜单

效果演示

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>