/ Mobile Menu

jQuery effect for mobile menu

jQuery effect for mobile menu

MOBILE MENU

HTML, CSS and jQuery effect for mobile menu.

Made with

Html
Css
JavaScript

html

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>	
    <a id="view-code" href="https://codepen.io/virgilpana/pen/NPzodr">VIEW CODE</a>
        <div class="screen">
        	<div class="navbar"></div>
        	<div class="list">
            	<div class="item">
                	<div class="img"></div>
                    <span></span>
                    <span></span>
                    <span></span>                    
                </div>
                
                <div class="item">
                	<div class="img"></div>
                    <span></span>
                    <span></span>
                    <span></span>                    
                </div>
                
                <div class="item">
                	<div class="img"></div>
                    <span></span>
                    <span></span>
                    <span></span>                    
                </div>
                
                <div class="item">
                	<div class="img"></div>
                    <span></span>
                    <span></span>
                    <span></span>                    
                </div>
            </div>
        
	        <div class="circle"></div>
			<div class="menu">
				<ul>
					<li><a href="">About</a></li>
					<li><a href="">Share</a></li>
					<li><a href="">Activity</a></li>
                    <li><a href="">Settings</a></li>
                    <li><a href="">Contact</a></li>
				</ul>
			</div>			            
			<div class="burger">
				<div class="x"></div>
				<div class="y"></div>
                <div class="z"></div>
			</div>    

		</div>	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Css

* { margin: 0px; padding: 0px; }
body {
	background: #383c55;
	width: 100%; 
	height: 100%;
	font:12px "Open Sans", sans-serif; 
}
#view-code{
  color:#4183d7; 
  font-size:13px;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  position:absolute;top:640px; left:50%;margin-left:-35px;
}
div.screen{
	width:320px;
	height:560px;	
	overflow:hidden;
	position:absolute; 
	top:50px; 
	left:50%;
  margin-left:-160px;
	background:#31558a;
}

