<!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. virtualbox 安装windows系统的一些问题

    今天总结一下,使用virtualbox安装windows系统的一些问题. 安装的是Ghost的系统,正版系统也可以参考. 首先本人的机器原系统是ubuntu 16.04 LTS x64 1.win7或 ...

  2. 认识javascript作用域

    JavaScript的作用域链 这是一个非常重要的知识点了,了解了JavaScript的作用域链的话,能帮助我们理解很多‘异常’问题. 下面我们来看一个小例子,前面我说过的声明提前的例子. var n ...

  3. (转)Spring读书笔记-----使用Spring容器（二）

    一.使用ApplicationContext 前面介绍了,我们一般不会使用BeanFactory实例作为Spring容器,而是使用ApplicationContext实例作为容器,它增强了BeanFa ...

  4. （六）Struts2 国际化

    所有的学习我们必须先搭建好Struts2的环境(1.导入对应的jar包,2.web.xml,3.struts.xml) 第一节:国际化简介 国际化(Internationlization),通俗地讲, ...

  5. vi 替换字符串

    假如说我想把该文件中所有的Web替换成SOR_SYS,那么我们可以用vi打开该文件,然后按一下: 你的命令行的最后一行会出现:,这个时候就是提醒你输入替换的命令 %s/Web/SOR_SYS/g 按一 ...

  6. artDialog.js的使用

    开发项目中用到了artDialog.js,从而专门学习一下如何配置和使用. 一.artDialog是什么 artDialog是一个精巧的web对话框组件,压缩后只有十多KB,并且不依赖其他框架. 二. ...

  7. 编写类String的构造函数、拷贝构造函数、析构函数和赋值函数

    一.题目: class String { public: String(const char *str = NULL); // 普通构造函数 String(const String &othe ...

  8. "The request sent by the client was syntactically incorrect ()"问题定位及解决：

    Spring MVC "The request sent by the client was syntactically incorrect ()"解决办法: 把spring日志级 ...

  9. 深入了解jquery中的键盘事件

    很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...

  10. .net 对配置文件内容的操作

    配置文件分为两种 :一种是winform应用程序的配置文件, 一种是web的配置文件. 两种配置文件最大的区别是web的配置文件更新之后会时时更新, 应用程序的配置文件不会实时更新. 更新应用程序的配 ...