Menu Hamburguer

Menu para mobile

by cintia_rodrigues

HTML

<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="header">
	 <div class="logo"> 
 		<img src="http://upimagens.com/image-B33E_50E590FB.gif">
	</div>
	<nav>
		<div class="wrpp-menu">
			<ul >
				<li><p>Perguntas Frequentes </p></li>
				<li><p>Tem Dúvidas?</p></li>
				
			</ul>
		</div>
	</nav>	
		
		<div id="circ">
		  <ul>
			<li class="animated zoomIn">
			  <div class="back"></div>
			  <div class="icon">
				<i class="fa fa-facebook"></i>
			  </div>
			</li>
			<li class="animated zoomIn delayone">
			  <div class="back"></div>
			  <div class="icon">
				<i class="fa fa-twitter"></i>
			  </div>
			</li>
			<li class="animated zoomIn delaytwo">
			  <div class="back"></div>
			  <div class="icon">
				<i class="fa fa-linkedin"></i>
			  </div>
			</li>
			<li class="animated zoomIn delaythree">
			  <div class="back"></div>
			  <div class="icon">
				<i class="fa fa-youtube"></i>
			  </div>
			</li>
			<li class="animated zoomIn delayfour">
			  <div class="back"></div>
			  <div class="icon">
				<i class="fa fa-pinterest-p"></i>
			  </div>
			</li>
			<li class="animated zoomIn delayfive">
			  <div class="back"></div>
			  <div class="icon">
				<i class="fa fa-google-plus"></i>
			  </div>
			</li>
			
		  </ul>
	</div>
</div>

<div class="counter">
	
	<span>0</span>
	<span>0</span>
	<span>0</span>
	<span>0</span>
	<span>5</span>
	<h2>Já se registaram</h2>
</div>
	
<div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
  </div>
  
<div class="module">
  <ul>
     <li>Perguntas Frequentes</li>
     <li>Politica de privacidade</li>
     <li>Termos & condições</li>
     <li>Tem dúvidas?</li>

  </ul>
</div>

<section>
	<article class="hero">
		
	</article>
</section>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Damion);
@import "font-awesome";

 *{
  padding:0; 
  margin:0;
  font-family: 'Open Sans', sans-serif;
}


.header{
  
  width:100%;
  background-color:#DCDCDC;
  position:fixed;
  padding: 10px;
  min-height:40px;
}

.logo{
	float:left;	
	width:15%;
}

	.logo img{
	    width: 100px;
		display:inline-block;
		padding-top:8px;
	}
	
	
	.header nav{
		display: inline-block;
		vertical-align: top;
		width: 56%;
		text-align:right;
			
	}
	
	.header nav .wrpp-menu{
	    display: inline-block;
		
	}
	
	.header nav .wrpp-menu ul{
	    display: inline-block;
	
	}
	
	
	.header nav .wrpp-menu  ul li{
		list-style: none;
		color: #696969;
		float: left;
	    padding: 24px 20px 0px 20px;
		font-size: 13px;
		font-weight: 600;
		transition: 1s color ease;
		text-align:right;
		cursor:pointer;

	}
	

		.header nav .wrpp-menu ul li p:hover{
			color:	#004d40;
		
		}
	
.hamburger, .module{
	display:none;
}

/*Redes Sociais*/
.delayone {
  -moz-animation-delay: .2s;
  -webkit-animation-delay: .2s;
}

.delaytwo {
  -moz-animation-delay: .4s;
  -webkit-animation-delay: .4s;
}

.delaythree {
  -moz-animation-delay: .6s;
  -webkit-animation-delay: .6s;
}

.delayfour {
  -moz-animation-delay: .8s;
  -webkit-animation-delay: .8s;
}

.delayfive {
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

.delaysix {
  -moz-animation-delay: 1.4s;
  -webkit-animation-delay: 1.4s;
}

.icon {
  position: absolute;
  width: 35px;
  display: block;
  color: #004d40;
  font-size: 3em;
  -webkit-transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  font-size:23px;
}

#circ {
    width: 29%;
    float: right;
}

#circ ul {
  list-style: none;
  padding: 0;
  width: 100%;
  margin-top: 10px;
}
#circ ul li {
    display: inline-block;
   ...

JavaScript

$(".hamburger").click(function () {
  	$(".module").toggleClass("active");
    // o toggle faz o efeito de abertura e saida. A ideia é chamar através do toggle a class "active" que no css faz as transições e tudo o resto que queiramos fazer.
    
});


$(document).ready(function(){
	$('.hamburger').click(function(){
		$(this).toggleClass('open');
	});
});