<!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切换左侧菜单的更多相关文章

  1. 支持多种浏览器的纯css下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  3. 纯CSS二级纵向菜单

    纯CSS二级纵向菜单 <body> <div class="divda"> <div class="nav"> <ul ...

  4. web中用纯CSS实现筛选菜单

    web中用纯CSS实现筛选菜单 本文我们来用纯css实现像淘宝宝贝筛选菜单那样的效果,例子虽然没有淘宝那样强大,不过原理差不多,如果花点心思也可以实现和淘宝一样的. 内容过滤是一个在Web上常见的一个 ...

  5. 23.纯 CSS 创作一个菜单反色填充特效

    原文地址:https://segmentfault.com/a/1190000014876348 HTML代码: <nav> <ul> <li><span&g ...

  6. 如何用纯 CSS 创作一个菜单反色填充特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 ...

  7. 前端每日实战：23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...

  8. 纯CSS弹出菜单（不支持IE6.0以下）

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  9. 纯css下拉菜单的制作

    通过观察下拉菜单的过程,发现有两种状态,一种是鼠标没有hover时,一种是鼠标hover时. 主菜单hover时,显示子菜单:主菜单没有hover时,不显示子菜单 <!DOCTYPE html& ...

随机推荐

  1. JS实例（二）

    一:注册页面 包括非空验证.邮箱验证.密码相等验证,在输入之前提示文字,获得焦点时文字清除颜色变化,输入正确显示正确图片,错误显示错误图片,所有验证通过才可提交,重置会重置回初始模样. 效果图如下: ...

  2. java命名规则

    java变量命名是不能以#开头的.Java变量的命名规则如下:$ .字母.下划线开头都行,不能以数字开头 后面的可以是数字.字母.下划线, 其他的命名方式,都会报错,且不能运行. 以字母.下划线( _ ...

  3. iOS开源项目集合一

    http://www.th7.cn/Program/IOS/201308/146283.shtml

  4. 1 Yoga3 系统装机总结.

    1- Yoga 3 存在串口驱动不安装, 那么触摸屏不能用的情况, 打破了以往对触摸屏-"纯外设" 的设想, 与系统有关!!! 2- 系统安装总结: 1) BIOS中设置UEFI ...

  5. Oracle 日期类型timestamp(时间戳)和date类型使用

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  6. jQuery 遍历后代

    后代是子.孙.曾孙等等. 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代. 向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() f ...

  7. Android中为APP创建快捷方式的原理（自己的理解）

    我们首先来看Android中为APP创建快捷方式的原理: 从图上可以看出,Android大致分7步完成快捷方式的创建: 第一步:Android系统的launcher程序会调用它的pickShortcu ...

  8. 纯JS写出日历

    封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" va ...

  9. 注册表和ODBC

         注册表使用的是树型体系结构,树中的每个结点称键.每个键也可以包含其他的键或子键.它允许进一步的分支,也即为值,它用来存储有效的数据.在注册表中,注册表用键来组织数据,一个键中的值用它们的名来 ...

  10. Shortcut Collapse project or projects in the Solution Explorer Microsoft Visual Studio 2008

    The standard windows keyboard shortcuts for expanding and collapsing treeviews are: Numeric Keypad * ...