Push Left Menu Simple with jQuery

http://blog.kangrian.com

by Ryan Perez

HTML

<body class="pushmenu-push">
  <nav class="pushmenu pushmenu-left">
    <h3>Menu</h3>
    <a href="#">Home</a>
    <a href="#">Nav2</a>
    <a href="#">Nav3</a>
    <a href="#">Nav4</a>
    <a href="#">Nav5</a>
    <a href="#">Nav6</a>
    <a href="#">Nav7</a>
  </nav>
  
<div class="container">
        <div class="main">
        <section class="buttonset">
            <div id="nav_list">Menu</div>
        </section>
      
    <section class="content">
      <h1>Slideout Navigation</h1>
      <p>
        
      </p>
      
    </section><!-- End Content -->
  </div><!-- End Main -->
</div><!-- End Container --> 
</body>

CSS

body {
  margin: 0;
}

.pushmenu { /*this is the nav*/
  background: #3c3933;
  font-family: Arial, Helvetics, sans-serif;
  width: 240px;
  height: 100%;
  top: 0;
  z-index: 1000;
  position:fixed;
}

.pushmenu h3 {
  color: #cbbfad;
  font-size: 14px;
  font-weight: bold;
  padding: 15px 20px;
  margin: 0;
  background: #282522;    
  height: 16px;
}

.pushmenu a {
  display: block; /* drops the nav vertically*/
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-top: 1px solid #56544e;
  border-bottom: 1px solid #312e2a;
  padding: 14px;
}

.pushmenu a:hover {
  background:#00A287;
}

.pushmenu a:active {
  background: #454f5c;
  color: #fff;
}

.pushmenu-left {
  left: -240px;

}

.pushmenu-left.pushmenu-open {
  left: 0;
}

.pushmenu-push {
  overflow-x: hidden;
  position: relative;
  left: 0;
}

.pushmenu-push-toright {
  left: 240px;
}

/*Transition*/
.pushmenu, .pushmenu-push {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;  
}

#nav_list {
  background: url(http://www.onlywebpro.com/demo/jquery/icon_nav.png) no-repeat left top;
  cursor: pointer;
  height: 27px;
  width: 33px;
  text-indent: -99999em;
}

nav-list.active {
  background-position: -33px top;
}

 .buttonset {
      background: #00A287;
      height: 16px;
      padding: 10px 20px 20px;
 }
 
 section.content {
   font-family: Arial, Helvetica, sans-serif;
   padding: 10px 20px;
 }

JavaScript

$(document).ready(function() {
		$menuLeft = $('.pushmenu-left');
		$nav_list = $('#nav_list');
		
		$nav_list.click(function() {
			$(this).toggleClass('active');
			$('.pushmenu-push').toggleClass('pushmenu-push-toright');
			$menuLeft.toggleClass('pushmenu-open');
		});
	});