Jak dodać wspaniałe Mega Menu do swojej witryny WordPress

Mega menu to popularny wzór na dużych witrynach WordPress. Takie witryny mogą mieć złożoną architekturę informacji z wieloma różnymi sekcjami i podsekcjami. Poprzez grupowanie podobnych linków, mega menu ułatwia użytkownikowi szybkie znalezienie odpowiednich informacji.

O mega menu mówi ekspert usability Jakob Nielsen:

„[Mega menu] to doskonały wybór do dostosowania dużej liczby opcji lub do wyświetlania stron na niższym poziomie na pierwszy rzut oka.”

W tym poście przyjrzymy się przykładom witryn WordPress, które używają mega Menu, dlaczego warto je zbadać jako opcję, jeśli prowadzisz dużą stronę internetową, i wtyczek, które pomogą Ci wdrożyć mega Menu.

Witryny WordPress, Które Skutecznie Wykorzystują Mega Menu

Mega menu znajdują się na wielu różnych stronach.

Odzież Joanie

Mega pozycje menu na stronie Joani Clothing link do kategorii produktów WooCommerce.

The Stanford Daily

Witryna Stanford Daily news wykorzystuje mega menu do wyświetlania kategorii w kategoriach, tj. Sport > Sporty Jesienne > Hokej na trawie.

Pousta

Obrazy funkcji są również używane w mega menu Pousta, wzdłuż strony, aby podkreślić ważne historie.

Georgia State University

Pozycje menu absolwentów na stronie Georgia State University to niestandardowe linki do innej domeny.

Jamie Oliver

Najbardziej mega mega menu! Strona Jamiego Olivera zawiera osobne menu hamburgera na tablet i telefon komórkowy.

Wioślarstwo Brytyjskie

Jakie Funkcje Mogą Zawierać Mega Menu WordPress?

Jak również linki do menu, mogą mieć:

• Nagłówki sekcji
• Obrazy
• Ikony
• Opisy
• Widżety, które mogą zawierać obrazy lub wideo

Większość mega menu jest wyświetlana po najechaniu kursorem, najechaniu kursorem lub kliknięciu z poziomych pasków menu. Niektóre wtyczki mogą również robić pionowe mega Menu.

Hover intent to wtyczka jQuery, która próbuje wyczuć znaczenie ruchu myszy przez użytkownika. Tak więc szybkie przeciągnięcie może nie otworzyć menu, podczas gdy powolne celowe przesunięcie nad elementem menu.

Mega Menu Wtyczki WordPress

Istnieje wiele darmowych i płatnych wtyczek, które dobrze wykonują swoją pracę, jeśli rozważasz dodanie mega menu do swojej witryny WordPress.

• Max Mega Menu (gratis)

  

  Funkcje obejmują:

  • Przyjazny dla dostępności: nawigacja za pomocą klawiatury jest obsługiwana.
  • Animacje dla przejść podmenu.
  • Opcje ukrywania elementów menu lub wyłączania łączy.
  • Wersja Premium z większą liczbą funkcji, w tym menu pionowe i akordeonowe.

• Mega menu Plugin dla WordPress-AP Mega Menu (bezpłatny)

  

  Funkcje obejmują:

  • Pionowe mega Menu.
  • Tworzenie menu przez przeciąganie i upuszczanie.
  • Opcja ukrycia menu na telefonie komórkowym.
  • Przejścia Fade lub slide.
  • Wersja Premium dostępna z większą liczbą funkcji, np. więcej ikon i dodaj własne ikony.

• UberMenu (19 zł)

  

  Funkcje obejmują:

  • Podmenu z kartami.
  • Dynamicznie generowane menu.
  • Menu przyjazne dla urządzeń mobilnych i tabletów.
  • Animacje Menu.

• Mega Menu Główne (14 Zł)

  

  Funkcje obejmują:

  • Ponad 1600 ikon.
  • Kompatybilny z WPML.
  • Dodaj inne pozycje menu (logo, Szukaj).

• WP Mega Menu Pro ($18)

  

  Funkcje obejmują:

  • Zakładkowe mega menu.
  • 14 dostępnych skórek.

• Menu Bohatera (19 Zł)

  

  Funkcje obejmują:

  • WooCommerce włączone.
  • Tła dla menu.
  • Lepkie menu.

• NOO Menu ($15)

  

  Funkcje obejmują:

  • Przejrzyste menu.
  • Zapisz / załaduj presety.

