Navigation

by Brett Miley

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.ui.js"></script>
<div class="bm-sitewrap">
    <div class="bm-mainmenu">
        <h3>Main Menu</h3>
        <ul>
            <li><a href="#">List item</a></li>
            <li><a href="#">List item</a></li>
            <li><a href="#">List item</a></li>
            <li><a href="#">List item</a></li>
        </ul>
    </div>
    <div class="bm-maincontent">
        <div class="bm-header">
            <div class="bm-menuopen">Menu</div>
        </div>
    </div>
</div>

CSS

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}
html, body {
    height:100%;
    width:100%;
}
body {
    background-color: #232425;
    position: relative;
    height:100%;
    width:100%;
    font-family:sans-serif;
}
a{
    text-decoration: none;
    color:black;
}
.bm-sitewrap {
    overflow:hidden;
    height:100%;
}

.bm-mainmenu {
    position:absolute;
    z-index:1;
    width:296px;
}
.bm-mainmenu a{
    padding: 16px;
    display: block;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #000;
    color: #efefef;
}
.bm-mainmenu h3{
    padding: 16px;
    color: #efefef;
}
.bm-maincontent {
    min-height: 100%;
    width: 100%;
    background: white;
    margin-left: 0px;
    position: relative;
    z-index:2;
}
.bm-header{
    background-color: #232425;
}
.bm-menuopen {
    width: 40px;
    height: 40px;
    background: #f4f4f4;
    display: inline-block;
    color: transparent;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

JavaScript

$('.bm-menuopen').click(function () {
        var state = parseInt($('.bm-maincontent').css('margin-left'), 10) > 250;
        $('.bm-maincontent').velocity({
            'margin-left': (state ? 0 : 296)
        }, 'slow');
    });