Menu navigasi yang sederhana dan intuitif adalah salah satu elemen desain terpenting di situs web Anda. Ini bertindak seperti peta, membimbing pengunjung Anda di luar beranda. Dengan meningkatnya jumlah orang yang menggunakan internet di perangkat seluler mereka, situs web Anda juga harus memiliki menu navigasi yang ramah seluler.

Untungnya, Webflow telah mempermudah penambahan bilah menu hamburger yang dapat dilipat yang akan merampingkan situs seluler Anda. Teruslah membaca untuk mempelajari cara mengedit menu seluler ini di Webflow.

Cara Menambahkan Bilah Navigasi

Menu hamburger adalah elemen desain penting saat bekerja dengan ruang horizontal terbatas. Ini menghilangkan kebutuhan akan bilah navigasi tetap yang besar yang memakan ruang berharga.

On Webflow, menu ini dan fungsinya dibangun di dalam elemen NavBar. Menambahkan elemen ini ke desain Anda memerlukan empat langkah sederhana:
Ketuk ikon "+" di bagian atas panel kiri untuk membuka panel "Tambah". Gulir ke bawah ke bagian "Komponen". Klik dan tahan elemen "NavBar". Seret elemen ke header halaman.
Cara Mengedit Menu Seluler

Setelah Anda menambahkan bilah navigasi ke situs web, ada beberapa cara berbeda untuk menambahkan gaya dan kepribadian ke menu ini.

Cara Menambahkan Lebih Banyak Tautan ke Menu

Bilah navigasi elemen berisi tombol menu dan menu navigasi, dengan yang terakhir menahan tautan navigasi. Saat Anda menambahkannya ke desain Anda, akan ada beberapa tempat penampung tautan yang dapat Anda hapus atau edit dengan tautan situs web Anda.

Ikuti langkah-langkah ini untuk menambahkan lebih banyak tautan navigasi:
Klik pada elemen apa pun di dalam NavBar. Buka panel “Pengaturan Elemen” di sebelah kanan.Tekan ikon roda gigi untuk membuka "Pengaturan." Gulir ke bagian "Pengaturan NavBar". Ketuk tombol "Tambahkan Tautan".
Sekarang Anda memiliki jumlah tautan yang cukup untuk semua halaman situs web Anda yang relevan, saatnya untuk melakukan penautan yang sebenarnya.
Pilih tautan navigasi.Buka panel "Pengaturan Elemen". Temukan bagian "Pengaturan Tautan".Masukkan URL halaman web yang ditunjuk ke dalam bidang "URL".
Cara Mengubah Menu Animasi

Pada Webflow, Anda juga dapat mengubah tampilan menu seluler saat pengunjung mengklik tombol menu. Anda dapat memilih di antara tiga jenis animasi pengungkapan ini:
Drop Down – Secara default, menu seluler akan turun dari NavBar setelah pengunjung mengetuk tombol menu. Ini akan mengambil lebar jendela browser secara keseluruhan. Over Right – Jika Anda memilih animasi pengungkapan ini, menu ponsel Anda akan muncul dari sisi kanan layar. Menu ini akan mengambil seluruh ketinggian jendela browser.Over Left – Jenis menu ini identik dengan Over Right, kecuali menu navigasi akan bergerak dari sisi kiri layar Anda.
Untuk mengatur animasi pengungkapan yang Anda inginkan, lakukan hal berikut:
Pilih elemen apa pun di dalam NavBar.Buka panel "Pengaturan Elemen" di sisi kanan layar Anda.Ketuk ikon roda gigi untuk meluncurkan "Pengaturan." Arahkan ke bagian "Pengaturan NavBar".Klik opsi "Jenis".Pilih gaya pilihan dari menu tarik-turun.
Di bagian “Pengaturan NavBar”, Anda juga dapat mengontrol yang berikut:
Easing open: tipe kurva yang digunakan untuk menganimasikan transisi terbuka.Easing close: tipe kurva yang digunakan untuk menganimasikan transisi tutup .Duration: berapa lama waktu yang dibutuhkan untuk menu muncul.
Perhatikan bahwa durasi transisi diukur dalam milidetik.

Cara Mengubah Menu Styling

Webflow memudahkan gaya bagian mana pun dari bilah navigasi, memungkinkan Anda untuk memasukkan menu seluler dengan mulus ke dalam desain situs web.

Untuk menata gaya tombol menu, lakukan hal berikut:
Pilih tombol menu.Buka panel “Gaya” di sebelah kanan (ikon kuas).
Panel Gaya memungkinkan Anda mengubah setiap aspek tombol menu. Paling umum, desainer mengubah warna dan ukuran latar belakang tombol.

Untuk mengubah warna latar belakang, lakukan hal berikut:
Buka bagian "Latar Belakang". Ketuk ikon penurunan warna untuk membuka "Pemilih Warna".Pilih warna yang diinginkan.
Jika Anda ingin mengubah ukuran ikon hamburger, ikuti langkah-langkah berikut:
Arahkan ke bagian "Tipografi". Menambah atau mengurangi ukuran ikon di bidang "Aa".
Anda juga dapat mengubah warna ikon di bidang di atas, bertanda dengan huruf A dan titik warna.

Meskipun ada banyak cara untuk menyesuaikan tombol menu, Anda tidak dapat menggantinya dengan elemen teks atau gambar khusus.

Navigasi Seluler Menjadi Mudah

Saat mendesain menu seluler, Anda ingin mendapatkan hasil maksimal dari ruang yang cukup terbatas. Jadi, cobalah untuk tidak membanjiri menu dengan opsi untuk menghindari membingungkan pengunjung Anda. Selain itu, pastikan pilihan menu singkat, jelas, dan mudah dibaca.

Setelah itu, Anda dapat bermain dengan gaya menu dan animasi untuk membuat pengunjung tetap tertarik di setiap langkahnya.

Sudahkah Anda mencoba menambahkan menu seluler ke situs web Anda? Berapa banyak pilihan yang Anda sertakan? Beri tahu kami di bagian komentar di bawah.