• PixelMenu (21 zł)

  

  Funkcje obejmują:

  • Osadzanie filmów.
  • Wsparcie WooCommerce.
  • Zapisz / załaduj presety.

Jak stworzyć Mega Menu z Max Mega Menu

Przyjrzyjmy się, jak stworzyć mega menu. W tym przykładzie stworzyłem witrynę opartą na żywności z różnymi recepturami wykorzystującymi motyw jarmużu.

Pierwszym krokiem jest stworzenie menu za pomocą Wygląd > Menu, upewniając się, że odpowiednio zagnieżdżasz elementy podmenu.

Mega menu można tworzyć tylko na elementach menu najwyższego poziomu, a nie na elementach podmenu. Aby uzyskać dostęp do opcji menu Wtyczki, najedź kursorem na element menu i wybierz Mega Menu.

Aby dodać obrazy, użyj widżetu obrazu-nowej funkcji w WordPress 4.8.

A oto jak to wygląda na front-endzie mojej strony testowej:

Aby dodać filmy, użyj widżetu wideo WordPress 4.8 i Dodaj wideo z adresu URL. Możesz też dodać kod osadzania wideo do widżetu tekstowego.

Oto jak to wygląda:

Możesz również dodać ikony menu za pomocą sekcji Ikona we wtyczce.

Aby dodać Font Awesome, Genericons lub niestandardowe ikony wymaga wersji Pro, która kosztuje $23 dla jednej strony.

Możesz wybrać liczbę kolumn wyświetlanych w menu i utworzyć układy wielokolumnowe grupujące elementy razem.

Po złożeniu układu dwukolumnowego, oto wyniki na front-end:

Użyłem widżetu Ostatnie posty z wtyczką miniaturek, aby dodać najnowsze posty. Aby je wyrównać poziomo, użyłem widżetu w układzie jednej kolumny plus trochę CSS. Jedynym powodem, dla którego obrazy nie układają się idealnie, są różne wysokości!

Oto CSS, którego użyłem do osiągnięcia tego wyniku:

I jeszcze jedno spojrzenie na to, jak wygląda moje mega menu na front-endzie mojej strony testowej, tym razem z trzema kolumnami:

Dodawanie lub zmiana pozycji w mega menu automatycznie je zapisuje. Nie zapomnij kliknąć Zapisz Menu jak również, jeśli dodasz nowe elementy do struktury menu.

Korzystanie z Max Mega Menu na Tablet i telefon komórkowy

Na moim telefonie, skończyło się na dwóch hamburger menu, jeden z mojego motywu i jeden generowany przez Max Mega Menu. Menu motywu zostało wyłączone, więc najlepiej byłoby je ukryć za pomocą CSS.

Ponieważ nie ma stanu najechania, zdarzenia najechania i najechania działają jak zdarzenia kliknięcia, a stuknięcie otwiera podmenu.

Menu najwyższego poziomu z mega menu jako podmenu (np. dania główne) nie jest dostępne w telefonie, chyba że użytkownik naciśnie, przytrzyma i wybierze Otwórz w nowej karcie.

Jednym ze sposobów rozwiązania tego problemu jest użycie innej wtyczki do menu tylko dla urządzeń mobilnych.

Max Mega Menu Nie wyświetlało wszystkiego optymalnie na komórce. Zmieniłem liczbę kolumn z dwóch na jedną, ale to miało wpływ na mieszanie treści w moim menu zupy, jak pokazano.

Widżet wideo nie wyświetlił się poprawnie. Jest problem z jego responsywnością na małym ekranie.

Jak stworzyć Mega Menu z UberMenu

UberMenu daje znacznie drobniejszą kontrolę nad mega Menu. Każdy pojedynczy element menu można dostosować. Istnieje również globalny panel sterowania, w którym można ustawić i dziedziczyć niektóre opcje, np. domyślne rozmiary obrazów.

Istnieje ponad 20 wbudowanych skórek. Wybrałem ” Simple Green.”

Poszczególne elementy sterujące są:

