Cara Membuat "Menu Icon" dengan HTML, CSS dan JavaScript

Saat ini "menu icon" telah menjadi standar yang umum digunakan dalam desain user interface. Terutama pada perangkat seluler dan situs web yang harus menyesuaikan tampilannya dengan ukuran layar yang berbeda.

Hal ini tentu seiring sejalan dengan meningkatnya penggunaan internet dengan perangkat mobile. Begitu juga dengan strategi mesin pencari Google yang lebih mendahulukan mobile-first indexing.

Oleh karena itu, pada kesempatan kali ini kita akan mempraktekan tutorial dari w3schools.com tentang menu icon. Tutorial tersebut akan kita coba pada platform blogspot meskipun sumber asal tidak mengatakan demikian.

Apa itu Menu Icon?

Menu icon atau dalam bahasa kita adalah ikon menu adalah simbol grafis yang digunakan untuk mengindikasikan adanya opsi menu dalam antarmuka pengguna. Tampilan ini sering digunakan pada perangkat seluler dan situs web responsif.

Biasanya terlihat sebagai tiga garis horizontal yang berdampingan yang diletakan di pojok kiri atau pojok kanan atas layar. Ini dikenal juga dengan sebutan "burger icon" atau "hamburger icon" yang menyimpan opsi menu di dalamnya.

Tujuan dari ikon tersebut adalah memberikan akses mudah ke opsi menu yang lebih luas. Dimana daftar opsi menu ini muncul ketika pengguna mengklik ikon menu. Setelah itu pengguna memilih opsi yang diinginkan pada menu tersebut.

Cara Membuat Menu Icon dengan HTML, CSS dan JavaScript

Ikon menu ini menyembunyikan opsi menu keseluruhannya ketika akses website melalui perangkat seluler. Sehingga tampilan menu website yang terlihat pengguna desktop tidak akan sama dengan mereka yang mengakses melalui mobile.

Hal ini tentu menguntungkan untuk desain web berbasis mobile. Karena ruang tampilan layar dapat dimanfaatkan secara efisien tanpa mengorbankan fungsionalitas menu yang penting.

Oleh karenanya, ikon menu ini merupakan sebuah fitur yang wajib dimiliki website. Dan pertemuan kita kali ini akan mendemonstrasikannya menggunakan hanya dengan kode-kode HTML, CSS dan JavaSript.

Cara Membuat Menu Icon pada Template Blogspot

Tutorial dengan judul cara membuat "Menu Icon" dengan HTML, CSS dan JavaScript ini saya batasi hanya dengan platform Blogger. Sedangkan sumber rujukan yang dijadikan referensi merupakan tutorial umum. Dengan kata lain, sumber asal tutorial ini tidak secara khusus hanya diterapkan pada blogspot.

Sudah siap melakukan ujicoba kode hari ini? Mari kita coba dengan mempraktekan pembuatan ikon menu pada template blogspot berikut ini.

1. Template Dasar Blogspot Sendiri dari Nol

Agar lebih fokus memahami kode hari ini tentang cara membuat menu icon. Sangat disarankan menggunakan template sendiri dari nol yang masih basic. Untuk penjelasan lebih detail bisa baca kembali artikel cara membuat template dasar.

Sedangkan untuk bahan praktek bisa gunakan template di bawah ini.

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta charset='utf-8'/> <meta content='width=device-width, initial-scale=1' name='viewport'/> <b:skin><![CDATA[ ]]></b:skin> </head> <body> <b:section class='main' id='main' showaddelement='yes'/> </body> </html>

2. Menambahkan Kode HTML Menu Icon

Kita masuk langkah inti pada bahasan ini yaitu menambahkan kode HTML menu icon. Silahkan copas kode di bawah ini dan tempatkan di antara tag awal <body> dan tag akhir </body>. Sebaiknya , kode di bawah ini juga diletakan sebelum tag: <b:section class='main' id='main' showaddelement='yes'/>. Perhatikan kode yang tertulis dengan kode HTML pada laman sumber rujukan. Kode di bawah ini dengan dua baris tag <div/> sedangkan kode asalnya terdiri atas 3 baris. Padahal hasil akhir yang diinginkan sama; yaitu icon menu dengan 3 baris horizontal.

3. Menambahkan CSS untuk Menu Icon

Selanjutnya masukan kode CSS di bawah ini dan letakan di antara tag "<b:skin><![CDATA[" dan tag akhir "]]></b:skin>".

div { width: 35px; height: 5px; background-color: black; margin: 6px 0; }

Setelah klik "Simpan" maka akan terlihat ikon menu seperti berikut ini:

4. Menambahkan CSS untuk Animated Menu Icon

Ikon menu yang dihasilkan dengan kode-kode di atas belum terlihat interaktif. Untuk mengubahnya lebih atraktif kita bisa menambahkan kode JavaScript. Namun sebelum ke sana cobalah ganti kode CSS pada nomor 3 di atas dengan kode di bawah ini.

.container { display: inline-block; cursor: pointer; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: 0.4s; } /* Rotate first bar */ .change .bar1 { transform: translate(0, 11px) rotate(-45deg); } /* Fade out the second bar */ .change .bar2 {opacity: 0;} /* Rotate last bar */ .change .bar3 { transform: translate(0, -11px) rotate(45deg); }

5. Menambahkan Kode JavaScript untuk Animated Icon

Setelah itu tambahkan kode JavaScript di bawah ini sebelum tag akhir </body>.

6. Memperbarui kode HTML Sebelumnya

Kode HTML sebelumnya tidak terhubung dengan fungsi JavaScript ketika ikon menu diklik. Agar berfungsi dengan benar silahkan ganti kode HTML pada nomor 2 di atas dengan kode di bawah ini.

7. Selesai.

Untuk menyimpan perubahan pada template blogspot silahkan klik "Simpan". Hasilnya, berikut ini penampakan menu icon ketik di klik melalui mouse.

Jika kita klik kembali ikon menunya maka akan kembali ke keadaan semula.

Penutup

Menu icon adalah elemen penting dalam sebuah desain web. Tidak terkecuali bagi pengguna subdomain .blogspot. Karena ikon ini dapat digunakan untuk membuat navigasi situs web lebih mudah dan intuitif bagi pengguna. Terutama sangat dibutuhkan website yang diakses melalui perangkat seluler.

Dan dalam tutorial yang sudah kita ikuti bersama, kita telah belajar cara membuat menu icon dengan menggunakan HTML, CSS, dan JavaScript. Adapun contoh penerapannya yaitu menggunakan platform Blogger yang masih gratisan.

Sekarang, Anda memiliki menu icon yang dapat disesuaikan yang akan membuat navigasi situs web Anda lebih mudah bagi pengguna. Silahkan eksplorasi lebih lanjut terutama pada bagian CSS.

Selamat mencoba.