Mobile Menu Example

HTML

<div id="wrapper">
  <header role="banner">
    <div id="nav-container">
      <div class="nav-content">
        <div class="s-b-menu-hidden">Menu
        </div>
        <nav>
          <ul class="navigation">
            <li> <a href="#">Who We Are</a>
              <ul>
                <li> <a href="#">Staff</a> </li>
                <li> <a href="#">Partners</a>
                  <ul>
                    <li><a href="#">Programs</a></li>
                    <li><a href="#">UDS All-star</a></li>
                    <li><a href="#">Training Club</a></li>
                    <li><a href="#">Music Therapy</a></li>
                    <li><a href="#">Science Club</a></li>
                    <li><a href="#">Drama Club</a></li>
                    <li><a href="#">Student Council</a></li>
                    <li><a href="#">Yearbook Committee</a></li>
                  </ul>
                </li>
                <li><a href="#">Careers</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">PhotoGallery</a></li>
              </ul>
            </li>
            <li><a href="#">Curriculum</a></li>
            <li><a href="#">Steel Angels</a></li>
            <li><a href="#">Enrollment</a></li>
            <li><a href="#">Parent Resources</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>
        <ul class="header-search">
          <li><span class="trigger">Search</span>
            <ul>
              <li>
                <form class="search" role="search" action="#">
                  <input type="text" class="text" placeholder="SEARCH" />
                  <input type="submit" class="button" value="" />
                </form>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>

CSS

#nav-container { 
	background-color: #40b2d8;
	height: 42px; 
}

#nav-container .nav-content {
	position: relative;
	margin: 0 auto;
	width: 78%;
	height: 42px;
}

#nav-container .s-b-menu-hidden {
	display: block;
	position: absolute;
	padding: 0 22px 0 46px;
	font-weight: 600;
	font-size: 16px;
	height: 42px;
	line-height: 42px;
	color: #fff;
	text-transform: uppercase;
	background: transparent url(../../elements/skin-steel/menu_bg.gif) 12px 16px no-repeat;
	cursor: pointer;
}

#nav-container .s-b-menu-hidden:hover,
#nav-container.show-me .s-b-menu-hidden { 
	background-color: #62c7e8; 
}

nav { 
	display: none;
	height: 42px;
	margin-left: 130px;
}

#nav-container.show-me nav {
	display: inline-block;
}

nav ul {
	list-style-type: none;
}

nav ul,
nav ul li { 
	padding: 0; 
	margin: 0; 
}

nav a,
nav a:hover { 
	color: #FFF;
	text-decoration: none;
}

nav ul.navigation {

}

nav ul.navigation > li {
	display: block;
	float: left;
	height: 42px;
}

nav ul.navigation > li:hover {
	background: transparent url(../../elements/skin-steel/bg-drop-down.png) bottom center no-repeat;
}

nav ul.navigation > li > a {
	display: block;
	padding: 0 9px;
	height: 42px;
	line-height: 42px; 
	font-weight: 600;
	font-size: 16px;
	color: #FFF;
}

nav ul.navigation li {
	position: relative;
}

nav ul.navigation > li ul {
	position: absolute;
	width: 160px;
	padding: 10px 0;
	background-color: #62c7e8;
}

nav ul.navigation > li > ul {
	top: auto;
	left: -9999em;
}

nav ul.navigation > li:hover > ul {
	left: 0;
}

nav ul.navigation > li:first-child:hover > ul {
	margin-left: -14px;
}

nav ul.navigation > li ul > li {
	background-color: #62c7e8;
}

nav ul.navigation > li ul > li:hover {
	background-color: #40b2d8;
}

nav ul.navigation > li ul > li > a {
	display: block;
	width: 120px;
	padding: 4px 20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

nav ul.navigation > li > ul > li > ul {
	display: none;
	position: absolute;
	margin-left: 160px;
	top: auto;
	margin-top:...

JavaScript

$(".s-b-menu-hidden").toggle(function () {
    $(".navigation").addClass("menu-open");
    $(".nav-content").addClass("menu-open");
}, function () {
    $(".navigation").removeClass("menu-open");
});