JSFiddle - React, Tailwind, and code Playground

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>
<div class="mask" style="display:none"></div>
<div class="navigation" style="display:none">
    <div class="navigation-header">
         <h2>Categories</h2>

    </div>
    <div class="navigation-breadcrumbs">Some shiti breadcrumbs</div>
    <div class="navigation-body">
        <ul>
            <li><a href="">Baby Monitors</a>

            </li>
            <li><a href="">Best Buy</a>

                <ul>
                    <li><a href="">Sublinks</a>

                    </li>
                    <li><a href="">Sublinks</a>

                    </li>
                    <li><a href="">Sublinks</a>

                    </li>
                </ul>
            </li>
            <li><a href="">Cameras</a>

            </li>
            <li><a href="">Car Gadgets</a>

            </li>
            <li><a href="">Digital Photo Frames</a>

            </li>
            <li><a href="">Docking Stations</a>

            </li>
            <li><a href="">EBook Readers</a>

            </li>
            <li><a href="">Gadgets - All Types</a>

            </li>
            <li><a href="">Gaming</a>

            </li>
            <li><a href="">GPS Devices</a>

            </li>
            <li><a href="">Headphones</a>

            </li>
            <li><a href="">Home Appliances</a>

            </li>
            <li><a href="">Media Players</a>

            </li>
            <li><a href="">Mobile Phones</a>

            </li>
            <li><a href="">Networking</a>

            </li>
            <li><a href="">Projectors</a>

            </li>
            <li><a href="">Security Gadgets</a>

            </li>
        </ul>
    </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam ea officia explicabo facere doloribus molestiae aperiam quidem similique. Aliquam sed natus praesentium nulla...

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:absolute;
    z-index:9999;
    width:300px;
    left:50%;
    top:20px;
    margin-left:-150px;
    background-color:#fff;
}
.navigation-header, .navigation-breadcrumbs {
    display:block;
}
.navigation-header h2 {
    margin:0!important;
}
.navigation-body {
    overflow-x:auto;
}
.navigation ul {
    list-style:none;
    margin:0;
    padding:0
}
.navigation ul 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;
}
.navigation ul li a:hover {
    color:#fff;
    background-color:#555;
}

JavaScript

//Set menu height
function setMenuHeight() {
    var navHeight = $(window).height() - 40;
    var navHeadHeight = $('.navigation-header').height();
    var navBreadHeight = $('.navigation-breadcrumbs').height();
    var navHeaderHeight = navHeadHeight + navBreadHeight;
    var navBodyHeight = navHeight - navHeaderHeight;
    $('.navigation').css('height', navHeight);
    $('.navigation-body').css('height', navBodyHeight);
}

$(window).resize(function () {
    setMenuHeight();
});

// Open menu 
$('.open-nav').click(function () {
    $('body').css('overflow', 'hidden');
    $('.mask').fadeIn(200, function () {
        $('.navigation').fadeIn(function () {
            setMenuHeight();
        });
    });
});
// close menu
$('.mask').click(function () {
    $('.navigation').fadeOut(200, function () {
        $('.mask').fadeOut();
    });
    $('body').css('overflow', 'auto');
});
// submenu
// hide children
$('.navigation > ul > li ul').hide();
// show children
$('.navigation > ul > li').click(function () {

});