Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

7 Pendekatan Non-raster untuk Membuat Ikon Menu "Hamburger"

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Entah Anda penggemar nama yang cheesy atau tidak, nampaknya ikon menu "hamburger" yang terkenal ada di sini - setidaknya untuk sementara waktu.

As seen on TC
Hamburger, seperti yang terlihat pada TechCrunch

Dalam tutorial ini kita akan melihat sejumlah pendekatan untuk membuat dan menata ikon seperti itu tanpa menggunakan gambar raster. Saya punya tujuh pilihan untuk ditunjukkan pada Anda, jadi sebaiknya kita buka ...

Mengapa Non-raster?

Menggunakan gambar adalah cepat dan sederhana jadi mengapa repot mencari pendekatan alternatif? Berikut adalah beberapa alasan yang akan kita gunakan untuk mengukur keberhasilan masing-masing solusi potensial melawan:

  • Memuat lebih sedikit aset mengurangi permintaan HTTP
  • Ikon non-raster meningkat (dan turun) tak terbatas untuk tampilan kepadatan tinggi
  • Kita bisa menambahkan styling dan interaktivitas ekstra dengan CSS
  • Ini adalah tantangan yang bagus!

#1. Menggunakan SVG

Kita akan melihat beberapa contoh membuat ikon menu dengan CSS dalam sekejap, namun daftar saya tidak lengkap tanpa menyebutkan gambar SVG sebagai pilihan yang tepat.

Jika kode penulisan bukan kekuatan Anda, namun Anda tetap menginginkan manfaat dan skalabilitas elemen gambar untuk tampilan dengan kepadatan tinggi, grafis vektor dalam format SVG adalah pilihan tepat.

SVG dapat digunakan dalam beberapa cara:

SVG <img>

SVG dapat ditambahkan ke src dari tag img seperti format gambar lainnya.

background-image SVG

Gambar SVG yang sama juga bisa digunakan sebagai gambar latar belakang di CSS

SVG Inline

SVG juga bisa ditulis secara inline menggunakan XML. Jika Anda mengekspor SVG dari aplikasi seperti Adobe Illustrator dan membukanya di editor kode, Anda akan melihat seperti apa kode dasarnya.

Screenshot of SVG code

Tip: menyalin objek dari Illustrator, lalu menempelkan langsung ke editor teks akan memberi Anda kode SVG juga.

Meskipun mungkin terasa aneh untuk menyalin dan menempelkan XML ini ke dalam template halaman Anda, saat mengambil pendekatan ini Anda dapat benar-benar memanipulasi gaya elemen individual dari SVG di CSS.

Cukup bagus, ya?

Untuk pendekatan yang lebih mengesankan lagi, itu mungkin untuk menganimasikan SVG. Contoh bagus untuk menganimasikan ikon menu dapat dilihat dalam tutorial fantastis ini dari Kyle Henwood pada Membuat Tombol Burger HTML SVG.

Menggunakan SVG dapat mengurangi permintaan dan memungkinkan manipulasi melalui CSS jika seperti yang ditunjukkan di atas. Bila menggunakan SVG sebagai tag img atau background-image CSS, satu-satunya kriteria pada daftar saya yang terpuaskan adalah skalabilitas tak terbatas.

Kita bisa melakukan lebih baik.

#2. Menggunakan Font Ikon

Pendekatan kedua, adalah menggunakan Font Ikon.

Font ikon sama seperti jenis huruf kustom lainnya yang akan Anda tambahkan melalui @font-face tapi bukannya berisi huruf alfabet, itu berisi serangkaian simbol. Ini sering ditambahkan ke halaman melalui properti content dari pseudo elemen :before atau :after agar markup tetap bersih dan rapi dan bebas dari elemen presentasi.

Salah satu layanan favorit saya untuk font ikon adalah Icomoon yang memiliki pustaka dengan font ikon gratis yang dapat Anda ambil dan pilih untuk membuat milik Anda sendiri.

Screenshot from Icomoonio

Untuk membuat font yang benar-benar sesuai dengan desain ikon Anda sendiri, ada fitur untuk mengupload gambar SVG Anda sendiri melalui tombol "Import Icons". Aplikasi ini menghasilkan font dan semua kode yang diperlukan untuk menggunakan font buatan tangan Anda, baik dengan mendownload file font dan CSS atau menggunakan tag link untuk menghubungkan versi host darinya di head dari halaman Anda. Saya telah menggunakan layanan ini beberapa kali di seluruh proyek klien dan ini sangat menyenangkan untuk digunakan!

