10 İyi Tasarlanmış Mega Menü Örneği

Bir e-Ticaret web sitesini ziyaret ederken, menü çubuğunda birçok kategori görmüş olabilirsiniz. Belirli bir kategorinin üzerine geldikten sonra, daha fazla kategori içeren geniş bir açılır menü göreceksiniz. Buna mega menü denir.

Mega menü, kullanıcıları bir web sitesinin alt düzey alt sayfalarında, kategorilerinde ve alt kategorilerinde gezinmeye yönlendirmek için kullanılan bir web öğesidir. E-ticaret, haberler ve oteller gibi büyük web sitelerinin çoğu mega menüyü kullanıyor.

Bir mega menü, web sitenizin UX tasarımını ve bağlı kullanıcıları uzun süre geliştirir. Bununla birlikte, günümüzün mega menüsüne içerik blokları, kaydırıcılar, resimler, simgeler, videolar vb. de ekleyebilirsiniz.

Bu blogda, size on farklı web sitesinin iyi yapılandırılmış 10 mega menü örneğini göstereceğiz.

Bununla birlikte, bu makalelerde bu konuları da ele alıyoruz-

• Neden ve Ne Zaman Mega Menü Kullanmalısınız?
• 10 İyi Mega Menü Örneği
• Mega Menüler En İyi Uygulamaları
• Elementor ve Mutlu Eklentileri Kullanarak WordPress'te Mega Menü Nasıl Oluşturulur
• Mega Menüler Hakkında SSS

Temel bilgilerle başlayalım.

Web Sitenizde Neden ve Ne Zaman Mega Menü Kullanmalısınız?

Web siteniz birçok kategori ve alt kategori ile ilgileniyorsa, web sitenizin navigasyonunu ayarlamak için bir mega menü doğru seçim olacaktır.

Bir mega menü size yalnızca temel web sitesi öğelerini görüntüleme seçeneği sunmakla kalmaz, aynı zamanda web sitesi kullanıcılarının gerekli verilerini bulmalarına yardımcı olur. Böylece kullanıcılarınızın deneyimini geliştirir. Genellikle mega menüyü e-ticarette, otellerde, restoranlarda ve birçok web içeriğiyle ilgilenen diğer web sitelerinde görebilirsiniz.

İşte bir mega menü kullanmanız gereken bazı olası alanlar. Yapabilirsin,

• E-Ticaret web siteniz için bir mega menü oluşturun
• Çevrimiçi mağazalar için birçok ürün kategorisi görüntüleyin
• Blogların ve dergilerin web sitesinde konuları ve kategorileri görüntülemek için bir mega menü kullanın
• Büyük ölçekli kurumsal web siteleriniz için bir mega menü ekleyin
• Otel web sitelerinde odaları ve konaklama yerlerini öne çıkarmak için bir mega menü tasarlayın

WordPress'te nasıl menü oluşturulacağını öğrenin.

10 İyi Mega Menü Örneği

Blogumuzun bu bölümünde, iyi mega menü örnekleri göstereceğiz. Burada, farklı web sitesi türleri seçtik. Bu sonuçta bir mega menünün farklı kullanım durumlarını görmenize yardımcı olur.

1. InVision
2. top sürme
3. bizDevler
4. adidas
5. Figma
6. asana
7. Bobbi kahverengi
8. eBay
9. Gıda Ağı
10. Evernote

Başlayalım:

1. InVision

InVision, temel olarak tüm iş akışı sistemini merkezileştiren bir proje işleme çözümü sağlayan popüler bir web sitesidir. Birçok temel dahili sayfayı birbirine bağlayan organize bir mega menüye sahiptir. Ürün menü öğesinin altında, menünün Product Overview, Freehand ve For Teams gibi üç farklı kategori altında birçok dahili sayfası olduğunu görürsünüz.

Ürün menü öğesi, InVision ürünlerinin güncellemesini bulduğunuz yerde ürün güncellemesini görüntüleme seçeneğine de sahiptir. Sonuç olarak, bu, kullanıcıların web sitesinde kolayca gezinmelerine yardımcı olan ideal bir mega menü örneğidir.

2. Top Sürmek

Tasarımcıların çalışmalarını sergileyebilecekleri Dribbble dünya çapında popüler pazar. Kullanıcı deneyimini geliştiren güzel bir mega menü tasarımına sahiptir. Marketplace gibi tek bir menü öğesinin altında, dahili sayfa bağlantısı ve sayfanın kısa bir açıklaması olan bir simge görürsünüz.

