<!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. c# 格式化百分比

    代码示例: <%#Eval("total").ToString() == "0" ? "00.00%" : (Convert.ToDe ...

  2. CI框架篇之控制器篇--设置路由（1）

    CodeIgniter 定义默认控制器 当你的网站不存在某个URI 或者 用户直接从根目录访问的时候,CodeIgniter 会加载默认控制器. 打开 application/config/route ...

  3. CoreAnimation4-隐式动画和显式动画

    事务 Core Animation基于一个假设,说屏幕上的任何东西都可以(或者可能)做动画.动画并不需要你在Core Animation中手动打开,相反需要明确地关闭,否则他会一直存在. 当你改变CA ...

  4. [Introduction to programming in Java 笔记] 1.3.9 Factoring integers 素因子分解

    素数 A prime is an integer greater than one whose only positive divisors are one and itself.整数的素因子分解是乘 ...

  5. new、delete用法（一）

    第一部分:new的使用: #define DEBUG_NEW new(THIS_FILE, __LINE__)解释 THIS_FILE:表示当前类所处的文件名: __LINE__:表示分配内存操作所在 ...

  6. php 微信3 自定义菜单

    <pre name="code" class="php"><pre name="code" class="htm ...

  7. Android 6.0 Permission权限与安全机制

    Marshmallow版本权限修改 android的权限系统一直是首要的安全概念,因为这些权限只在安装的时候被询问一次.一旦安装了,app可以在用户毫不知晓的情况下访问权限内的所有东西,而且一般用户安 ...

  8. jquery 左侧展开栏目

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

  9. js获取星期几

    function getweek(time) { /*显示星期*/ /*time为date格式*/ var str; var d = time.getDay(); switch (d) { case ...

  10. Android Binder机制简单了解

    Binder -- 一种进程间通信(IPC)机制, 基于OpenBinder来实现 毫无疑问, 老罗的文章是不得不看的 Android进程间通信(IPC)机制Binder简要介绍和学习计划 浅谈Ser ...