
Cara simpel membuat icon menu hamburger website
Icon menu hamburger adalah tiga baris horizontal yang disusun secara vertikal. Icon burger ini sudah menjadi icon wajib web responsive, aplikasi Android maupun web app lainnya untuk menyembunyikan listing menu.
Dalam irisan icon hamburger tersebut menu-menu yang disajikan oleh sebuah blog secara automatis tersembunyi dengan rapi di layar mobile
Sama halnya seperti isi dalam sebuah hamburger, ada sayuran, daging, telur dadar, lapisan keju dan terakhir ada saus dan mayonnaise, disusun dengan rapi dalam satu potong roti belah dua.
Ada banyak cara untuk membuat icon burger template website. Cara paling kuno, dengan meng-insert desain icon dalam bentuk grafik berformat .png
, .jpg
dan .gif
.
Yang masih menggunakan cara tersebut, segera tinggalkan, karena web app sudah semakin modern, desain jadul seperti itu sudah berakhir di era blogger 2.0.
Nah.. berikut ini ada beberapa motode cara membuat icon menu hamburger untuk tampilan blog maupun web app.
Insert icon dari Font Awesome
Salah satu yang paling mainstream menggunakan icon font awesome. Cukup panggil kode <i class="fa fa-burger fa-lg"></i>
icon burger-nya pun tampil. 😮
Tapi… Kalau cuma butuh satu icon burger saja, menggunakan font awesome kurang tepat, karena menambah berat loading website, karena library font awesome lumayan besar ukuran filenya.
Selain itu, icon burger dari font awesome kurang efektif untuk dimanipulasi efek animasi hover mouse maupun efek klik.
Insert icon burger grafis vector format .svg
Alternatif yang lebih bagus, insert file gambar format .svg
, simple, sangat gampang untuk ditambah efek animasi, beban loading website juga super duper cepat.
Ada tapinya… Baris kode tambah panjang, apalagi path kurva vektonya banyak, sehingga untuk koding pemula, menangani file .svg
sedikit membingungkan.
Selain itu, mengelola file .svg
juga harus menguasai software vektor desain grafis seperti; Adobe Illustrator, CorelDraw dan aplikasi vektor lainnya.
Kreasi icon burger dari tag HTML dan CSS itu sendiri
Alternatif yang paling sederhana, mudah dan sangat efektif sekaligus sangat efisiensi beban load site adalah dengan memanfaatkan sintag HTML
dan style CSS
itu sendiri.
Implementasi kreasi icon hamburger dengan tag HTML
dan memanipulasi style CSS
itu sendiri banyak sekali caranya.
Berikut cara simpel membuat icon menu hamburger website pilihan InsertApps. Tips ngoding kali ini InsertApps sajikan dalam tiga role model coding. Dari level; newbie, programmer pemula dan pro + bonus, tips bagi yang menggunakan Framework Basscss.
Lihat juga: Cara membuat tombol icon close.
1. Cara coding ala desain grafis

Setiap garis beri nama layernya—desainer yang tidak memberi nama layer, batu nisan kuburannya akan dicetak dengan huruf comic sans. 😆
<div class="toggle margin-right">
<div class="burger-line-top"></div>
<div class="burger-line-center"></div>
<div class="burger-line-bottom"></div>
</div>
Baris kode ini <div class="burger-line-top"></div>
akan mencetak garis secara horizontal. Dan diulangi 3x, setiap baris kode ditandai dengan nama class
secara berbeda.
Untuk styling CSS-nya:
.toggle {
cursor: pointer
}
.margin-right {
margin-right: 1rem
}
.burger-line-top {
width: 1.125rem;
height: .1875rem;
margin: .1875rem 0;
background-color: gray
}
.burger-line-center {
width: 1.125rem;
height: .1875rem;
margin: .1875rem 0;
background-color: gray
}
.burger-line-bottom {
width: 1.125rem;
height: .1875rem;
margin: .1875rem 0;
background-color: gray
}
Hasilnya akan tampil icon ☰.
2. Cara coding ala programmer
Sintag HTML masih sama, hanya saja, pengulangan baris dengan memanggil satu class
saja.
<div class="burger">
<div class="burger-line"></div>
<div class="burger-line"></div>
<div class="burger-line"></div>
</div>
Sintag CSS-nya yang disederhanakan menjadi:
.burger {
cursor: pointer;
margin-right: 1rem
}
.burger-line{
width: 1.125rem;
height: .1875rem;
margin: .1875rem;
background-color: gray
}
3. Cara coding icon burger ala programmer pro 😋
Cara ini, kode jadi lebih sederhana dan lebih simple.
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
Tambahkan style CSS berikut ini.
.burger {
cursor: pointer;
height: 14px;
display: flex;
flex-direction:column;
justify-content:space-between;
margin-right: 1rem
}
.burger span {
display: block;
width: 18px;
height: 2px;
border-radius: 3px;
background-color: gray
}
Dengan menambahkan CSS flexbox, hasil akhir dari tombol burger ini lebih dinamis, karena margin garis dihilang. Sedangkan susunan garis auto strike mengikuti prilaku CSS flexsible layout.
BONUS. Class code untuk framework Basscss
Cukup panggil class flex flex-column justify-between pr2
sintag bawaan dari framework Basscss. Tambahkan satu class tambahan; yaitu class burger
.
<div class="burger flex flex-column justify-between pr2">
<span></span>
<span></span>
<span></span>
</div>
Tambahkan style CSS berikut untuk class burger
dan span
.
.burger {
cursor: pointer;
height: 14px;
}
.burger span {
display: block;
width: 18px;
height: 2px;
border-radius: 3px;
background-color: white;
}
CONCLUSION
Dari ketiga cara koding di atas, apapun bentuk penulisan kodenya tujuannya sama; untuk membuat icon menu hamburger.
Namun, cara coding yang pertama, bentuk penulisan style CSS-nya tambah panjang dan berulang-ulang, coding-nya tidak sesuai dengan prinsip DRY (Don’t repeat yourself). 😱
Untuk pemula yang lagi belajar koding, cara coding yang pertama tidak di anjurkan untuk di implementasi ke projek yang sebenarnya. Tujuan ngoding cara pertama, untuk lebih mudah dipahami saja, cara kerja dan konsep kodingnya dibuat sesederhana mungkin. 😌
Tapi setelah menguasai basic programming web desain. Pakai cara yang tiga saja, kodenya menjadi lebih simple dan terlihat pro. 😏
Comment
comments powered by Disqus