.list{margin-top:36px; text-align:left;}
.item{
	height:115px;
	margin-top:30px 0;
	padding-left:115px;
	clear:both;
}
.item .img, .item span{background:#214273; border-radius:3px;}
.item .img{float:left; width:71px; height:71px; margin-left:-93px;}
.item span{height:11px; width:180px; margin-bottom:19px; float:left;}
.item span:nth-of-type(3){width:75px; margin-botom:0;}

div.burger {
	height: 30px; 
	width: 40px;
	position: absolute;
	top: 11px; 
	left: 21px;
	cursor: pointer;	
}
	div.x,
	div.y,
	div.z {
		position: absolute; margin: auto;
		top: 0px; bottom: 0px;		
		background: #fff;
		border-radius:2px;
		-webkit-transition: all 200ms ease-out;
		   -moz-transition: all 200ms ease-out;
		    -ms-transition: all 200ms ease-out;
		     -o-transition: all 200ms ease-out;
		        transition: all 200ms ease-out;
	}		
	div.x, div.y, div.z { height: 3px; width: 26px; }
	div.y{top: 18px;}
	div.z{top: 37px;}
	div.collapse{
		top: 20px;
		background:#4a89dc;
		-webkit-transition: all 70ms ease-out;
		   -moz-transition: all 70ms ease-out;
		    -ms-transition: all 70ms ease-out;
		     -o-transition: all 70ms ease-out;
		        transition: all 70ms ease-out;
	}
	 
	
	div.rotate30{
		-ms-transform: rotate(30deg); 
    	-webkit-transform: rotate(30deg); 
	    transform: rotate(30deg);	
		-webkit-transition: all 50ms ease-out;
		   -moz-transition: all 50ms ease-out;
		    -ms-transition: all 50ms ease-out;
		     -o-transition: all 50ms ease-out;
		        transition: all 50ms ease-out;					
	}
	div.rotate150{
		-ms-transform: rotate(150deg); 
    	-webkit-transform: rotate(150deg); 
	    transform: rotate(150deg);	
		-webkit-transition: all 50ms ease-out;
		   -moz-transition: all 50ms ease-out;
		    -ms-transition: all 50ms ease-out;
		     -o-transition: all 50ms ease-out;
		        transition: all 50ms ease-out;					
	}
	
	div.rotate45{
		-ms-transform: rotate(45deg); 
    	-webkit-transform: rotate(45deg); 
	    transform: rotate(45deg);	
		-webkit-transition: all 100ms ease-out;
		   -moz-transition: all 100ms ease-out;
		    -ms-transition: all 100ms ease-out;
		     -o-transition: all 100ms ease-out;
		        transition: all 100ms ease-out;					
	}
	div.rotate135{
		-ms-transform: rotate(135deg); 
    	-webkit-transform: rotate(135deg); 
	    transform: rotate(135deg);	
		-webkit-transition: all 100ms ease-out;
		   -moz-transition: all 100ms ease-out;
		    -ms-transition: all 100ms ease-out;
		     -o-transition: all 100ms ease-out;
		        transition: all 100ms ease-out;					
	}

div.navbar{height:73px;background:#385e97;}

div.circle{	
	border-radius: 50%;
	width: 0px;
	height: 0px; 
	position:absolute;
	top: 35px;
	left: 36px;
	background:#fff;
	opacity:1;
	-webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);	
}
div.circle.expand{
	width:1200px;
	height:1200px;
	top: -560px;
	left: -565px; 	
	-webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);					
	
}
div.menu {
	height: 568px; 
	width: 320px;
	position: absolute;
	top: 0px; left: 0px;
}
div.menu ul li {
	list-style: none;
	position:absolute;
	top:50px;;
	left:0;
	opacity:0;
	width:320px;
	text-align:center;
	font-size:0px;
	-webkit-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
div.menu ul li a {
	color:#4a89dc;
	text-transform:uppercase;
	text-decoration:none;	
	letter-spacing:3px;			
}

div.menu li.animate{
	font-size:21px;
	opacity:1;
	-webkit-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
div.menu li.animate:nth-of-type(1){	
	top:120px;
	transition-delay: 0.0s;	
}
div.menu li.animate:nth-of-type(2){
	top:190px;
	transition-delay: 0.03s;	
			
}
div.menu li.animate:nth-of-type(3){
	top:260px;
	transition-delay: 0.06s;		
	
}
div.menu li.animate:nth-of-type(4){
	top:330px;
	transition-delay: 0.09s;		
	
}
div.menu li.animate:nth-of-type(5){
	top:400px;
	transition-delay: 0.12s;		
	
}
div.menu li.animate:nth-of-type(6){
	top:470px;
	transition-delay: 0.15s;	
			
}

JavaScript

	
	if( 'ontouchstart' in window ){ var click = 'touchstart'; }
	else { var click = 'click'; }


	$('div.burger').on(click, function(){

			if( !$(this).hasClass('open') ){ openMenu(); } 
			else { closeMenu(); }

	});
	

	$('div.menu ul li a').on(click, function(e){
		e.preventDefault();
		closeMenu();
	});		


	function openMenu(){
		
		$('div.circle').addClass('expand');
					
		$('div.burger').addClass('open');	
		$('div.x, div.y, div.z').addClass('collapse');
		$('.menu li').addClass('animate');
		
		setTimeout(function(){ 
			$('div.y').hide(); 
			$('div.x').addClass('rotate30'); 
			$('div.z').addClass('rotate150'); 
		}, 70);
		setTimeout(function(){
			$('div.x').addClass('rotate45'); 
			$('div.z').addClass('rotate135');  
		}, 120);
		
		

	}
	
	function closeMenu(){

		$('div.burger').removeClass('open');	
		$('div.x').removeClass('rotate45').addClass('rotate30'); 
		$('div.z').removeClass('rotate135').addClass('rotate150');				
		$('div.circle').removeClass('expand');
		$('.menu li').removeClass('animate');
		
		setTimeout(function(){ 			
			$('div.x').removeClass('rotate30'); 
			$('div.z').removeClass('rotate150'); 			
		}, 50);
		setTimeout(function(){
			$('div.y').show(); 
			$('div.x, div.y, div.z').removeClass('collapse');
		}, 70);													
		
	}

Demo

See the Pen Menu 1 by Virgil Pana (@virgilpana) on CodePen.