Membuat Menu Burger dengan CSS dan Javascript

memperhatikan design sekecil apapun menjadi baik adalah biasanya tugas seorang design web, contohnya Burger Menu, yang bila mana kita klik menu tersebut akan berubah dan memberikan efect animasi yang bagus pada menu tersebut, nah sekarang kita bahas tentang Membuat Menu Burger dengan CSS dan Javascript.

pertama tama buat terlebuih dahulu index.html dan ketikan struktur html berikut

<!DOCTYPE html>
<html>
<head>
	<title> Menu Burger CSS dan Javascript </title
	
</head>
<body>
	<div class="burger">
		<span></span>
		<span></span>
		<span></span>
	</div>	

	
</body>
</html>

setelah itu buat css berikut teman teman

*{padding: 0; margin: 0;}	

.burger{
	cursor: pointer;
	margin: auto;
	width: 400px;
	margin-top: 50px;
}
span{
	background: salmon;
	width: 100px;
	height: 5px;
	margin: 10px;
	display: block;
}
span:nth-child(2){
	background: #777;
	width: 30px;
	height: 5px;
	margin: 10px;
	padding-left: 40px;
	
}
.efect1{
	transform :rotate(45deg);
	position :relative;
	top :20px;
	transition :transform 0.5s;
}
.efect2{
	width: 10px;
	position: relative;
	transform: rotate(360deg);
	transition: transform 0.5s;
	opacity: 0;
}
.efect3{
	transform :rotate(135deg);
	top :-9px;
	position :relative;
	transition :transform 0.5s;
}

lalu setelah itu ketika script javascipt nya, seperti di bawah ini.

setelah itu coba teman teman buka di webrowser teman teman.

gambar di atas sebelum di klik.

gambar di atas setelah di klik.

seperti itu lah Membuat Menu Burger dengan CSS dan Javascript, semoga bermanfaat yah teman teman.