• Ogólne – różne ustawienia, w tym wybór wyrównania tekstu i dodanie klasy CSS lub ID.
• Ikona – Ustaw ikonę, aby pokazać z menu. Aby uzyskać pełny zakres, potrzebujesz rozszerzenia UberMenu Icons ($8).
• Obraz – dowolny obraz, który zostanie wyświetlony obok pozycji menu.
• Layout – wybierz wyświetlanie kolumny i położenie dowolnych używanych obrazów.
• Podmenu – skonfiguruj wyświetlanie podmenu.
• Zawartość Niestandardowa – dodaj HTML i skróty szybko bez użycia widżetu.
• Widgety – Wstaw obszary widżetu do menu i wybierz liczbę kolumn.
• Dostosuj Styl – wybierz kolory i wypełnienia dla różnych elementów menu.
• Responsive – Ukryj lub wyłącz menu w różnych punktach przerwania.
• Deprecated – możesz bezpiecznie zignorować to, jeśli jesteś nowym użytkownikiem.

Fajne rzeczy, które możesz zrobić z UberMenu Advanced Items

#1. Tworzenie podmenu dla strony kontaktowej z mapą Google i formularzem kontaktowym

Osiągnąłem to za pomocą elementu obszaru widżetu ustawionego na układ dwóch kolumn. Dwa widżety zostały dodane do obszaru o nazwie UberMenu widget w Wygląd > Widżety.

#2. Tworzenie niestandardowego układu dwóch kolumn

Osiągnąłem to dzięki elementom kolumn dla podmenu moje zupy.

#3. Dodawanie trzech ostatnich wpisów na blogu pod „Blog”

Było to o wiele łatwiejsze niż to samo w Max Mega Menu, ponieważ mogłem wybrać automatyczny układ trzech kolumn. Element „dynamiczne posty”ma wbudowane zaawansowane zapytanie WP. Gdybym chciał, mógłbym filtrować według kategorii, zmieniać kolejność sortowania lub wykluczać posty.

#4. Używanie podmenu z kartami

Pomijając temat jedzenia, zainstalowałem WooCommerce i jego fałszywe dane.

Oto konfiguracja menu dla mojego sklepu, za pomocą bloku kart.

Dostosowałem liczbę dynamicznych postów dla każdej kategorii produktów, aby pasowały do podmenu z wdziękiem.

Korzystanie z UberMenu na Tablet i telefon komórkowy

W moim telefonie odkryłem, że dotknięcie pozycji menu najwyższego poziomu raz otworzyło podmenu, podczas gdy dotknięcie go ponownie otworzyło tę stronę. Korzystne było to, że użytkownik mógł uzyskać dostęp do pozycji menu najwyższego poziomu, chociaż zauważyłem, że szczególne zachowanie menu jest nieco nieoczekiwane.

Każde podmenu ma Zamknij link na dole, aby go zamknąć.

Moje układy kolumn zostały zachowane w podmenu moje zupy.

Jednak nadal miałem problemy z widżetem wideo działającym w układzie kolumn. Niestandardowy element zawartości z kodem osadzania wideo działał lepiej, ale został odcięty na urządzeniach mobilnych.

Interfejs z kartami przeszedł z poziomych kart na pulpicie do pionowych kart na urządzeniach mobilnych.

Czy Mega Menu jest dla każdego?

Mega menu są potężne i działają dobrze w niektórych branżach, takich jak sprawy bieżące, Edukacja i e-commerce.

Mogą być dobrym sposobem na:

• Wyróżnij kategorie produktów oraz przedmioty sprzedaży dla sklepów internetowych.
• Uświadamiaj użytkowników mniej oczywistych części strony i wyjaśnij swoje purpusye.
• Pokaż polecane zdjęcia do postów lub zdjęć produktów.

Ale nie są odpowiednie dla każdego rodzaju witryny. Jeśli masz małą i prostą stronę za pomocą mega menu będzie przesada.

Jak widzieliście, zachowanie mega menu na urządzeniach mobilnych musi zostać dokładnie sprawdzone, aby uniknąć problemów z wyświetlaniem i interakcją. Plus duże menu może nie być pożądane dla urządzeń mobilnych.

Istnieją również potencjalne problemy SEO z mega menu-zbyt wiele linków może spowodować rozcieńczenie ” soku linków.”

Wreszcie, mega menu, które znikają zbyt szybko, gdy użytkownicy próbują z nimi współdziałać, są Nie-Nie.

Niezależnie od podejścia, ważne jest, aby logicznie zaplanować nawigację w witrynie i uniknąć konieczności wykonywania zbyt wielu kliknięć, aby osiągnąć zamierzony cel.

Należy również:

1. Miej widoczne pole wyszukiwania na każdej stronie.
2. Wyświetlaj strony potomne na swoich stronach najwyższego poziomu.
3. Rozważ użycie mapy witryny.

Tagi:

• menu
• nawigacja