Ancak, bu menünün belirli kategorileri görüntülediği başka bir alanı vardır. Kısacası, iyi bir mega menünün bir başka harika örneği.

3. bizDevler

weDevs, Dokan Multivendor Marketplace eklentisi de dahil olmak üzere bazı harika ürünler geliştiren popüler WordPress ürünleri tabanlı şirketlerden biridir. Çok temiz ve basit bir mega menü ile geliyor. Ürünler menü öğesinin altında, ürün logosu ve kısa bir etiket satırı ile sergilenen birden fazla ürün olduğunu fark edeceksiniz.

Ayrıca, ürün sayfasına gitmek için Tüm ürünleri Görüntüle bağlantısına sahiptir. Duyarlıdır, böylece küçük cihazlarınızda kolayca kullanabilirsiniz.

4. Adidas

Adidas, dünyanın en popüler spor markalarından biridir. Resmi Adidas web sitesini ziyaret edip menü alanına giderseniz mega menülerini görürsünüz. İyi organize edilmiştir.

3 STRIPE LIFE menü öğesinin altında What's New, Collaborations, Our World, Sports, Originals ve Collections olmak üzere altı kategori bulunmaktadır. Kategorilerin her birinin birkaç dahili sayfası vardır ve bir resimle başlar.

5. Figma

Figma popüler bir tasarım aracıdır. Web sitelerinde, temel web sitesi içeriklerini görüntülemek için kullanışlı mega menüyü kullanırlar. Mega menüleri diğerlerinden farklı.

Burada kullanıcı deneyimlerini geliştirmek için infografikler kullanıyorlar. Ayrıca menü bölümlerini düz bir kenarlık kullanarak ayırırlar.

6. Asana

Asana, ekipleri ve çalışmalarını yönetmek için yapılmış, iyi bilinen bir web ve mobil iş yönetimi platformudur. Bu popüler web sitesinin büyük ölçekli bir mega menüsü var. Birçok gerekli web sitesi içeriğini görüntüler.

Kaynaklar ana menü öğesinin altında, mega menü, LEARN ve CONNECT olmak üzere iki kategoriyi kullanarak iki boyutlu menü içeriğini gösterir. Bu kategorilerin her ikisi de sistematik olarak listelenen birçok dahili sayfaya sahiptir. Bununla birlikte, web sitesinin özellikli blog gönderilerini sergilemek için ÖZEL OKUMALAR seçeneğine de sahiptir.

7. Bobbi Brown

Bobbi Brown, günümüzün mega menüsünün bir başka harika örneğidir. Esas olarak kozmetik ürünleri satan bir çevrimiçi mağazadır. Bu web sitesi tasarımı çok basit ama göz kamaştırıcı bir mega menüye sahiptir.

Bir resim ve kategori adı ile kozmetik ürünleri görüntüler. Ayrıca, herkesin cep telefonlarını ve tabletlerini kullanarak mega menüye erişebilmesi için duyarlı tasarıma odaklanır.

8. eBay

Çoğunuz dünyanın en büyük e-ticaret markalarından biri olan eBay'i bilirsiniz. Bu en iyi e-ticaret web sitesi zengin bir mega menüye sahiptir. Ana menü öğelerinin her birinin altında mega menü bulunur. Moda menüsüne odaklanın.

Bu menü öğesinin altında, En Popüler Kategorileri ve Daha Fazla Kategoriyi sergilemek için kullanılan büyük boyutlu bir mega menü vardır. Ve bu iki kategori, menü öğeleri olarak da listelenen tonlarca alt kategoriye sahiptir. Bununla birlikte, müşterinin dikkatini çeken özellikli bir ürün de sergiliyor.

Okuyun: eBay: Küresel E-Ticaret İş Lideri Olmanın Büyülü Yolculuğu

9. Gıda Ağı

Food Network, restoran yemek menüsünü görüntülemek için mega menüye sahip bir restoran web sitesidir. Tarifler menü öğesinin altında GÜNÜN TARİFİ ve TREND TARİFLERİNİ paylaşan mega bir menü bulunur.

Mega menü sunumları çok ikonik, tariflerin her biri müşterileri çeken bir imaja sahip. Ancak, aynı zamanda diğer Tarifler Listesini görüntüleme seçeneğine ve TÜM Tarifleri GÖRME düğmesine sahiptir.

WordPress ve Elementor kullanarak bir restoran web sitesinin nasıl oluşturulacağı hakkında daha fazla bilgi edinin.

