10 Contoh Menu Mega yang Dirancang dengan Baik

Diterbitkan: 2022-04-08

Saat mengunjungi situs web eCommerce, Anda mungkin telah melihat banyak kategori di bilah menu. Setelah mengarahkan kursor ke kategori tertentu, Anda akan melihat menu tarik-turun besar dengan lebih banyak kategori. Ini disebut menu mega.

Menu mega adalah elemen web yang digunakan untuk memandu pengguna menavigasi sub-halaman, kategori, dan subkategori situs web tingkat rendah. Sebagian besar situs web besar seperti eCommerce, berita, dan hotel, menggunakan menu mega.

Menu mega meningkatkan desain UX situs web Anda dan melampirkan pengguna untuk waktu yang lama. Namun, Anda juga dapat menambahkan blok konten, bilah geser, gambar, ikon, video, dll ke menu mega modern.

Di blog ini, kami akan menunjukkan kepada Anda 10 contoh mega menu yang terstruktur dengan baik dari sepuluh situs web yang berbeda.

Bersamaan dengan itu, kami juga membahas topik-topik ini dalam artikel ini-

  • Mengapa & Kapan Anda Harus Menggunakan Menu Mega
  • 10 Contoh Menu Mega yang Bagus
  • Praktik Terbaik Menu Mega
  • Cara Membuat Menu Mega di WordPress Menggunakan Elementor & Happy Addons
  • FAQ tentang Menu Mega

Mari kita mulai dengan dasar-dasarnya.

Mengapa & Kapan Anda Harus Menggunakan Menu Mega di Situs Web Anda

Jika situs web Anda berurusan dengan banyak kategori dan subkategori, menu mega akan menjadi pilihan yang tepat untuk mengatur navigasi situs web Anda.

Menu mega tidak hanya memberi Anda opsi untuk menampilkan elemen situs web penting, tetapi juga membantu pengguna situs web Anda menemukan data yang diperlukan. Dengan demikian, ini meningkatkan pengalaman pengguna Anda. Umumnya, Anda dapat melihat menu mega di eCommerce, hotel, restoran, dan situs web lain yang menangani banyak konten web.

Berikut adalah beberapa kemungkinan area di mana Anda perlu menggunakan menu mega. Kamu bisa,

  • Buat mega-menu untuk situs web eCommerce Anda
  • Menampilkan banyak kategori produk untuk toko online
  • Gunakan menu mega untuk menampilkan topik dan kategori di situs web blog dan majalah
  • Tambahkan menu mega untuk situs web perusahaan berukuran besar Anda
  • Rancang menu besar untuk menampilkan kamar dan akomodasi di situs web hotel

Pelajari cara membuat menu di WordPress.

10 Contoh Menu Mega yang Bagus

Di bagian blog ini, kami akan menunjukkan contoh menu mega yang bagus. Di sini, kami telah memilih berbagai jenis situs web. Itu pada akhirnya membantu Anda untuk melihat kasus penggunaan yang berbeda dari menu mega.

  1. InVision
  2. menggiring bola
  3. weDevs
  4. Adidas
  5. gambar
  6. asana
  7. Bobbi Brown
  8. eBay
  9. Jaringan Makanan
  10. Evernote

Mari kita mulai:

1. InVision

InVision adalah situs web populer yang pada prinsipnya menyediakan solusi penanganan proyek yang memusatkan seluruh sistem alur kerja. Ini memiliki menu mega terorganisir yang menghubungkan banyak halaman internal penting. Di bawah item menu Produk , Anda melihat menu memiliki banyak halaman internal di bawah tiga kategori berbeda seperti Tinjauan Produk, Freehand, dan Untuk Tim .

InVision Mega Menu

Item menu produk juga memiliki opsi untuk menampilkan pembaruan produk di mana Anda menemukan pembaruan produk InVision. Pada akhirnya, ini adalah contoh menu mega ideal yang membantu pengguna menavigasi situs web dengan mudah.

2. Menggiring bola

Pasar populer dunia Dribbble tempat para desainer dapat memamerkan karya mereka. Ini memiliki desain menu mega yang indah yang meningkatkan pengalaman pengguna. Di bawah satu item menu seperti Marketplace , Anda melihat ikon dengan tautan laman internal dan deskripsi singkat laman tersebut.

Dribbble Mega Menu

Namun, menu ini memiliki area lain yang menampilkan kategori tertentu. Singkatnya, ini adalah contoh bagus lainnya dari menu mega yang bagus.

3. weDevs

weDevs adalah salah satu perusahaan berbasis produk WordPress populer yang membuat beberapa produk hebat termasuk plugin Dokan Multivendor Marketplace. Muncul dengan menu mega yang sangat bersih dan sederhana. Anda akan melihat bahwa di bawah item menu Produk ada beberapa produk yang dipamerkan dengan logo produk dan tagline singkat.

weDevs Mega Menu

Juga, ia memiliki tautan ke Lihat Semua produk untuk membuka halaman produk. Ini responsif, sehingga Anda dapat dengan mudah menggunakannya di perangkat kecil Anda.

