Prawdziwe mega menu w generatorze tlenu

Opublikowany: 2022-04-10

W tym artykule przyjrzymy się kilku sposobom dodania „prawdziwego” mega menu do Generatora tlenu. Wbudowane komponenty menu są dobre dla prostych menu podczas tworzenia nagłówków za pomocą Oxygen, ale jeśli potrzebujesz prawdziwej funkcjonalności megamenu, najlepiej poszukać gdzie indziej.

Stripe.com jest zawsze naszą ulubioną stroną, jeśli chodzi o przykłady Mega Menu.

W tym artykule omówimy, jak dodać mega menu w Oxygen.

Co to jest mega menu?

Jeśli kiedykolwiek korzystałeś z menu w witrynie, która zawierała coś więcej niż linki, to właśnie jest megamenu. Różnią się one złożonością, od prostych ikon graficznych po dynamicznie zapełniane obszary.

Mogą mieć układy z jedną kolumną, układy z wieloma kolumnami, wiele wierszy, archiwa masone i wiele innych. Oczywiście nie chcesz komplikować się, ponieważ po to są strony.

Jeśli zostaną wykonane poprawnie, mogą znacznie ułatwić nawigację po stronie dla odwiedzających.

Przewodnik dla początkujących: 2 szybkie metody tworzenia mega menu WordPress
Amazonka Mega Menu

Oxygen pozwala tworzyć proste menu rozwijane, ale jeśli chodzi o funkcjonalność megamenu, nie pozostaje wiele opcji.

Jak dodać mega menu do tlenu?

W tym artykule przyjrzymy się dwóm głównym sposobom dodania megamenu do Oxygen. Pierwszy sposób można wykonać całkowicie w Oxygen bez żadnych dodatków stron trzecich. Jest to dobre dla prostych menu. Podąża za krokami z samouczka opublikowanego przez oficjalny zespół odpowiedzialny za Oxygen. Jest to metoda, której użyli do stworzenia listy rozwijanej widocznej na stronie Oxygenbuilder.com.

Mega menu Oxygen przy użyciu „metody ręcznej”

Druga opcja korzysta z wtyczki innej firmy, która zapewnia znacznie więcej funkcji, jeśli chodzi o mega menu w Oxygen Builder. Jeśli chcesz tworzyć wielokolumnowe, dynamicznie zapełniane menu, to jest to najlepszy wybór.

Oczywiście istnieją dodatkowe opcje, których można użyć, jeśli dobrze rozumiesz HTML, CSS, JavaScript i być może PHP. Jednak jest to poza zakresem tego artykułu. Jeśli jednak jesteś z tym zaznajomiony, może to być dobra trzecia opcja włączenia mega menu w Oxygen, które nie wymagałoby wtyczki innej firmy.

Natywne dodanie Mega Menu w tlenie

W tej sekcji zostaną omówione podstawowe kroki omówione w samouczku YouTube. Jeśli chcesz zaimplementować tego typu menu na własnej stronie internetowej, zalecamy zapoznanie się z oficjalnym samouczkiem i obejrzenie powyższego filmu na YouTube.

Aby natywnie dodać megamenu w Oxygen, musisz najpierw utworzyć początkowe pozycje menu. Nie robi się tego za pomocą komponentu menu, zamiast tego robi się to poprzez tworzenie elementów div, wypełnianie ich tekstem i zawijanie ich w linki. Jest to dość łatwe z tlenem.

Gdy pojawi się początkowe menu, nadszedł czas, aby utworzyć rozwijane megamenu.

Odbywa się to poprzez utworzenie div pod linkiem menu, który będzie zawierał całą zawartość z listy rozwijanej. Po utworzeniu rozwijanego div (obejrzyj wideo, aby zrozumieć rzeczywistą strukturę za nim) jest on pozycjonowany bezwzględnie i przełączany, aby był widoczny po najechaniu kursorem na odpowiedni link menu.

Implementacja tego mega menu jest dość prosta, zwłaszcza jeśli postępujesz zgodnie z samouczkiem YouTube. Pozwala na użycie dowolnego bloku dostępnego w Kreatorze tlenu. Możesz także skorzystać z wbudowanych funkcji widoczności warunkowej, aby pokazać i ukryć rzeczy na podstawie ról użytkownika.

Jednak dodanie tego megamenu wymaga trochę pracy, a gdy struktura staje się złożona, implementacja również. Jest to również tworzenie ręczne, co oznacza, że ​​nie będzie automatycznie aktualizowane o nową zawartość. Kolejnym dużym problemem jest to, że nie działa dobrze z urządzeniami mobilnymi. Możesz po prostu ukryć całą instalację menu na telefonie komórkowym i użyć innego podstawowego menu, ale nie jest to zbyt praktyczne.

