<!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. JMeter对Selenium自动化代码进行压测

    原文转载:http://www.blogjava.net/qileilove/archive/2014/06/05/414423.html 准备工作: 将文件selenium-server-stand ...

  2. Java SpringMvc+hibernate架构中，调用Oracle中的sp，传递数组参数

    一.问题 我们调用数据,大都是可以直接获取表中的数据,或者用复杂点的sql语句组成的.但是,有时候,当这样达不到我们要的全部数据的时候,这时,我们就用到了存储过程[sp],如果sp需要参数是数组的话, ...

  3. php 解决大流量网站访问量问题

    当一个网站发展为知名网站的时候(如新浪,腾讯,网易,雅虎),网站的访问量通常都会非常大,如果使用虚拟主机的话,网站就会因为访问量过大而引起 服务器性能问题,这是很多人的烦恼,有人使用取消RSS等错误的 ...

  4. TensorFlow和最近发布的slim

    笔者将和大家分享一个结合了TensorFlow和最近发布的slim库的小应用,来实现图像分类.图像标注以及图像分割的任务,围绕着slim展开,包括其理论知识和应用场景. 之前自己尝试过许多其它的库,比 ...

  5. SVN遇到Can't convert string from 'UTF-8' to native encoding

    刚配好mysql,svn co代码的时候遇到问题 svn: Can't convert string from 'UTF-8' to native encoding: svn: platform/co ...

  6. 把一个string串的所有小写字母转成大写字母的例子来看看看全局函数的使用

    今天写了一个小例子,把字符串里面的所有小写字母全部转换成大写字母http://blog.csdn.net/yasaken/article/details/7303903 1 #include &quo ...

  7. UIActionViewController 详解 iOS8

    iOS8推出了几个新的“controller”,主要是把类似之前的UIAlertView变成了UIAlertController,这不经意的改变,貌似把我之前理解的“controller”一下子推翻了 ...

  8. java web 代码

    原 30套JSP网站源代码合集 IT小白白 发布时间: 2012/12/28 14:30 阅读: 272 收藏: 3 点赞: 0 评论: 0 JSP技术是以Java语言作为脚本语言的,JSP网页为整个 ...

  9. 完全靠代码生成的ios版hello,world

    xcode5 运行在iphone retain 3.5" 模式下(即对应iphone4, iphone4s)需要开启ARC // // main.m // Hello // // Creat ...

  10. pragma指令简介

    整理日:2015年3月12日 资源来来自己网络 在编写程序的时候,我们经常要用到#pragma指令来设定编译器的状态或者是指示编译器完成一些特定的动作. 下面介绍了一下该指令的一些常用参数,希望对大家 ...