Membuat Menu Burger dengan CSS dan Javascript
memperhatikan design sekecil apapun menjadi bagus yaitu biasanya kewajiban seorang design web, contohnya Burger Fitur, yang bila mana kita klik fitur tersebut akan berubah dan memberikan efect animasi yang bagus di fitur tersebut, nah kini kita bahas mengenai Membangun Fitur Burger dengan CSS dan Javascript.
pertama-tama tama bikin terlebuih dahulu index.html dan ketikan struktur html berikut
<!DOCTYPE html>
<html>
<head>
<title> Fitur Burger CSS dan Javascript </title
</head>
<body>
<div class=burger>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
setelah itu bikin 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 Membangun Fitur Burger dengan CSS dan Javascript, semoga bermanfaat yah teman teman.
Sumber https://kursuswebsite.org