4. Adidas

Adidas adalah salah satu merek olahraga paling populer di dunia. Jika Anda mengunjungi situs resmi Adidas dan pergi ke area menu, Anda akan melihat mega menu mereka. Ini terorganisir dengan baik.

Adidas Mega Menu

Di bawah item menu 3 STRIPE LIFE , ada enam kategori seperti What's New, Collaborations, Our World, Sports, Originals, dan Collections. Setiap kategori memiliki beberapa halaman internal dan dimulai dengan sebuah gambar.

5. Gambar

Figma adalah alat desain yang populer. Di situs web mereka, mereka menggunakan menu mega yang praktis untuk menampilkan konten situs web penting mereka. Menu mega mereka berbeda dari yang lain.

Figma Mega Menu

Di sini mereka menggunakan infografis untuk meningkatkan pengalaman pengguna mereka. Juga, mereka memisahkan bagian menu menggunakan batas yang solid.

6. asana

Asana adalah platform manajemen kerja web dan seluler terkenal yang dibuat untuk mengelola tim dan pekerjaan mereka. Situs web populer ini memiliki menu mega skala besar. Ini menampilkan banyak konten situs web yang diperlukan.

Asana Mega Menu

Di bawah item menu utama Sumber Daya , menu mega menampilkan konten menu dua dimensi menggunakan dua kategori LEARN dan CONNECT . Kedua kategori ini memiliki banyak halaman internal yang terdaftar secara sistematis. Namun, ia juga memiliki opsi FITUR BACAAN untuk menampilkan posting blog fitur situs web.

7. Bobbi Brown

Bobbi Brown adalah contoh hebat lainnya dari mega menu modern. Ini adalah toko online yang terutama menjual barang-barang kosmetik. Website ini memiliki mega menu yang desainnya sangat sederhana namun mempesona.

Bobbi Brown Mega Menu

Ini menampilkan item kosmetik dengan gambar dan nama kategori. Ini juga berfokus pada desain responsif sehingga siapa pun dapat mengakses menu mega menggunakan ponsel dan tablet mereka.

8. eBay

Sebagian besar dari Anda akrab dengan eBay salah satu merek eCommerce terbesar di dunia. Situs web eCommerce teratas ini memiliki menu mega yang kaya. Di bawah masing-masing item menu utama memiliki menu mega. Fokus pada menu Mode .

eBay Mega Menu

Di bawah item menu ini, ada menu mega berukuran besar yang digunakan untuk menampilkan Kategori Paling Populer dan Kategori Lainnya . Dan kedua kategori ini memiliki banyak subkategori yang juga terdaftar sebagai item menu. Namun, juga menampilkan produk unggulan yang menarik perhatian pelanggan.

Baca: eBay: Perjalanan Ajaib Menjadi Pemimpin Bisnis E-Commerce Global

9. Jaringan Makanan

Food Network merupakan website restoran yang memiliki mega menu untuk menampilkan menu makanan restoran. Di bawah item menu Resep , ia memiliki menu mega yang membagikan RESEP HARI INI dan RESEP TRENDING .

Food Network Mega Menu

Presentasi mega menu mereka sangat ikonik setiap resep memiliki gambar yang menarik pelanggan. Namun, ia juga memiliki opsi untuk menampilkan Daftar Resep lainnya dan memiliki tombol untuk MELIHAT SEMUA Resep .

Pelajari lebih lanjut tentang cara membuat situs web restoran menggunakan WordPress dan Elementor.

10. Evernote

Evernote adalah alat yang dibuat khusus untuk pengelolaan proyek, pengorganisasian, pembuatan catatan, pengarsipan, dan manajemen tugas. Situs web ini memiliki menu mega yang menakjubkan untuk menunjukkan fitur-fiturnya yang berharga.

Evernote Mega Menu

Ini adalah menu mega cantik yang hadir dengan ikon hijau unik, nama fitur, dan tagline pendek. Juga, ia memiliki tautan LIHAT SEMUA FITUR untuk melihat semua fitur Evernote.

5+ Praktik Terbaik Menu Mega

Berdasarkan kebutuhan Anda, Anda dapat membuat menu mega situs web Anda. Tetapi pastikan bahwa menu mega Anda dirancang dengan baik, responsif, dan mudah digunakan. Untuk membuat menu mega Anda sempurna, Anda harus mengikuti tips di bawah ini.

  1. Buat menu mega Anda tetap sederhana untuk dipindai oleh pengguna
  2. Fokus pada desain responsif
  3. Coba tambahkan ikon/gambar agar lebih menarik
  4. Gunakan satu warna tautan tunggal
  5. Hindari memiliki tautan yang terlalu berdekatan
  6. Pastikan semua item menu terlihat sekaligus, lewati pengguliran
  7. Gunakan satu opsi pemicu, arahkan kursor atau klik

Bonus: Cara Membuat Menu Mega di WordPress Menggunakan Elementor & Happy Addons

