Responsive Mobile Menu

Basically, when the design get to mobile screen size, this will show. It allows you to have a clean navigation that the user can show/hide.

by vandigroup

HTML

<div id="wrapper">
            <nav id="mmenu">
                <div class="slider-frame">
                    <span class="slider-button">OFF</span>
                </div>
                <ul >
                    <li><a href="../">Home</a></li>
                    <li><a href="what-we-do.php">What We Do</a></li>
                    <li><a href="who-we-serve.php">Who We Serve</a></li>
                    <li><a href="about-us.php">About Us</a></li>
                    <li><a href="careers.php">Career Opportunities</a></li>
                    <li><a href="trends.php">Trends</a></li>
                    <li><a href="contact-us.php">Contact Us</a></li>
                </ul>
            </nav>
            <div id="subdiv"></div>
        </div>

CSS

html {
    overflow:-moz-scrollbars-vertical;
}
#wrapper {    
    margin:22px auto;
    padding-top:50px;
    width:320px;
    background:rgb(240, 240, 240);
}
#mmenu {
    position:relative;
    display:block;
    margin:auto;
    width:100%;
    background:rgb(14,76,122);
    background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBlNGM3YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYyJSIgc3RvcC1jb2xvcj0iIzEwNWI5NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwOTMxNGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWU1Nzk5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTRjN2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background:-moz-linear-gradient(top,  rgba(14,76,122,1) 0%, rgba(16,91,148,1) 62%, rgba(9,49,79,1) 100%, rgba(30,87,153,1) 100%, rgba(32,124,202,1) 100%, rgba(14,76,122,1) 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(14,76,122,1)), color-stop(62%,rgba(16,91,148,1)), color-stop(100%,rgba(9,49,79,1)), color-stop(100%,rgba(30,87,153,1)), color-stop(100%,rgba(32,124,202,1)), color-stop(100%,rgba(14,76,122,1)));
    background:-webkit-linear-gradient(top,  rgba(14,76,122,1) 0%,rgba(16,91,148,1) 62%,rgba(9,49,79,1) 100%,rgba(30,87,153,1) 100%,rgba(32,124,202,1) 100%,rgba(14,76,122,1) 100%);
    background:-o-linear-gradient(top,  rgba(14,76,122,1)...

JavaScript

$('.slider-button').toggle(function(){
        $(this).addClass('on').html('CLOSE');
        $('#mmenu ul').fadeIn('1200');
    },function(){
        $(this).removeClass('on').html('OPEN');
        $('#mmenu ul').fadeOut('fast');
    });