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;
}

DEMO

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. 😏