Fashion mobile Facebook-like menu (CSS only)

Reproduce (simply) the famous dark-backgrounded left-sliding menu, as seen in the mobile Facebook application.

HTML

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, user-scalable=no">

<input type="checkbox" name="handler-left" class="handler" id="handler-left" onclick="null" />

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Our work</a></li>
        <li><a href="#" class="active">Our clients</a></li>
        <li><a href="#">Who are we ?</a></li>
        <li><a href="#">Get in touch</a></li>
    </ul>
</div>


<div id="wrapper">
    <p id="button">
        <label for="handler-left" id="left" href="#">← Open left</label>
    </p>
</div>

SCSS

$blue: #336c95;
$transitionSpeed: .5s;
$menuOffset: 80%;

html , body {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: "Helvetica", sans-serif;
    font-size: 15px;
    overflow: hidden;
}

#menu , #favorites {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: $menuOffset;
    z-index: 1;
    background: #333;
    overflow: auto;
    opacity: 0;
    -webkit-transition: opacity 0s $transitionSpeed;
    
    ul {
        display: block;
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    
        li a {
            display: block;
            padding: 10px;
            border-bottom: 1px solid #222;
            color: #fff;
            text-shadow: 0 1px 0 #000;
            font-weight: bold;
            text-decoration: none;
            box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
            background: -webkit-linear-gradient(rgba(255,255,255,.02) 0%, rgba(0,0,0,.1) 100%);
            background: -moz-linear-gradient(rgba(255,255,255,.02) 0%, rgba(0,0,0,.1) 100%);
    
            &.active {
                background-color: $blue;
            }
        }
    }
}

#favorites {
    left: auto;
    right: 0;
}

.handler {
    display: none;
    
    &#handler-right:checked {
        
        & ~ #favorites {
            opacity: 1;
            -webkit-transition: opacity 0s 0s;
            -moz-transition: opacity 0s 0s;
        }
        
        & ~ #wrapper {
            -webkit-transform: translate3D(-$menuOffset,0,0);
            -moz-transform: translate3D(-$menuOffset,0,0);
    
            #content {
                overflow: hidden;
            }
        }
    }
    
    &#handler-left:checked {
    
        & ~ #menu {
            opacity: 1;
            -webkit-transition: opacity 0s 0s;
            -moz-transition: opacity 0s 0s;
        }
    
        & ~ #wrapper {
            -webkit-transform: translate3D($menuOffset,0,0);
           ...

JavaScript

// Fixing iOS Safari "WTF" issue
// http://stackoverflow.com/questions/7358781/tapping-on-label-in-mobile-safari
$('label').click(function() {});