Membuat Icon Hamburger Menu Dengan CSS
Monday, October 29, 20180 Comments
Membuat Icon Hamburger Menu Dengan CSS
A dreamer who trying to loves writing and blogwalking. Man of nature. The wrong man in the wrong time. Going with the flow. Penggemar CSS dan HTML.
Membuat Icon Hamburger Menu Dengan CSS
Hari ini tanggal 29 Oktober 2018 aku ngedit template Qolorful untuk versi mobile. Tepatnya adalah membuat icon Hamburger Menu untuk tampilan mobile blog ini. Jadi yang sebelumnya menunya berantakan waktu di akses dari mobile sekarang bisa rapih dan terlihat cakep.
Mungkin ada yang dari kalian yang belum tau tentang Hamburger Menu, lalu apa itu Hamburger Menu? Bukannya Hamburger itu makanan cepat saji itu ya. Oke biar aku jelasin dulu, Hamburger Menu atau Hamburger Icon adalah nama yang diberikan untuk ikon menu yang ditemukan di program dan situs web baru yang menyembunyikan menu tradisional.
Hamburger Icon & CSS
Hamburger Menu disebut juga sebagai menu tiga baris, dengan menggunakan Hamburger Menu kita bisa lebih mudah untuk melihat opsi program atau website pada perangkat mobile. Dinamakan Hamburger Menu karena terlihat seperti hamburger dengan roti di atas dan di bawah dan daging di antara roti.
Menu Mobile
Nah, karena biasanya kalo ikon itu kan berformat gambar .PNG atau .SVG kali ini kita bakalan membuat icon Hamburger Menu menggunakan CSS. Oke langsung aja aku share kode HTML dan CSS nya seperti berikut ini.
Dari kode CSS di atas abaikan kode dibawah ini, kode ini saya sisipkan hanya untuk merubah warna background halaman result di Codepen.
/* Kode Untuk Background Halaman */
body {
  background-color: #1d1e22;
}
Lalu untuk kode CSS yang lainnya seperti warna, padding, bisa menyesuaikan sesuai selera dan sikon masing-masing dan apabila ada yang ingin ditanyakan bisa ditulis di kolom komentar. Untuk melihat Hamburger Menu di blogku ini silahkan kamu mengakses situs blogku ini dari perangkat Smartphone. Sekian untuk artikel kali ini, kita bertemu lagi di artikel-artikel berikutnya. Ciao!

Sumber
  • https://www.w3schools.com/howto/howto_css_menu_icon.asp

No comments:

Post a Comment