Fashion mobile Facebook-like menu (CSS only)

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

by Shidhin C R

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-right" class="handler" id="handler-right" onclick="null" />
<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="favorites">
    <ul>
        <li><a href="#">Fav #1</a></li>
        <li><a href="#">Fav #2</a></li>
        <li><a href="#" class="active">Fav #3</a></li>
        <li><a href="#">Fav #4</a></li>
        <li><a href="#">Fav #5</a></li>
        <li><a href="#">Fav #6</a></li>
        <li><a href="#">Fav #7</a></li>
        <li><a href="#">Fav #8</a></li>
        <li><a href="#">Fav #9</a></li>
        <li><a href="#">Fav #10</a></li>
        <li><a href="#">Fav #12</a></li>
        <li><a href="#">Fav #13</a></li>
        <li><a href="#">Fav #14</a></li>
        <li><a href="#">Fav #15</a></li>
        <li><a href="#">Fav #16</a></li>
        <li><a href="#">Fav #17</a></li>
        <li><a href="#">Fav #18</a></li>
    </ul>
</div>

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

    <div id="content">
        
        <p>Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis...

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() {});