Membuat Menu Burger Arrow Left dengan CSS dan Javascript
halo teman teman webmaster Source Code Aplikasi, jumpa lagi di panduan panduan web desain dan web programming Source Code Aplikasi. Membahas mengenai design web memang tak ada habisnya seiring dengan terus berkembangnya ilmu mengenai desain web. nah kali ini kita akan belajar Membangun Fitur Burger Arrow Left dengan CSS dan Javascript. yuk seketika saja kita praktekan.
pertama-tama tama siap kan file index html dan bikin struktur html nya berikut.
<!DOCTYPE html>
<html>
<head>
<title> Fitur Burger Arrow LEft CSS dan Javascript </title>
</head>
<body>
<div class=burger>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
pastinya strukturnya betul-betul lah sederhana, kita punya class burger yng di pada nya ada 3 span. nah setelah itu kita bikin css nya teman teman.
*{padding: 0; margin: 0;}
.burger{
cursor: pointer;
margin: auto;
width: 100px;
margin-top: 40px;
padding: 15px;
height: 100px;
}
span{
background: #f1c40f;
width: 100px;
height: 5px;
margin: 10px;
display: block;
transition: 0.5s;
border-radius: 10px;
}
span:nth-child(2){
background: #bdcebc;
width: 100px;
height: 5px;
margin: 10px;
}
.efect1{
transform :rotate(45deg);
position :relative;
top :33px;
left: -9px;
width: 50px;
z-index: 1;
/*transition : 0.5s;*/
}
.efect2{
width: 10px;
position: relative;
top: 1px;
transform: rotate(360deg);
/*transition: 0.5s;*/
/*opacity: 0;*/
}
.efect3{
transform :rotate(135deg);
top :-30px;
left: -10px;
position :relative;
/*transition :0.5s;*/
width: 50px;
}oke terakhir kita perlu sedikit kode javascript, ketikan script nya di bawah ini yah teman teman.
nah coba kini kalian buka di webrowser kalian masing masing,
sebelum kita klik.
setelah kita klik, dan ada sedikit efect transisi nya.
demikianlah panduan Membangun Fitur Burger Arrow Left dengan CSS dan Javascript, semoga bermanfaat yah teman teman
Sumber https://kursuswebsite.org
