Edit in JSFiddle

$( '.menu-toggle' ).click(function() {
    $( this ).parent().children( '.wrap, .menu-items' ).fadeToggle();
		$( this ).toggleClass( 'active' );
});
<nav class="menu-main">
	<h3 class="menu-toggle" title="Navigation"><span class="icon menubars">Menu</span></h3>
	<div class="wrap">
		<ul class="menu menu-items">
		   <li><a href="#">Home</a></li>
		   <li><a href="#">Work</a></li>
		   <li><a href="#">About</a></li>
		   <li><a href="#">Contact</a></li>
		</ul>
	</div>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu vehicula justo. In id justo mollis, imperdiet leo eget, pellentesque nisl. Etiam varius tortor fringilla, vulputate magna suscipit, tincidunt tortor. Integer at sollicitudin lacus, vitae volutpat nunc. Mauris convallis hendrerit mi, eleifend aliquam sapien porta eu. Curabitur condimentum augue sit amet turpis mattis gravida. Ut dolor leo, tempus id ullamcorper sed, scelerisque at risus. Curabitur pulvinar fringilla tempor.</p>
<p>Phasellus eros sapien, consectetur in condimentum eu, pulvinar nec ipsum. Sed commodo, risus ut lacinia ornare, lectus lectus ultricies diam, quis aliquam massa magna a mi. Etiam tincidunt vel lectus vel tristique. Maecenas laoreet, lacus ac rutrum pellentesque, urna ligula blandit purus, ut scelerisque est massa ut orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id elit tristique, posuere tortor sit amet, dignissim odio. Nullam convallis rutrum nulla, a adipiscing turpis venenatis id.</p>
.menu-main {
  background: #333;
  min-height: 45px;
  text-align: center;
  width: 100%;
}

h3.menu-toggle {
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 100%;
}
h3.menu-toggle .menubars {
    color: #fff;
    line-height: 45px;
    margin: 0;
    padding: 0 0 0 1.25em;
    position: relative;
    width: 100%;
}
.menubars:before {
    content: "";
    left: 0;
    position: absolute;
    top: 0.35em;
    width: 0.75em;
    height: 0.15em;
    border-top: 0.325em double #fff;
    border-bottom: 0.125em solid #fff;
}
.wrap {
    clear: both;
    color: #000;
    display: none; /* visibility will be toggled with jquery */
    margin: 0 auto;
    padding: 0 0 1px;
    position: relative;
    text-align: left;
    width: 100% !important;
    z-index: 999;
}
.wrap ul {
    margin: 0;
    padding: 0;
    width: 100%;
}
.wrap li {
    background: #1d1d1d;
    border-bottom: 1px solid #3e3e3e;
    display: list-item;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.wrap li:hover {
    background: #111111;
}
.wrap li a {
    color: #999;
    font-size: 1.2rem;
    line-height: 40px;
    padding: 8px 12px 8px 8px;
    text-decoration: none;
}
.wrap li:hover a {
    color: #fff;
}