CSS3使用标签控制画布外导航栏的隐藏和显示

Off-canvas navigation tab, 点击汉堡标签来隐藏或显示左边栏。

边栏，导航，界面组件

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3304
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/**
 * Full height containers
 */

html,
body {
    height: 100%;
    margin: 0;
}
/**
 * Offcanvas navigation
 * 1. Arbitrary width, feel free to adapt
 * 2. Full height nav
 * 3. Off-canvas
 * 4. Responsible for opening/closing animation
 */

.nav {
    width: 350px;
    /* 1 */
    
    position: fixed;
    top: 0;
    /* 2 */
    
    bottom: 0;
    /* 2 */
    
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    /* 3 */
    
    background: deepskyblue;
    -webkit-transition: 0.15s;
    transition: 0.15s;
    /* 4 */
}
/**
 * Button thingie
 * 1. Absolutely positioning
 * 2. ... on the right side of the nav (make sure overflow is visible)
 */

.nav-toggle {
    position: absolute;
    /* 1 */
    
    left: 100%;
    /* 2 */
    
    top: 1em;
    padding: 0.5em;
    background: inherit;
    color: white;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
}
/**
 * Checkbox responsible for the toggle hack
 * Hidden, no matter what
 */

#nav-toggle {
    position: absolute;
    clip: rect(0 0 0 0);
    opacity: 0;
}
/**
 * When checkbox is checked, open the nav
 */

#nav-toggle:checked ~ .nav {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
/**
 * Rotate the label when nav is opened
 * Purely aesthetic
 */

#nav-toggle:checked ~ .nav > .nav-toggle {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
/**
 * Fixing a bug in Android <= 4.1.2
 * See: http://timpietrusky.com/advanced-checkbox-hack
 */

body {
    -webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
    to {
        padding: 0;
    }
}

HTML

Off-canvas navigation tab, 点击汉堡标签来隐藏或显示左边栏。

边栏，导航，界面组件

编辑器支持Emmet

快捷键

Off-canvas navigation tab, 点击汉堡标签来隐藏或显示左边栏。

边栏，导航，界面组件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：