CSS only push-out menu

by moob

HTML

<input type="checkbox" id="nav-trigger" class="nav-trigger" />

<div id="nav">
    <label class="burger" for="nav-trigger">&#9776;</label><!-- consider #8801 -->
    <ul>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">This Thing</a></li>
        <li><a href="#">Another Thing</a><ul>
            <li><a href="#">Sub Item</a></li>
            <li><a href="#">This Thing</a></li>
            <li><a href="#">Sub Item</a></li>
            <li><a href="#">This Thing</a></li>
        </ul></li>
        <li><a href="#">Something Else</a></li>
        <li><a href="#">Kittens</a></li>
        <li><label for="nav-trigger">&#9776; &rarr; Close Menu</label></li>
    </ul>
</div>

<div id="main">
    <h1>CSS Push-out Menu</h1>
    
    <p>This push out menu uses a checkbox and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors">general sibling selectors</a> to determine if the menu is shown.</p>
    <p>At the time of writing this is untested but should be supported all modern browsers (ie9 up) and work on touch devices too. <=ie8 needs js to support css `:checked` selector. Selectivizr does this. (NOTE TO SELF: add Selectivizr or similar to this demo)</p>
    <p>Want the menu to be open on load? Just set <code>nav-trigger</code> input to <code>selected</code>.</p>
    
    <hr />
    
    <p>Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
<p>
Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
<p>
Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id...

CSS

*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif;}
body {overflow-x: hidden;}

/* #nav-trigger is a hidden input */
#nav-trigger {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    visibility:hidden;
}

/* The nav itself (off-screen by default) */
#nav {
    width: 300px;
    max-width:80%;
    height: 100%;
    position: absolute;
    top: 0;
    right:-300px;
    bottom: 0;
    z-index: 10;
    list-style: none;
    background: #111;
}

#nav label.burger {
    width:30px; 
    height:30px;
    display:block;
    position: absolute;
    top: 30px;
    left:-60px;
    color:#000;
    font-size:30px;
    line-height:30px;
    -webkit-font-smoothing:none;
    font-smoothing:none;
    font-weight:bold;
    cursor:pointer;
    transition: color 0.2s, transform 0.4s;
}
#nav label.burger:hover {
    color:#fff;
}
#nav ul {
    margin:0;
    padding:0;
    display:block;
    position:relative;
    height:100%;
    top:0;
    right:0;
    overflow:auto;
}
#nav li {
    display:block;
    position:relative;
    margin:1px 0;
    padding:0;
}
#nav li a, #nav li label {
    display: block;
    padding: 1em;
    background: #333;
    color: white;
    font-size:1.2em; line-height:1.2em;
    text-decoration: none;
    transition: color 0.2s, background 0.5s;
}
#nav li label {color:#999;}
#nav li a:hover, #nav li label:hover  {
    color: rgb(160,216,239);
    background: #444;
}


#nav ul ul {opacity:0.7; height:inherit; overflow:visible;}
#nav ul ul:before {
    content:"▼";
    -webkit-font-smoothing:none;
    font-smoothing:none;
    display:block;
    position:absolute;
    bottom:100%; right:0; 
    padding:1em;
    font-size:1.2em; line-height:1.2em;
    color:#fff;
    border-left:1px solid #111;
    z-index:999;
}

#nav ul ul:hover:before {color: rgb(160,216,239); background:#444; margin-bottom:1px;}

#nav ul ul...

JavaScript

/* add selectivizr or similar for <ie9 */