Drawer 1 - Original (designcouch.com)

Original Source: http://designcouch.com/home/why/2014/04/23/pure-css-drawer-menu

by Ryan Perez

HTML

<div id="drawer">
    <ul>
        <li><a href="demos/pure-css-drawer-menu.html#">Menu Item</a> 
        </li>
        <li><a href="demos/pure-css-drawer-menu.html#">Menu Item</a>
        </li>
        <li><a href="demos/pure-css-drawer-menu.html#">Menu Item</a>
        </li>
        <li><a href="demos/pure-css-drawer-menu.html#">Menu Item</a>
        </li>
    </ul>
</div>
<div id="page-content">
    <p> <a href="http://designcouch.com/home/why/2014/04/23/pure-css-drawer-menu/">Original Source</a> | <a href="http://designcouch.com/demos/pure-css-drawer-menu.html">Demo</a>

    </p>
    <p>This version has the trigger somewhere else. </p>
        <p>It doesnt work because the selector is expecting the #drawer-toggle:checked to be next to #drawer. LAME.</p>
    <br>
    <div class="trigger">
        <input type="checkbox" id="drawer-toggle" name="drawer-toggle" />
        <label for="drawer-toggle" id="drawer-toggle-label">Trigger</label>
    </div>
</div>

CSS

* {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -o-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-transition: .25s ease-in-out;
     -moz-transition: .25s ease-in-out;
     -o-transition: .25s ease-in-out;
     transition: .25s ease-in-out;
     -webkit-text-size-adjust: none;
 }
 /* Makes sure that everything is 100% height */
 html, body {
     height: 100%;
     overflow: hidden;
     font-family:sans-serif;
     margin: 0;
     padding: 0;
 }
 /* gets the actual input out of the way; we're going to style the label instead */
 #drawer-toggle {
     position: absolute;
     opacity: 0;
 }
 #drawer-toggle-label {
     border:1px solid #ccc;
     background-color: #e5e5e5;
     z-index: 1;
     padding: 10px;
 }
 /* drawer menu pane - note the 0px width */
 #drawer {
     position: fixed;
     top: 0;
     left:-300px;
     height: 100%;
     width: 300px;
     background: #2f2f2f;
     overflow-x: hidden;
     overflow-y: scroll;
     padding: 20px;
     -webkit-overflow-scrolling: touch;
 }
 /* actual page content pane */
 #page-content {
     width: 100%;
     height: calc(100% - 50px);
     overflow-x:hidden;
     overflow-y:scroll;
     -webkit-overflow-scrolling: touch;
     padding: 20px;
 }
 /* checked styles (menu open state) */
 #drawer-toggle:checked ~ #drawer-toggle-label {
     height: 100%;
     width: calc(100% - 300px);
     background: lightblue;
 }
 #drawer-toggle:checked ~ #drawer {
     left:0;
 }
 #drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~ header {
     left: 300px;
 }
 #drawer-toggle:checked ~ #page-content {
     margin-left: 300px;
 }
 /* Drawer styles */
 #drawer ul {
     list-style-type:none;
 }
 #drawer ul a {
     display:block;
     padding:10px;
     color:#c7c7c7;
     text-decoration:none;
 }
 #drawer ul a:hover {
     color:white;
 }
 /* Responsive MQ */
 @media all and (max-width:350px) {
     #drawer-toggle:checked ~ #drawer-toggle-label {
        ...