W zależności od tego, dlaczego chcesz dodać mega menu do swojej witryny WordPress (zbudowanej z użyciem Oxygen), możesz użyć trasy drugiej.

Wtyczka Mega Menu dla tlenu

Zamiast ręcznie dodawać megamenu, w niektórych przypadkach lepszym rozwiązaniem może być użycie wtyczki innej firmy. Zwłaszcza jeśli masz menu, które bardzo się zmienia, wtyczka może zaoszczędzić dużo czasu.

Istnieje mnóstwo wtyczek do megamenu i przetestowaliśmy kilka, gdy chcieliśmy włączyć tę funkcję w witrynach klienckich zbudowanych z użyciem Oxygen. podczas wyszukiwania wtyczki naszym kryterium było to, że musi być łatwa w użyciu, dynamiczna, dobrze zaprojektowana i całkowicie kompatybilna z Oxygenem (jak wiecie, jest wiele wtyczek, które po prostu nie są).

Z kilku przetestowanych wtyczek WP Mega Menu było najlepszą opcją, która nie miała problemów ze zgodnością z Oxygen Builder.

WP Mega Menu - Świetna darmowa wtyczka Mega Menu Builder dla WordPress ...

Dostępna jest darmowa wersja i wersja pro. Wersja pro kosztuje 29,00 USD rocznie. darmowa wersja działa dobrze, ale jest nieco ograniczona, jeśli chodzi o zaawansowaną funkcjonalność. Jeśli chcesz włączyć megamenu do strony klienta zbudowanej za pomocą Oxygen Builder, wersja pro jest prawdopodobnie najlepszym wyborem.

Podoba nam się ta wtyczka, ponieważ nie tylko jest dla nas łatwa w użyciu, ale nasi klienci mogą ją szybko zaktualizować bez psucia całej naszej strony internetowej stworzonej za pomocą Oxygen. Ma prosty interfejs typu „przeciągnij i upuść” i zawiera gotowe widżety. Zasadniczo jest to „konstruktor menu”.

Jest również responsywny, co jest głównym problemem podczas korzystania z metody pierwszej w celu dodania megamenu do witryny Oxygen Builder.

Po zainstalowaniu wtyczki w swojej witrynie, włączenie jej do witryny jest dość łatwe. Możesz wybrać, aby wtyczka zastąpiła menu Domyślne, została dodana za pomocą krótkiego kodu lub przy użyciu fragmentu kodu PHP. Włączymy go za pomocą PHP. jest to łatwe do zrobienia w Oxygen, po prostu dodaj komponent bloku kodu i wklej w następującym PHP (zastąp ID numerycznym ID twojego menu)

<?php wp_megamenu( array ( 'menu' => 'ID' )); ?>
Język kodu: HTML, XML ( xml )

Możesz umieścić to w dowolnym miejscu, ale zalecamy użycie szablonu nagłówka i stopki catchall. Szerokość bloku kodu wpływa na samo menu, więc upewnij się, że jest wystarczająco szeroki dla treści.

Menu umieszczone na stronie z tlenem demonstracyjnym w mniej niż 20 sekund.

Tworzenie mega menu jest dość łatwe. Za pomocą wizualnego konstruktora możesz przeciągać i upuszczać elementy na ustalony układ wierszy/kolumn.

Ta wtyczka oferuje dość zaawansowane funkcje, takie jak wyszukiwanie pełnoekranowe, dynamiczne widżety i wiele innych. Jeśli szukasz łatwego sposobu na dodanie megamenu do swojej witryny Oxygen, to jest to najlepszy wybór.

Jeśli tworzysz strony internetowe dla klientów i chcesz dać im proste narzędzie, za pomocą którego mogą edytować menu, jest to świetna opcja ze względu na prostotę.

Wniosek

Ten artykuł powinien obejmować dwa sposoby, dzięki którym możesz łatwo dodać mega menu do swojej witryny Oxygen Builder. Mega menu może dodać funkcjonalność i nadać Twojej witrynie wygląd premium. Dodanie 1 za pomocą CSS i domyślnych komponentów Oxygen jest dość łatwe. możesz również użyć wtyczki innej firmy, aby dodać megamenu do Oxygen.

Jeśli masz jakieś pytania, zostaw je w sekcji komentarzy poniżej!

Subskrybuj i udostępniaj
Jeśli spodobała Ci się ta treść, zasubskrybuj nasz comiesięczny przegląd wiadomości WordPress, inspiracji do stron internetowych, ekskluzywnych ofert i interesujących artykułów.
Zrezygnuj z subskrypcji w dowolnym momencie. Nie spamujemy i nigdy nie będziemy sprzedawać ani udostępniać Twojego e-maila.