纯css切换左侧菜单

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body,
        html {
            overflow-x: hidden;
        }
        .sidebar {
            -webkit-transition: all .3s ease-in-out;
        }
        .sidebar-toggle,
        .wrap {
            -webkit-transition: -webkit-transform .3s ease-in-out;
        }
        .sidebar-checkbox {
            display: none;
        }
        .wrap {
            padding: 50px 8px;
        }
        .sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            left: -200px;
            width: 200px;
            background: gray;
        }
        .sidebar-toggle {
            position: fixed;
            top: 8px;
            left: 8px;
            width: 30px;
            height: 30px;
            border-radius: 3px;
        }
        .sidebar-toggle span,
        .sidebar-toggle span:before,
        .sidebar-toggle span:after {
            position: absolute;
            width: 20px;
            height: 2px;
            background: green;
        }
        .sidebar-toggle span {
            top: 14px;
            left: 5px;
        }
        .sidebar-toggle span:before {
            content: '';
            left: 0;
            top: -7px;
        }
        .sidebar-toggle span:after {
            content: '';
            left: 0;
            top: 7px;
        }
        #sidebar-checkbox:checked~.sidebar,
        #sidebar-checkbox:checked~.sidebar-toggle,
        #sidebar-checkbox:checked~.wrap {
            -webkit-transform: translateX(200px);
        }
        #sidebar-checkbox:checked~.sidebar-toggle {
            background: green;
        }
        #sidebar-checkbox:checked~.sidebar-toggle span,
        #sidebar-checkbox:checked~.sidebar-toggle span:before,
        #sidebar-checkbox:checked~.sidebar-toggle span:after {
            background: white;
        }
    </style>
</head>
<body>
    <input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox">
    <div class="sidebar" id="sidebar">sidebar</div>
    <div class="wrap">wrap</div>
    <label for="sidebar-checkbox" class="sidebar-toggle">
        <span></span>
    </label>
</body>
</html>

相关阅读:
爬虫大作业
数据结构化与保存
使用正则表达式，取得点击次数，函数抽离
爬取校园新闻首页的新闻
网络爬虫基础练习
综合练习：词频统计
Hadoop综合大作业
理解MapReduce
熟悉HBase基本操作
熟悉常用的HBase操作

原文地址：https://www.cnblogs.com/jzm17173/p/4668067.html