TEXT - 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 with the link/button reflecting the current state..

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);

}
#mmenu .slider-frame .slider-button {
  display: block;
  margin: 0;
  padding: 0 4px;
  width: 43px;
  line-height: 27px;

}
#mmenu .slider-frame .slider-button.on {
  background: #2372c6;
  border: 1px solid #0f3f74;
}
#mmenu .slider-frame .slider-button:before {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  width: 43px;
  height: 12px;
  background: rgba(255, 255, 255, 0.25);
  content: '';
  -moz-border-radius: 15px;
  border-radius: 15px;
}

#mmenu ul {display:none;}
#subdiv {margin:16px auto;width:100%;height:300px;background:yellow;}

JavaScript

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