Drawer nav

by adamh

HTML

<script src="http://ascott1.github.io/bigSlide.js/js/bigSlide.js"></script>
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/latest/normalize.css">
<div class="page push">
    <a href="#menu" class="menu-link">&#9776;</a>
    <h1>Page content</h1>
</div>
<nav id="menu" class="panel" role="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">The Ballad of El Goodo</a></li>
        <li><a href="#">Thirteen</a></li>
        <li><a href="#">September Gurls</a></li>
        <li><a href="#">What's Going Ahn</a></li>
    </ul>
</nav>

CSS

body {
    overflow-x: hidden;
}

.panel {
    position: fixed;
    left: -15.625em; /*left or right and the width of your navigation panel*/
    width: 15.625em; /*should match the above value*/
    background: #444;
    color: white;
}

.panel a {
    color: white;
    text-decoration: none;
}
.panel a:hover {
    text-decoration: underline;
}

.push {
    position: relative;
}

JavaScript

$('.menu-link').bigSlide();