纯css切换左侧菜单

时间：2015-07-22 18:31:38 阅读：170 评论：0 收藏：0 [点我收藏+]

标签：

技术分享

<!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>

纯css切换左侧菜单

标签：

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行