$('.trigger').click(function(){
if($(this).hasClass('active')){
$('nav ul').slideUp();
$(this).removeClass('active');
} else {
$('nav ul').slideDown();
$(this).addClass('active');
}
});
<a href="#" class="trigger"><span></span><span></span><span></span></a>
<nav id="main_menu">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#philosophy">Philosophy</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#next_big_thing">Next Big Thing</a></li>
<li><a href="#contact_us">Contact Us</a></li>
</ul>
</nav>
header .trigger{
position: absolute;
right: 10px;
top: 10px;
display: block;
width: 30px;
height: 27px;
padding:7px;
border: 2px solid #3a9bcd;
border-radius: 3px;
}
header .trigger span{
display: block;
height: 2px;
background: #3a9bcd;
margin-top: 10px;
}
header .trigger span:first-child{
margin-top: 0;
}
header .trigger:hover{
background: #ccc;
}
