Burger Menus - Spab Rice - Premium Wordpress Themes and Templates

<div class="menu">
	<span class="burger"></span>
	<span class="cross"></span>
</div>

.menu {
	width: 80px;
	height: 80px;
	position: relative;
	cursor: pointer;
	overflow: hidden;
}
	
.menu span.burger, .menu span.burger::after, .menu span.burger::before {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	background: #ffffff;
	position: absolute;
	top: 50%; margin-top: -1px;
	left: 50%; margin-left: -12px;

	transition: all 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000); 
	transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
	transition-delay: 0.15s;		
}
.menu span.burger::after { margin-top: -7px; top: 0; transition-delay: 0.27s; }
.menu span.burger::before { margin-top: 7px; top: 0; transition-delay: 0.2s; }

.menu.is-clicked span.burger, .menu.is-clicked span.burger::after, .menu.is-clicked span.burger::before { 
	transition-delay: 0.12s;
	transform: translateX(60px);
}
.menu.is-clicked span.burger::after { transition-delay: 0s; }
.menu.is-clicked span.burger::before { transition-delay: 0.07s; }

.menu span.cross::before, .menu span.cross::after {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	background: #ffffff;
	position: absolute;
	top: 50%; margin-top: -1.5px;
	left: 50%; margin-left: -12px;
	transform: translateY(-70px) translateX(-70px) rotate(45deg);

	transition: transform 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000); 
	transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
	transition-delay: 0.12s;
}
.menu span.cross::after {
	transition-delay: 0s;
	transform: translateY(-70px) translateX(70px) rotate(-45deg);
}

.menu.is-clicked span.cross::before {
	transition-delay: 0.12s;
	transform: rotate(45deg);
}
.menu.is-clicked span.cross::after {
	transition-delay: 0.24s;
	transform: rotate(-45deg) !important;
}

<div class="menu">
	<span class="burger"></span>
</div>

.menu {
	width: 24px;
	height: 30px;
	position: relative;
	cursor: pointer;
	overflow: hidden;
}	

.menu span.burger, .menu span.burger:after, .menu span.burger:before {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: #ffffff;
	position: absolute;
	top: 50%; margin-top: -1.5px;
	right: 0;
	
	transform: rotate(0deg);
	transition: all 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000), margin 0.3s ease 0.3s, transform 0.3s ease, background 0.05s ease 0.27s;
	transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
	}
	.menu span.burger:before { margin-top: -7px; top: 0; width: 80%; }
	.menu span.burger:after { margin-top: 7px; top: 0; width: 50%; }

	.menu:not(.is-clicked):hover span:before,
	.menu:not(.is-clicked):hover span:after {
		width: 100%;
	}
	
.menu.is-clicked span.burger {
	background: transparent;
}

.menu.is-clicked span:before,
.menu.is-clicked span:after {
	transition: margin 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000), transform 0.3s ease 0.3s, background 0.3s ease 0.2s;
	transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);

	margin: 0;
	width: 100%;
	transform: rotate(135deg);
}

.menu.is-clicked span:after {
	transform: rotate(-135deg);
}

<div class="menu">
	<span class="burger"></span>
</div>

.menu {
	width: 30px;
	height: 30px;
	position: relative;
	cursor: pointer;
	overflow: hidden;
}
	
.menu span.burger, .menu span.burger:after, .menu span.burger:before {
	content: "";
	display: block;
	width: 26px;
	height: 2px;
	background: #ffffff;
	position: absolute;
	top: 50%; margin-top: -1px;
	left: 50%; margin-left: -13px;
	
	transform: rotate(0deg);
	transition: all 0.4s cubic-bezier(0.600, 0.000, 0.200, 1.000); 
	transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
	transition-delay: 0s;		
	}
	.menu span.burger:before { margin-top: -7px; top: 0; }
	.menu span.burger:after { margin-top: 7px; top: 0; }
	
	.menu:not(.is-clicked):hover span.burger {
		width:  18px;
		margin-left: -9px;
	}

.menu.is-clicked span.burger { 
	background: transparent !important; 
	transition-delay: 0.1s;
	transition-duration: 0.2s;
}
.menu.is-clicked span.burger:before {  
	transform: rotate(135deg);
	margin-top: 0px;
}
.menu.is-clicked span.burger:after {  
	transform: rotate(-135deg);
	margin-top: 0px;
}

<div class="menu">
	<span class="burger"></span>
</div>

.menu {
	width: 30px;
	height: 30px;
	position: relative;
	cursor: pointer;
	overflow: hidden;
}

.menu span.burger, .menu span.burger::after, .menu span.burger::before {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	background: #ffffff;
	position: absolute;
	top: 50%; margin-top: -1px;
	left: 50%; margin-left: -12px;

	transition: all 0.3s cubic-bezier(0.600, 0.000, 0.200, 1.000); 
	transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
}
.menu span.burger::after { margin-top: -7px; top: 0; left: 0; margin-left: 0; }
.menu span.burger::before { margin-top: 7px; top: 0; left: 0; margin-left: 0; }

.menu:hover span.burger:before { margin-top: 9px; }
.menu:hover span.burger:after { margin-top: -9px; }
	
.menu.is-clicked span.burger { 
	width: 30px;
	margin-left: -15px;
}
	
.menu.is-clicked  span.burger::after { 
	transform: rotate(-45deg);
	width: 13px;
	margin-top: -4px;
	margin-left: -2px;
	}
.menu.is-clicked  span.burger::before { 
	transform: rotate(45deg);
	width: 13px;
	margin-top: 4px;
	margin-left: -2px;
	}

<div class="menu">
	<span class="burger"></span>
</div>

.menu {
	width: 30px;
	height: 30px;
	position: relative;
	cursor: pointer;
	overflow: hidden;
}
	
.menu span.burger:before, .menu span.burger:after {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	background: #ffffff;
	position: absolute;
	top: 50%; margin-top: -5px;
	left: 50%; margin-left: -16px;
	
	transform: rotate(0deg);
	transition: all 0.3s ease;
	transition-delay: 0s;		
	}
	.menu span.burger:after { margin-top: 5px; margin-left: -8px; }
	
	.menu:hover span.burger:before { margin-left: -8px; }
	.menu:hover span.burger:after { margin-left: -16px; }

.menu.is-clicked span.burger:before {  
	transform: rotate(45deg);
	margin-top: 0px;
	margin-left: -12px;
}
.menu.is-clicked span.burger:after {  
	transform: rotate(-45deg);
	margin-top: 0px;
	margin-left: -12px;
}