<!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. Spring声明式事务（xml配置事务方式）

    Spring声明式事务(xml配置事务方式) >>>>>>>>>>>>>>>>>>>& ...

  2. wsdl自动生成Java代码，根据wsdl生成Java代码

    wsdl自动生成Java代码,根据wsdl生成Java代码 >>>>>>>>>>>>>>>>>&g ...

  3. Tran 与 Goto try catch raiserror等浅显应用

    ---- Tran 事务 以及 Goto 的浅显应用 IF OBJECT_ID('tempdb..#tmptab','U') IS NOT NULL DROP TABLE #tmptab GO CRE ...

  4. Sql Server 2008 还原数据库 3154错误

    sqlserver2008还原数据库时出现了3154错误,具体错误信息如下: 错误信息 The backup set holds a backup of a database other than t ...

  5. MySQL Workbench 6.3 CE 不显示MySql、infomation_schema等数据库

    MySQL Workbench 6.3 CE 不显示MySql.infomation_schema等数据库 通过修改偏好设置可显示: 1.Edit-->Preferences....-----& ...

  6. AngularJS track by $index引起的思考

    今天写了一段程序,只是一个简答的table数据绑定,但是绑定select的数据之后,发现ng-change事件失去了效果,不知道什么原因. 主要用到的代码如下: <div id="ri ...

  7. CSS 组合选择符

    CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) ...

  8. WinpCap 使用线程发数，明明发了，返回值0是OK的啊，怎么抓包看不到，难道不支持多线程。。。

    if (!m_adapterHandle){    return false;}int rst = pcap_sendpacket((pcap_t*)m_adapterHandle,data ,dat ...

  9. （转）log4j日志级别设置成DEBUG时输出Html代码等问题：

    log4j日志级别设置成DEBUG时输出Html代码等问题: 问题: log4j日志级别设置成DEBUG时会输出很多信息,包括一些Html代码 解决方案: log4j的控制是树形,所以在log4j.p ...

  10. oracle sqlldr控制文件模板

    Sqlldr userid=lgone/tiger control=a.ctl LOAD DATA INFILE 't.dat' // 要导入的文件 // INFILE 'tt.date' // 导入 ...