halo teman teman webmaster dumetschool, jumpa lagi di tutorial tutorial web desain dan web programming dumet school. Membahas tentang design web memang tidak ada habisnya seiring dengan terus berkembangnya ilmu tentang desain web. nah kali ini kita akan belajar Membuat Menu Burger Arrow Left dengan CSS dan Javascript. yuk langsung saja kita praktekan.
pertama tama siap kan file index html dan buat struktur html nya berikut.
<!DOCTYPE html> <html> <head> <title> Menu Burger Arrow LEft CSS dan Javascript </title> </head> <body> <div class="burger"> <span></span> <span></span> <span></span> </div> </body> </html>
tentunya strukturnya sangat lah sederhana, kita punya class burger yng di dalam nya ada 3 span. nah setelah itu kita buat 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 sekarang kalian buka di webrowser kalian masing masing,
sebelum kita klik.
sesudah kita klik, dan ada sedikit efect transisi nya.
sekian tutorial Membuat Menu Burger Arrow Left dengan CSS dan Javascript, semoga bermanfaat yah teman teman