Font ikon dapat diskala (meskipun font mereka tunduk pada anti-aliasing) dan dapat dimanipulasi sebagai teks di CSS namun memuatnya ke halaman tidak memerlukan permintaan tambahan untuk file font dan stylesheet. Untuk ikon yang lebih kompleks seperti beberapa gambar di atas, ini adalah pendekatan yang bagus namun karena ikon menu sangat sederhana, mungkin kita bisa membuatnya menggunakan fitur di CSS.

#3. Metode Bootstrap

Framework CSS seperti ZURB Foundation atau Twitter Bootstrap sangat populer, jadi mungkin kita bisa melihat ke orang-orang ini untuk mendapatkan pendekatan yang cenderung bagus untuk membuat ikon kita?

JavaScript Bootstrap secara otomatis akan menciutkan menu dropdown untuk browser yang memiliki lebar kurang dari 768px dan menggantinya dengan tombol toggle nav-bar.

Saat menggunakan web inspector untuk melihat bagaimana ikon mereka dibuat, kita melihat berikut:

Elemen button dengan empat elemen span di dalamnya; tiga di antaranya digunakan untuk membuat garis horizontal ikon menu dan yang pertama adalah untuk pembaca layar hanya karena teks "Toggle navigation" diposisikan di luar layar.

CSS ditambahkan ke setiap icon-bar menetapkan warna latar belakang untuk setiap bar beserta dimensi dan sudut pembulatan yang sangat halus.

Jika sudut yang sedikit membulat pada setiap garis horizontal itu penting untuk Anda, maka pendekatan ini adalah salah satu dari sedikit pilihan CSS yang memungkinkan efeknya tercapai.

Manfaat lain untuk membelah setiap baris menjadi elemennya sendiri adalah jika Anda ingin menganimasikan masing-masing antara keadaan terbuka dan tertutup saat beralih. Contoh bagus dari hal ini dapat dilihat pada desain ulang Star Wars yang baru.

Saya sedikit terkejut saat mengetahui bahwa framework populer semacam itu menggunakan lima elemen terpisah untuk menciptakan elemen UI yang relatif sederhana ini, tapi saya yakin mereka memiliki alasan bagus untuk melakukannya. Saya telah melihat pendekatan serupa yang digunakan di tempat lain juga (tanpa Bootstrap) jadi itu tentu saja lebih umum bahwa saya akan mengharapkannya. Lihatlah sumber di situs Media Temple dan Anda akan melihat mereka mengambil pendekatan hamburger secara harfiah!

Jika Anda memilih untuk menjaga agar markup Anda sebersih mungkin, ada beberapa metode lain yang dapat kita lihat; dan mereka hanya menggunakan satu elemen saja ...

#4. Border CSS

Ikon menu biasa ini sangat sederhana dalam desain; hanya tiga garis horizontal

Baris pertama dan terakhir dapat dibuat dengan border-top dan border-bottom dari tag anchor yang disetel ke display:inline-block. Garis tengah dapat ditambahkan dengan border pada pseudo elemen :after.

Dengan HTML berikut, kita dapat membangun beberapa gaya generik untuk setiap pendekatan yang berbeda dengan kelas menu-icon dan kemudian menambahkan gaya tertentu untuk yang ini menggunakan border dengan kelas border-icon.

Pendekatan ini memiliki dukungan browser yang terdalam; pseudo elemen didukung di IE8 dan di atasnya serta border dan posisi didukung di mana-mana!

Metode ini menandakan semua kotak kita untuk membuat ikon non-raster tapi ada beberapa pendekatan CSS lainnya yang bisa kita lihat sebelum memilih pemenangnya.

#5. CSS Box Shadow

Jika Anda cukup beruntung untuk tidak memerlukan dukungan IE8, ada beberapa alternatif yang tersedia yang menggunakan beberapa fitur yang sedikit lebih baru di CSS. Saya kira jika Anda hanya perlu menampilkan ikon menu di perangkat seluler, Anda akan dapat menggunakan pendekatan ini tanpa khawatir dengan dukungan browser lawas ...

Salah satu pendekatannya adalah dengan menggunakan beberapa deklarasi box-shadow tanpa blur untuk menciptakan serangkaian garis solid.

Untuk memastikan bahwa ikon memiliki area yang dapat diklik dengan benar, rangkaian bayangan harus ditambahkan melalui pseudo elemen dan kemudian diposisikan sehingga muncul sebagai lapisan di bawah elemen a.

