Mobile Menu Example

by ZachWills

HTML

<div class="menu"> <a class="menu-item" href="#">Link</a>
 <a class="menu-item" href="#">Link</a>
 <a class="menu-item" href="#">Link</a>
 <a class="menu-item" href="#">Link</a>

</div>
<div class="page-wrap">
    <div class="content">
        <div class="button"><a href="#"></a>

        </div>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
    </div>
</div>

CSS

* {
    padding: 0;
    margin: 0;
    position: relative;
    -webkit-transition: left 0.25s ease-in-out;
    -moz-transition: left 0.25s ease-in-out;
    -o-transition: left 0.25s ease-in-out;
    -ms-transition: left 0.25s ease-in-out;
    transition: left 0.25s ease-in-out;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    width: 100%;
}
.content {
    padding: 20px;
}
.button {
    background: black;
    width: 25px;
    height: 25px;
    margin-bottom: 20px;
    cursor: pointer;
}
.menu {
    background: #666;
    padding: 20px;
    height: 100%;
    width: 150px;
    position: absolute;
    left: -150px;
}
.menu-item {
    display: block;
    padding: 10px;
    color: white;
    text-decoration: none;
}
.menu.menu-open {
    left: 0;
}
.page-wrap.menu-open {
    left: 150px;
}

JavaScript

$(".button").toggle(function () {
    $(".menu").addClass("menu-open");
    $(".page-wrap").addClass("menu-open");
}, function () {
    $(".menu-open").removeClass("menu-open");
});