Slide out css menu

by jacobwsmith

HTML

<div class="nave">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
    </ul>
</div>
<div class="content-overlay"></div>
<div class="content"> <a class="showNav">Show Nav</a>

     <h1>Some Title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo bibendum ipsum, id tincidunt purus eleifend a. Curabitur metus turpis, rhoncus sit amet diam vitae, dapibus auctor est. Sed gravida commodo aliquam. Nulla varius facilisis metus, nec maximus tortor commodo vel. Aliquam ac sodales orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas lacinia nec enim sit amet facilisis. Ut sit amet ante sit amet augue mollis pretium. Aenean tincidunt dui eget sem aliquet pretium. Aenean sit amet euismod risus. Nullam faucibus diam ac nisi iaculis, vitae semper sem efficitur. Mauris id rutrum dui. Pellentesque elementum odio et porttitor bibendum. Nam tempor metus in facilisis tempor.</p>
    <p>Aliquam posuere leo non lacus sollicitudin, vitae vulputate odio suscipit. Nulla ac malesuada dolor. Sed a feugiat quam. Maecenas quam mauris, efficitur non luctus at, vulputate ac nibh. Phasellus eleifend posuere velit, ac porta lectus rhoncus et. Praesent sodales vehicula lectus ac cursus. Suspendisse quis finibus sapien, eget congue eros. Pellentesque sed nunc rhoncus, convallis arcu a, molestie ipsum. Vivamus vehicula luctus enim, sit amet fringilla tortor tempor et. Morbi posuere eget justo a condimentum.</p>
    <p>Nulla risus leo, scelerisque id tellus eget, dictum finibus mauris. Praesent ut arcu ac urna commodo rhoncus a a dolor. Pellentesque vel felis vitae dolor ullamcorper sollicitudin. Sed est nisi, cursus eget rhoncus ut, tempus eu leo. Etiam posuere et lorem a finibus. Nunc mollis rhoncus dui, sed lobortis ligula cursus nec. Vestibulum purus justo, sodales facilisis neque sed, suscipit egestas quam. Sed justo neque, elementum in dui non,...

CSS

a {
    color: blue;
    text-decoration: underline;
}
a:hover {
    cursor: pointer;
}
.hideNav {
    position: absolute;
}
.content, .content-overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #ccc;
    transform: scale3d(1, 1, 1);
    -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
    -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
    -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
    transition: all 400ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
}
.content-overlay {
    background-color: transparent;
    z-index: 2;
    display: none;
}
.content-overlay:hover {
    cursor: pointer;
}
.out {
    display: block;
    -webkit-transform: translate3d(40%, 0, 0) scale3d(0.85, 0.85, 1);
    -moz-transform: translate3d(40%, 0, 0) scale3d(0.85, 0.85, 1);
    -ms-transform: translate3d(40%, 0, 0) scale3d(0.85, 0.85, 1);
    -o-transform: translate3d(40%, 0, 0) scale3d(0.85, 0.85, 1);
    transform: translate3d(40%, 0, 0) scale3d(0.85, 0.85, 1);
}

JavaScript

$(document).ready(function () {

    $('.showNav').click(function () {
        $('.content').addClass('out');
        $('.content-overlay').addClass('out');
    })
    $('.content-overlay').click(function () {
        $('.content').removeClass('out');
        $('.content-overlay').removeClass('out');
    })

    // TODO: if esc pushed then close menu

});