Kembali pada hari itu, membuat menu mega untuk situs web WordPress adalah bencana. Anda perlu menulis kode khusus, menginstal plugin pihak ketiga, dan terkadang perlu menyewa seorang ahli untuk menyelesaikan pekerjaan dengan benar.

Tetapi skenario saat ini berbeda. Anda dapat mendesain mega menu situs web Anda sendiri secara efisien menggunakan Elementor dan Happy Addons.

Happy Addons adalah salah satu addon Elementor yang populer dan berkembang pesat yang hadir dengan widget Happy Mega Menu yang luar biasa. Dengan widget canggih ini, Anda dapat membuat menu mega secara real-time. Widget seret & lepas ini memungkinkan Anda untuk menambahkan ikon, lencana, gambar, dan templat Elementor yang disimpan ke dalam menu mega.

Namun, ini juga berfokus pada desain responsif sehingga pengguna dapat dengan mudah mengakses menu mega situs web Anda menggunakan perangkat seluler atau perangkat kecil lainnya.

Dengan menggunakan widget Happy Mega Menu , Anda dapat membuat mega menu skala besar seperti contoh di atas weDevs, Adidas, Dribbble, InVision, dan lainnya.

Mengapa menunggu? Mari tonton tutorial video langkah demi langkah ini dan pelajari cara membuat menu mega di WordPress.

Baca dokumentasi Happy Mega Menu dan pelajari cara menggunakan widget ini dengan benar.

FAQ tentang Menu Mega

Ada banyak pertanyaan yang sering ditanyakan orang secara online mengenai mega menu. Di sini, kami telah menjawab beberapa pertanyaan umum yang dapat membantu Anda mempelajari lebih lanjut tentang menu mega.

1. Apa itu Menu Mega?

Menu mega adalah menu navigasi dropdown skala besar yang digunakan untuk menampilkan tautan halaman internal yang sangat besar dari sebuah situs web. Ini berbeda dari submenu WordPress default atau menu dropdown. Dalam menu mega, Anda dapat menambahkan ikon, gambar, dan fitur canggih lainnya untuk menghiasi area navigasi situs web Anda.

Ini memungkinkan pengunjung situs web Anda untuk mengakses bagian terdalam situs web Anda menggunakan menu utama. Namun, menu mega meningkatkan kegunaan situs web, membantu mendorong lebih banyak penjualan, meningkatkan konversi, dan membantu pengunjung menjelajahi situs web Anda lebih lama.

2. Bagaimana Saya Dapat Membuat Menu Mega untuk Situs WordPress Saya?

Anda dapat menggunakan plugin menu mega untuk membuat menu mega untuk situs web Anda. Tetapi jika Anda adalah pengguna Elementor, Anda cukup membuat menu mega dengan bantuan widget Happy Mega Menu dari Happy Addons. Kami sudah membahas ini. Ikuti bagian di atas dari blog kami.

3. Apakah Menu Mega Baik atau Buruk untuk SEO?

Pada dasarnya, menu Mega situs web tidak memengaruhi peringkat situs web Anda. Tetapi ini membantu meningkatkan navigasi situs web Anda. Itu sebabnya Anda bisa mengatakan itu bagus untuk SEO.

Di sisi lain, kode menu mega sebagian besar dimuat terlebih dahulu saat ditampilkan ke situs web Anda. Karena menu mega mencantumkan banyak halaman internal atau elemen web lain yang diperlukan, itu memperlambat kehilangan kecepatan situs web Anda.

Karena alasan itu, itu buruk untuk SEO karena Google mengukur waktu pemuatan halaman untuk menilai SEO situs web Anda.

4. Haruskah Saya Menggunakan Menu Mega?

Itu tergantung pada tujuan Anda. Biasanya, menu mega digunakan untuk situs web besar seperti eCommerce, blog, majalah, berita, dll. Jika Anda memiliki situs web atau situs web berbasis konten yang besar, maka Anda harus menggunakan menu mega.

5. Apakah Menu Mega Bekerja dengan Elementor?

Ya, menu mega sepenuhnya kompatibel dengan Elementor.

Pelajari Menyempurnakan Navigasi Situs Web Anda Menggunakan Menu Mega

Di blog ini, kami telah mencantumkan 10 contoh menu mega yang bagus. Jadi Anda bisa mendapatkan ide yang tepat tentang menu mega. Namun, kami juga telah membahas beberapa informasi yang diperlukan mengenai menu mega seperti mengapa & kapan Anda harus menggunakan menu mega, praktik terbaik menu mega, dan menjawab pertanyaan umum yang sering ditanyakan orang secara online di menu mega.

Selain itu, kami telah membahas cara membuat menu mega di WordPress dengan Elementor. Sekarang membuat menu mega tidak sulit bagi pengguna Elementor dengan bantuan widget Happy Mega Menu dari Happy Addons.

Jika Anda menyukai posting ini, bagikan di saluran sosial Anda. Dan jangan lupa untuk bergabung dengan buletin kami untuk mendapatkan blog yang lebih berguna di WordPress dan Elementor.

Berlangganan newsletter kami

Dapatkan berita & pembaruan terbaru di Elementor