Kick ass menu

by halirgb

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<button class="open-nav btn btn-success">Menu</button>

<ul class="navigation">
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
</ul>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic, 400italic, 600italic, 700italic, 800italic, 400, 300, 600, 700, 800);
 .mask {
    background-color:rgba(0, 0, 0, 0.5);
    position:fixed;
    height:100%;
    width:100%;
    top:0;
    left:0;
}
.navigation {
    position:fixed;
    z-index:9999;
    width:300px;
    left:50%;
    top:20px;
    margin-left:-150px;
    background-color:#fff;
    overflow-x:auto;
    display:none;
}

ul.navigation {
    list-style:none;
    padding:0
}
ul.navigation li a {
    color:#111;
    text-transform:uppercase;
    font-family:arial;
    text-decoration:none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-family:'Open Sans', sans-serif;
    display:block;
    padding:5px 0 5px 5px;
    ;
    margin-bottom:5px;
}
ul.navigation li a:hover {
    color:#fff;
    background-color:#555;
}

JavaScript

//Set menu height
function setMenuHeight() {
    var navHeight = $(window).height() - 40;
    $('.navigation').css('height', navHeight);
}

// Open menu 
$('.open-nav').click(function () {
    $('body').css('overflow', 'hidden');
    $('body').append('<div class="mask" style="display:none"></div>');
    $('.mask').fadeIn(200, function () {
        $('.navigation').fadeIn();
    });
});

// close menu
$(document).on('click','.mask', function () {
    console.log('crap');
    $('.navigation').fadeOut(200, function () {
        $('.mask').fadeOut();
    });
    $('.mask').remove();
    $('body').css('overflow', 'auto');
});