Ketika datang ke navigasi situs web, aturan praktis yang lama adalah konten tidak boleh lebih dari satu atau dua klik. Ini semua tentang memastikan pengguna dapat menemukan apa yang mereka butuhkan tanpa harus melewati rintangan.
Tetapi semakin banyak konten yang Anda miliki, semakin sulit mengatur navigasi. Menu drop-down yang panjang atau yang memiliki beberapa level bersarang bisa jadi sulit untuk digunakan. Mereka lebih cenderung mengirim calon pelanggan ke situs lain daripada membujuk mereka untuk menjelajahi situs Anda.
Di situlah mega menu yang dirancang dengan baik dapat membuat perbedaan. Mereka menyediakan cara untuk mengatur item menu dengan rapi dan memungkinkan pengguna menemukan dengan tepat apa yang mereka cari.
Mereka juga sangat fleksibel. Selain teks, mereka dapat menampung apa pun mulai dari gambar hingga UI pencarian – semuanya menggunakan teknik tata letak CSS standar.
Hari ini, kami akan membagikan 8 cuplikan CSS dan JavaScript untuk membuat menu mega. Anda akan menemukan segalanya mulai dari navigasi sederhana berbasis teks hingga UI bergaya kaya. Ini dia!
Header Besar & Menu Mega oleh Sicontis
Sementara animasi bisa menjadi luar biasa, itu juga bisa menghalangi tugas-tugas dasar seperti navigasi. Cuplikan ini melakukan pekerjaan yang baik untuk menghindari jebakan itu dengan membuka layar penuh. Klik ikon “hamburger” dan menu besar yang mudah dibaca akan muncul. Sedikit ketenangan untuk meningkatkan pengalaman pengguna (UX).
Lihat Pena Tantangan Codepen;Header Besar/Menu Mega oleh Sicontis
Navigasi Menu Mega CSS Murni oleh Nick Else
Terkadang kurang benar-benar lebih banyak dalam menu mega. Cuplikan berbasis teks sederhana ini dibuat seluruhnya menggunakan CSS. Tidak ada JavaScript yang membengkak atau efek khusus yang tidak perlu. Hanya dasar yang kuat untuk mengatur konten.
Lihat Pena Navigasi Menu Mega CSS Murni oleh Nick Else
Menu Mega Pondasi Bersih oleh Endre CZÖVEK
Jika Anda bekerja dengan kerangka kerja CSS seperti Foundation, Anda mungkin memiliki langkah awal dalam membangun menu mega. Dalam contoh ini, penulis menggunakan fitur bawaan kerangka kerja untuk menciptakan estetika yang bersih. Penambahan ikon dan gambar membuat menu ini mudah dinavigasi dan menyenangkan untuk dilihat.
Lihat Pena Tanpa Judul oleh Endre CZÖVEK
Menu Mega Beberapa Kolom oleh Reza Baharvand
Menu mega yang sangat bergaya ini menawarkan banyak stimulasi visual. Itu juga menarik perhatian Anda dengan submenu yang membentang bermil-mil yang mencakup banyak kolom dan gambar. Ini menyesuaikan dengan baik di ponsel, melayani mereka yang terbiasa dengan gulungan panjang.
Lihat Pena Tanpa Judul oleh Reza Baharvand
Menu Mega Flexy Seksi oleh Mike Torosian
Ada banyak cinta tentang cuplikan ini. Menu diatur, menarik, dan menawarkan pizzazz yang cukup untuk mengesankan pengguna. Ini menggabungkan animasi SVG dan jQuery untuk membuat UI yang sangat intuitif.
Lihat Pena Menu Mega Flexy Seksi oleh Mike Torosian
Menu Mega Vertikal dengan CSS Murni oleh Syakir Rahman
Menu mega bukan hanya urusan horizontal – dan cuplikan ini ada di sini dengan bukti. Dibangun dengan CSS murni, ia menampilkan animasi pengungkapan yang apik dan tata letak yang bersih. Ini bisa menjadi solusi yang sangat baik untuk toko eCommerce dengan terlalu banyak kategori produk untuk ditampilkan di bilah navigasi tradisional.
Lihat Pena Menu Mega Vertikal dengan CSS Murni oleh Syakir Rahman
Header Bootstrap & Menu Pahlawan oleh Benjamin
Berdasarkan Bootstrap, Anda akan menemukan menu drop-down dan mega dalam contoh ini. Kombinasi penggunaan warna yang cerdas (terutama batas biru di bagian atas setiap submenu) dan tata letak yang menarik bekerja dengan baik di sini. Ini menghasilkan pengalaman navigasi yang menyenangkan secara keseluruhan.
Lihat Pena Depan – Header & Pahlawan oleh Benjamin
Menu Mega Diagonal oleh Tim Normanton
Cuplikan ini mengubah konsep menu mega – dengan cara yang baik! Itu dimulai dengan menu hamburger segitiga yang, ketika diklik, membuka navigasi sidebar yang ringkas. Animasi dan ikonnya sangat menyenangkan, dan semuanya tertata dengan baik. Plus, ada ruang untuk pertumbuhan, karena baris baru dapat dengan mudah ditambahkan.
Lihat Pena Menu Mega Diagonal oleh Tim Normanton
Menu Mega, Kemungkinan Mega
Dilihat dari cuplikan di atas, tampaknya ada kemungkinan tak terbatas untuk menata dan mengimplementasikan menu mega. Ada sesuatu untuk setiap kebutuhan. Apakah Anda memiliki lusinan kategori produk atau ingin menampilkan daftar konten bersarang yang rapi – itu dapat dicapai dengan menu mega.
Terlebih lagi, Anda tidak perlu bergantung pada pustaka JavaScript yang mewah untuk fungsionalitas. CSS dapat menangani hampir semua tugas. Ini membantu menjaga menu tetap berkinerja dan dapat diakses.
Ingin melihat lebih banyak menu mega beraction? Arahkan ke kami Koleksi CodePen.
