Off-canvas Playground

WTF off-canvas

by Ukjin Yang

HTML

<a href="#" onclick="offcanvas()">Off-canvas</a>
<div id="dummy"></div>
<a href="#" onclick="offcanvas()">Off-canvas</a>
<div id="dummy"></div>
<a href="#" onclick="offcanvas()">Off-canvas</a>
<div id="dummy"></div>
<a href="#" onclick="offcanvas()">Off-canvas</a>
<div id="off_canvas">
    <ul>
        <li><a href="#">메뉴 1</a></li>
        <li><a href="#">메뉴 2</a></li>
        <li><a href="#">메뉴 3</a></li>
        <li><a href="#">메뉴 4</a></li>
        <li><a href="#">메뉴 5</a></li>
    </ul>
</div>

CSS

#dummy{
    height:640px;
}
#off_canvas{
    position:fixed;overflow:auto;display:none;
    top:0;bottom:0;left:0;width:50%;background-color:gray;
}
#off_canvas.active{
    display:block;
}
html{
    background-color:yellow;
}
html.active{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

JavaScript

function offcanvas(){
    var oc=document.getElementById('off_canvas'),
        root=document.documentElement;
    if(oc.className!='active'){
        oc.className=root.className='active';
    }else{
        oc.className=root.className='';
    }
}
window.onclick=offcanvas;