opposite menu slide test

by Dru Dro

HTML

<input id="call-menu" type="checkbox"/>
<label for="call-menu">MENU</label>
<div id="menu"></div>

CSS

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}
input#call-menu {
    display: none;
    /*прячем чекбокс*/
}
label[for="call-menu"] {
    /*стилизуем лэйбл под кнопку*/
    display: block;
    position: fixed;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fefefe;
    background: #454545;
    margin: 0;
    padding: 0;
}
#menu {
    position: fixed;
    width: 400px;
    height: 100%;
    background: #454545;
    right: -400px; /*задвигаем меню вправо*/
    transition: all .2s ease-in-out;
}
/*нажимаем на лэйбл (при этом чекбокс становится checked - тут-то мы и выдвигаем менюшку)*/
 input#call-menu:checked ~ #menu {
    right: 0; /*выдвинули менюшку. При следующем нажатии на лэйбл, чекбокс становится unchecked - и div#menu возвращается в прежнее состояние*/
}