Satu-satunya kelemahan dari pendekatan ini adalah bahwa ikon itu perlu ditempatkan pada sesuatu dengan latar belakang yang solid (mis. #196e76 untuk Tuts+ hijau) untuk mendapatkan efek bayangan bergaris agar bekerja. Saya menggunakan #196e76 untuk Tuts+ hijau dalam kasus ini namun Anda perlu menukarnya agar sesuai dengan warna latar belakang Anda.

Sekali lagi, pendekatan ini memenuhi daftar persyaratan namun langkah ekstra untuk memposisikan pseudo elemen untuk membawa bagian visual ikon di bawah bagian yang dapat diklik itu terasa sedikit tersembunyi bagi saya. Ini terlihat bagus, tapi bukan solusi yang paling elegan.

#6. Gradien CSS

Pendekatan CSS terakhir adalah yang paling ramping. Dengan menggunakan satu elemen, tanpa pseudo element, kita bisa membuat rangkaian garis horisontal untuk ikon menggunakan gradien linier tunggal dengan serangkaian perhentian warna.

Saya telah menggunakan spec tanpa prefix untuk gradien di sini agar contohnya terlihat bersih. Untuk menghasilkan gradien dan mendapatkan varian vendor prefix, periksa Generator Gradien CSS Colorzilla.

Ini adalah pendekatan yang paling sederhana dan paling fleksibel sejauh ini. Yang lain agak rapuh karena jika Anda ingin men-tweak ukuran atau posisi mereka, Anda akhirnya perlu men-tweak beberapa nilai.

Masalah membutuhkan warna latar belakang yang solid di belakang ikon juga dihapus di sini dengan menggunakan warna transparent di antara garis putih.

Karena pendekatan gradien ini dibuat dengan menggunakan persentase perhentian warna, membuat ikon lebih lebar atau lebih tinggi sesederhana mengubah properti width dan height dari elemen.

Dari ketiga pendekatan CSS, inilah favorit saya. Jika saya akan menggunakan CSS untuk membuat ikon saya, inilah yang saya gunakan - dan faktanya, saya telah melakukannya di situs pribadi saya. Tapi sebelum kita menyelesaikan semuanya, hanya ada satu lagi yang ingin saya tunjukkan...

#7. Menggunakan Keyboard?

Saya telah bermain-main dengan semua pendekatan ini sebelumnya namun beberapa lebih sesuai daripada yang lain; dukungan browser dan fleksibilitas sering menjadi faktornya, jadi jika Anda ingin menggunakan hal-hal di atas, pertimbangkan faktor-faktor tersebut.

Namun, saya baru saja menemukan pendekatan yang jauh lebih sederhana dan mudah dilakukan saat saya sedang mengajar kelas pengembangan web responsif.

Sebenarnya ada karakter dalam set karakter UTF-8 yang hampir identik dengan ikon "hamburger" klasik. Saya menemukannya ketika mencari sesuatu yang sama sekali berbeda pada Copy Paste Character di bagian bentuk grafis mereka.

Karakter spesial ini: ☰ disebut Trigram for Heaven. Karakter U+2630 ini dalam kode unicode dan sangat mirip dengan ikon menu yang ada di mana-mana. Ini adalah salah satu dari delapan Trigams yang merupakan kelompok simbol yang memiliki makna mendalam dalam filsafat China. Untuk info lebih lanjut, Anda dapat membaca lebih lanjut tentang delapan Trigram di sini.

Untuk menggunakannya dalam proyek Anda, pergi ke Copy Paste Character dan klik pada simbol yang mana akan menyalinnya ke clipboard Anda. Cukup paste-kan ke editor teks pilihan Anda di tempat yang Anda inginkan "ikon" muncul. Anda juga dapat menyalinnya langsung dari teks body dalam artikel ini jika Anda mau.

Anda ingin memastikan dokumen Anda menggunakan set karakter UTF-8 seperti yang ditentukan oleh tag meta di head dari halaman:

Karena ini hanya konten tekstual, ia bisa juga ditata dalam CSS agar lebih besar, memberinya jarak, mengubah warnanya dan segala hal lain!

Rekap

Jadi, kita melihat sejumlah cara untuk membuat dan menambahkan ikon menu hamburger ke sebuah proyek. Kita melihat SVG dan font ikon dan menangani tiga pendekatan CSS-only tapi akhirnya menemukan solusi paling sederhana dari semuanya; menggunakan karakter unicode.

Menggunakan "Trigram of Heaven" mengesalkan semua persyaratan untuk tidak menggunakan gambar raster: membutuhkan nol permintaan HTTP, skalabilitas layar kepadatan tinggi yang tak terhingga, dapat dimanipulasi dengan CSS dan sangat sederhana, sehingga membebaskan kita untuk terus mencari tantangan menarik lainnya untuk ditangani! Saya kira itu selalu membayar untuk menemukan solusi sederhana sebelum menyelam mahir dengan CSS Anda...

Jika Anda memiliki pendekatan tambahan untuk menciptakan ikon "hamburger", saya ingin mendengarnya di komentar!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.