Dalam dunia desain, gambar merupakan salah satu elemen penting yang harus ada. Gambar dapat memberikan informasi lebih dibandingkan 1000 kata. Nah, salah satu penerapannya adalah adanya ikon dalam interface website maupun aplikasi lainnya. Ikon bisa disisipkan dalam bentuk image/gambar bitmap dengan ekstensinya yang bermacam-macam(jpg, png, gif, tiff, dan webp), gambar vektor(svg), dan font ikon seperti Font Awesome.
Nah, pada postingan kali ini kita akan mencoba membuat sebuah ikon. Ikon yang akan dibuat adalah ikon hamburger menu. Bagi kalian yang sudah familiar dengan framework front-end Bootstrap, bisa dibilang ikon ini sudah tak asing lagi. Karena pada tampilan mobile, pada komponen navbar/navigation bar di bagian pojok kanan atas terdapat ikon ini.
Dengan CSS yang powerfull, kita pun bisa membuat ikon ini. Dengan sedikit trik khusus Kenapa kita nggak coba buat aja sendiri..?
Struktur HTML
Pertama kali, kita buat struktur HTML-nya. Ikon hamburger yang kita buat terdiri dari tiga tag div berbentuk stik yang memanjang horizontal dan bertumbuk menjadi seperti sebuah ikon. Tiga buah stik yang bertumpuk ini dibungkus dengan sebuah tag div dengan nama class hamburger. Dengan pembungkus ini kita bisa mengatur posisi ikon kita.
Ok.., siapkan text editor kesayangan kalian plus secangkir kopi biar lebih greget.. :D. Kemudian buat file baru. Simpan dengan nama apapun yang kalian inginkan dan yang terpenting simpan file dengan ekstensi *.html. Buat struktur html sederhana seperti pada box code di bawah.
<div class="hamburger"> <div class="stik"></div> <div class="stik"></div> <div class="stik"></div> </div>
Kode CSS
Setelah kita buat struktur HTML-nya, kita akan sedikit bermain dengan kode CSS.
.hamburger {
width: 35px;
}
.stik {
display: block;
height: 5px;
background-color: #00ab6b;
border-radius: 3px;
}
.stik:not(:first-child) {
margin-top: 5px;
}
Berikut ini penjelasan dari kode css di atas.
Masing-masing stik akan ditampilkan secara block, yang mana lebarnya akan memenuhi lebar kontainernya. Pada kasus ini kontainernya adalah tag div dengan class .hamburger yang berlebar 35 piksel. Kemudian masing-masing .stik akan memiliki lebar 5 piksel. Lalu Sobat CSS Unique buat border-radius-nya 3 piksel. Untuk membuat jarak antar .stik, Sobat CSS Unique bisa gunakan properti margin-top dengan value 5px. Karena kita memakai properti margin-top, maka kita hanya menyeleksi stik yang bukan pada urutan pertama. Nah, untuk ini kita bisa gunakan pseudo class :not() dan :first-child. Nah, untuk memberi warna pada masing-masing stik, pada selector css.stick Sobat CSS Unique tambahkan properti background-color dan Sobat CSS Unique isi dengan value warna yang diinginkan. Pada kasus ini saya gunakan warna favorit saya yaitu hijau kebiruan dengan kode heksadesimal #00ab6b.
Hasil
Finally, simpan file dan buka file di browser kesayangan. Dan tara... Seperti inilah hasilnya.
See the Pen Membuat Ikon Hamburger Menu dengan CSS by orangtanah (@orangtanah) on CodePen.
Sekian dulu untuk postingan "Membuat Ikon Hamburger Menu dengan CSS" ini.. Jangan ragu untuk kasih feedback di kolom komentar di bawah ini. Share juga ke teman-teman... :) Sampai jumpa di postingan berikutnya...
Posting Komentar