10. Evernote

Evernote, proje yönetimi, organize etme, not alma, arşivleme ve görev yönetimi için özel olarak yapılmış bir araçtır. Bu web sitesi, değerli özelliklerini göstermek için çarpıcı bir mega menüye sahiptir.

Bu, benzersiz yeşil simgeler, özellik adları ve kısa bir slogan ile gelen güzel bir mega menü. Ayrıca, Evernote'un tüm özelliklerini görmek için TÜM ÖZELLİKLERİ GÖR bağlantısına sahiptir.

5+ Mega Menü En İyi Uygulamaları

İhtiyacınıza göre web sitenizin mega menüsünü oluşturabilirsiniz. Ancak mega menünüzün iyi tasarlanmış, duyarlı ve kullanımı kolay olduğundan emin olun. Mega menünüzü kusursuz hale getirmek için aşağıdaki ipuçlarını takip etmelisiniz.

1. Kullanıcıların taraması için mega menünüzü basit tutun
2. Duyarlı tasarıma odaklanın
3. Daha ilgi çekici hale getirmek için simgeler/resimler eklemeye çalışın
4. Tek bir bağlantı rengi kullanın
5. Bağlantıların birbirine çok yakın olmasından kaçının
6. Tüm menü öğelerinin aynı anda görünür olduğundan emin olun, kaydırmayı atlayın
7. Bir tetikleyici seçeneği kullanın, üzerine gelin veya tıklayın

Bonus: Elementor ve Mutlu Eklentileri Kullanarak WordPress'te Mega Menü Nasıl Oluşturulur

O zamanlar bir WordPress web sitesi için mega menü oluşturmak bir felaketti. Özel kod yazmanız, 3. taraf eklentileri yüklemeniz ve bazen işi düzgün bir şekilde bitirmek için bir uzman kiralamanız gerekir.

Ama şu anki senaryo farklı. Elementor ve Happy Addons'u kullanarak kendi web sitenizin mega menüsünü verimli bir şekilde tasarlayabilirsiniz.

Happy Addons, olağanüstü bir Happy Mega Menu widget'ı ile birlikte gelen popüler ve hızla büyüyen Elementor eklentilerinden biridir. Bu gelişmiş widget ile gerçek zamanlı olarak bir mega menü oluşturabilirsiniz. Bu sürükle ve bırak widget'ı, mega menüye simgeler, rozetler, resimler ve kaydedilmiş Elementor şablonları eklemenize olanak tanır.

Bununla birlikte, kullanıcıların mobil veya diğer küçük cihazları kullanarak web sitenizin mega menüsüne kolayca erişebilmeleri için duyarlı tasarıma da odaklanmıştır.

Mutlu Mega Menü widget'ını kullanarak, yukarıdaki weDevs, Adidas, Dribbble, InVision ve daha fazlası örnekleri gibi büyük ölçekli bir mega menü oluşturabilirsiniz.

Neden beklemek? Bu adım adım video eğitimini izleyelim ve WordPress'te mega menü oluşturmayı öğrenelim.

Happy Mega Menu belgelerini okuyun ve bu widget'ı nasıl doğru şekilde kullanacağınızı öğrenin.

Mega Menülerde SSS(ler)

İnsanların çevrimiçi olarak mega menüyle ilgili sıklıkla sorduğu birçok soru var. Burada, mega menü hakkında daha fazla bilgi edinmenize yardımcı olabilecek bazı genel soruları yanıtladık.

Mega Menüyü Kullanarak Web Sitenizde Gezinmeyi Mükemmelleştirmeyi Öğrenin

Bu blogda, 10 iyi mega menü örneği listeledik. Böylece mega menü hakkında doğru fikri edinebilirsiniz. Bununla birlikte, mega menüyü neden ve ne zaman kullanmanız gerektiği, mega menü en iyi uygulamaları gibi mega menüyle ilgili bazı gerekli bilgileri de ele aldık ve insanların mega menüde çevrimiçi olarak sıklıkla sordukları genel soruları yanıtladık.

Bunun dışında, WordPress'te Elementor ile nasıl mega menü oluşturulacağını tartıştık. Artık Elementor kullanıcıları için Happy Addons' Happy Mega Menu widget'ının yardımıyla bir mega menü oluşturmak zor değil.

Bu gönderiyi beğendiyseniz, sosyal kanallarınızda paylaşın. WordPress ve Elementor hakkında daha kullanışlı bloglar almak için bültenimize katılmayı unutmayın.