kreacja wielopoziomowe menu w WordPressie zajmuje to nie więcej czasu niż stworzenie zwykłego „płaskiego” menu. Wszystko odbywa się w tym samym interfejsie w sekcji „Wygląd” - „Menu”. Na przykład stwórzmy strukturę menu dla typowej witryny wizytówkowej jakiejś abstrakcyjnej firmy świadczącej usługi IT.

Oto przykładowa struktura menu, jaką może mieć witryna z wizytówkami firmy usługowej:

• Dom
• Opinie klientów
• Usługi
  • Wybór sprzętu
  • Instalacja i układanie sieci LAN
  • Wirtualizacja
  • Telefonia IP
  • CCTV
  • Monitorowanie
• Łączność

Poziom zagnieżdżenia menu może być dowolny, ale moim zdaniem strony, które mają więcej niż dwa poziomy zagnieżdżenia, są bardzo niewygodne w użyciu. Kiedy prowadzisz do podelementu, poprzedni element zamyka się lub stale przeskakuje przed twoimi oczami. Jest to głównie problem programisty lub autora motywu, ale fakt pozostaje faktem: najpopularniejsza opcja menu na stronach internetowych jest dwupoziomowa.

Niektórzy zgadzają się, że zanim stworzysz strony, powinieneś stworzyć menu fałszywych linków, które prowadzą donikąd i po prostu nie działają na stronie. Jest to konieczne w celu ustalenia z góry właściwe punkty a następnie stworzyć strukturę strony według gotowej wersji.

W zasadzie nie jest źle i możemy podążać tą samą ścieżką: najpierw stworzymy strukturę, zobaczymy czy u nas wszystko w porządku, a potem stworzymy strony (strony możesz tworzyć sam, wierzę w Ciebie!).

Przejdź do sekcji „Wygląd” - „Menu”:

Utwórz nowy zestaw menu lub użyj istniejącego.

Po lewej stronie tego interfejsu znajdujemy blok „Niestandardowe linki” i otwieramy go (mówiłem o wstawianiu linków bardziej szczegółowo w instrukcjach):

Aby utworzyć strukturę menu, potrzebujemy linków pośredniczących, aby nie było przejścia do niektórych nieistniejących stron lub witryn zewnętrznych. Aby to zrobić, w polu „URL” wystarczy wskazać symbol skrótu - #, a w polu „Tekst linku” wstawić potrzebną frazę.

Po kliknięciu przycisku „Dodaj do menu” utworzony przez nas element pojawi się po prawej stronie ekranu:

Dodawanie innych pozycji do menu

Teraz analogicznie tworzymy pozostałe pozycje menu pierwszego poziomu. W rezultacie otrzymamy coś takiego jak ten obrazek:

Zachowajmy nasze wynik pośredni i wejdź na stronę, aby zobaczyć, jak będzie wyglądać pierwsza wersja menu, które właśnie stworzyliśmy:

Jak na razie wygląda to dobrze, myślę, że możemy kontynuować. Przy okazji, jeśli nie widzisz właśnie utworzonego menu, powinieneś zwrócić uwagę na sekcję „Obszary tematyczne” w interfejsie zarządzania menu i wybrać tam potrzebną opcję. U mnie wygląda to tak:

Wracamy do interfejsu zarządzania menu i teraz przez analogię dodamy wszystkie menu drugiego poziomu, które będziemy mieli w postaci rozwijanego menu dla pozycji „Usługi”. Wszystko jest dokładnie takie samo, nie pokażę tu nic nowego.

Wynik powinien być następujący:

Najprawdopodobniej będziesz się zastanawiać, dlaczego pozycje menu nie znalazły się w pozycji „Usługi”. Być może zespół programistów WordPress stworzyłby elementy podrzędne, dodając dodatkową opcję, jak na przykład, ale uczynili to wygodniejszym, spójrz:

Wystarczy chwycić za pomocą przycisku myszy potrzebną pozycję i po prostu przeciągnąć ją pod pozycję menu głównego. Co zrobiłem w końcu: przeciągnąłem "Wybór sprzętu" pod "Usługi", wizualnie pozycja podmenu była wcięta po lewej stronie.

Analogicznie zrobimy inne punkty:

W przypadku niektórych projektów internetowych programiści korzystają z rozwijanego menu pionowego, w którym początkowo wszystkie podsekcje są ukryte i są wyświetlane tylko po kliknięciu elementu nadrzędnego. Kilka razy spotkałem się z tym zadaniem, ale przekonałem klientów do odmowy takiej realizacji. Faktem jest, że dla niewielkiej liczby stron w serwisie skuteczność takiego rozwiązania jest minimalna - znacznie lepiej, gdy odwiedzający od razu widzi wszystkie dostępne linki.

Tak więc, jeśli masz w swoim projekcie złożoną strukturę menu z wieloma podsekcjami i stronami, to w celu zaoszczędzenia miejsca, całkiem możliwe jest użycie efektu rozwijanego. Rozważ jego wdrożenie dla WP z za pomocą CSS i JavaScript.

Znalazłem dla Ciebie dwie opcje, chociaż myślę, że w sieci jest znacznie więcej „podobnych dóbr”. Pierwszy jest całkowicie związany z WordPressem, drugi to ogólny artykuł o pionowym menu rozwijanym w CSS. Najważniejsze jest tutaj zrozumienie logiki, a następnie samodzielne ich wdrożenie. Nawiasem mówiąc, w przypadku złożonej nawigacji poziomej radzę z wieloma ustawieniami i fajnymi funkcjami.

Krok 1. Tworzenie menu w adminWzadzwoń

Proces ten jest niezwykle prosty. Zaloguj się do systemu i przejdź do sekcji „Wygląd” - „Menu”. Tam dodajesz sekcję z akapitami, w której określasz element nadrzędny:

• Symbol » # » w polu URL (dla )
• Tytuł sekcji w polu Tekst łącza.
• Klasa rozwijana w polu Klasy CSS.

Jeśli ostatni element nie jest wyświetlany na twojej stronie, na samej górze znajduje się zakładka „Opcje ekranu” (Opcje ekranu). W formularzu, który się otworzy po kliknięciu, będziesz musiał zaznaczyć pole obok napisu „Klasy CSS”.

Po utworzeniu/wprowadzeniu zmian kliknij „Zapisz menu”. Możesz go wyświetlić na stronie za pomocą widżetu Menu niestandardowe.

Krok 2. Ukrywanie podsekcji za pomocą CSS.

Teraz musimy wizualnie ukryć podpunkty sekcji. Aby to zrobić, przejdź do "Wygląd" - "Edytor" i wybierz plik stylu swojego motywu style.css (lub inny). Dodawanie kodu:

.menu .dropdown .sub-menu ( wyświetlacz : brak ; )

Menu .dropdown .sub-menu ( wyświetlacz: brak; )

Możesz również umieścić go w ustawieniach motywu, jeśli masz profesjonalny szablon z obsługą niestandardowych stylów (zwykle opcja nazywa się Custom CSS in Ustawienia główne Tematy).

Krok 3. JavaScript dla menu rozwijanych w wordpressie

W przypadku motywów zaawansowanych można użyć ustawienia Niestandardowy Javascript, ale w ogólnym przypadku przejdź do sekcji „Wygląd” – „Edytor”, gdzie otwieramy plik nagłówkowy header.php. Dodaj skrypt przed tagiem zamykającym.

< script type= "text/javascript" >jQuery(dokument) .ready (funkcja () ( jQuery(".menu .dropdown a" ) .click (funkcja (e) ( e.preventDefault () ) ; if (jQuery(this ) .parent() .children ("). sub-menu:first" ) .is (:visible" ) ) ( jQuery(this ) .parent() .children (.sub-menu:first" ) .hide () ; ) else ( jQuery(this ) . rodzic() .dzieci (".sub-menu:pierwszy" ) .show () ; )) ) ;) );

Zapisujemy i sprawdzamy, czy utworzone przez Ciebie rozwijane menu pionowe działa na stronie WordPress. Jeśli nic się nie dzieje, spróbuj ponownie dokładnie wykonać wszystkie kroki krok po kroku - przetestowałem kod, wszystko jest w porządku. Jeśli poniższe linki nie działają, spróbuj zastąpić wiersz:

jQuery(.menu .dropdown a" ) .kliknij (funkcja (e) (

jQuery(".menu .rozwiń a").klik(funkcja(e)(

jQuery(".menu .dropdown > a") .click (funkcja (e) (

jQuery(".menu .dropdown > a").click(funkcja(e)(

Jak obiecano powyżej, oto kolejna opcja tworzenia rozwijanego menu pionowego. Jest nieco inny w koncepcji i implementacji, a ponadto będzie ogólny przykład HTML, który nie jest specyficzny dla WordPressa. Możesz go zastosować do dowolnej witryny. Początkujący programiści powinni się przydać. Opis metody w języku angielskim kan. Oto jak wygląda menu.

Prosty kod HTML do implementacji:

Moje konto panel Profil Ustawienia Wyślij opinię

Wykorzystuje następujące Style CSS:

.dropdown ( kolor : #555 ; margin : 3px -22px 0 0 ; szerokość : 143px ; pozycja : względne ; wysokość : 17px ; text-align : lewo ; ) .submenu ( tło : #fff ; pozycja : bezwzględna ; góra : - 12px ; left : -20px ; z-index : 100 ; width : 135px ; display : none ; margin-left : 10px ; padding : 40px 0 5px ; border-radius : 6px ; box-shadow : 0 2px 8px rgba (0 , 0 , 0 , 0,45 ) ; ) .dropdown li a ( kolor : #555555 ; display : block ; font-family : arial ; font-weight : bold ; padding : 6px 15px ; cursor : pointer ; text-decoration : none ; ) .dropdown li a: hover ( background : #155FB0 ; color : #FFFFFF ; text-decoration : none ; ) a.account ( font-size : 11px ; line-height : 16px ; color : #555 ; position : absolute ; z -index : 110 ; display : block ; padding : 11px 0 0 20px ; wysokość : 28px ; width : 121px ; margin : -11px 0 0 -10px ; text-decoration : none ; background : url (ikony/strzałka. png ) 116px 17px bez powtórzeń ; kursor : wskaźnik ; ) .root ( list-style : none ; margin : 0px ; padding : 0px ; font-size : 11px ; padding : 11px 0 0 0px ; border-top : 1px solid #dedede ; )

Lista rozwijana ( kolor: #555; margines: 3px -22px 0 0; szerokość: 143px; pozycja: względna; wysokość: 17px; text-align:left; ) .submenu ( background: #fff; pozycja: bezwzględna; góra: -12px ; left: -20px; z-index: 100; width: 135px; display: none; margin-left: 10px; padding: 40px 0 5px; border-radius: 6px; box-shadow: 0 2px 8px rgba (0, 0 , 0, 0,45); ) .dropdown li a (kolor: #555555; wyświetlacz: blok; rodzina czcionek: arial; grubość czcionki: pogrubienie; dopełnienie: 6px 15px; kursor: wskaźnik; dekoracja tekstu: brak; ). rozwijane li a:hover ( tło:#155FB0; kolor: #FFFFFF; dekoracja tekstu: brak; ) a.account ( rozmiar czcionki: 11px; wysokość linii: 16px; kolor: #555; pozycja: bezwzględna; z- index: 110; display: block; padding: 11px 0 0 20px; wysokość: 28px; szerokość: 121px; margines: -11px 0 0 -10px; text-decoration: brak; background: url(icons/arrow.png) 116px 17px no-repeat; cursor: pointer; ) .root ( list-style:none; margin:0px; padding:0px; font-size: 11px; padding: 11px 0 0 0px; border-top: 1px solid #dedede; )

Pamiętaj, że ścieżki do obrazów strzałek (icons/arrow.png) mogą się różnić + nie zapomnij o samych obrazach. Ogólnie projekt menu rozwijanego menu pionowe można przedstawić na poniższym diagramie (dla tych, którzy nie są szczególnie dobrze zorientowani w zakresie wcięć).

JavaScript

W kodzie JavaScript funkcja $(„.account”).click(function()() używa klasy „account” elementu nadrzędnego Moje konto. Używając $(this).attr('id') , wartość atrybutu id jest określony, po czym jest stosowany operator warunkowy aby wyświetlić podmenu.podmenu. Zmienia to również wartość $(this).attr('id', '1').

< script type= "text/javascript" src= „http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”>; < script type= "text/javascript" >$(document) .ready (function () ( $(.account" ) .click (function () ( var X= $(this ) .attr ("id" ) ; if (X== 1 ) ( $( ".submenu" ) .hide () ; $(this ) .attr ("id" , "0" ) ; ) else ( $(".submenu" ) .show () ; $(this ) .attr ("id" " , "1" ) ; ) ) ; //Kliknij myszą na podmenu $(".submenu" ) .mouseup (funkcja () (return false) ); //Kliknij myszą na link do mojego konta$(".konto" ) .mouseup (funkcja () (zwróć false) ); //Dokument Kliknij $(dokument) .mouseup (funkcja () ( $(".submenu" ) .hide () ; $(".account" ) .attr ("id" , "" ) ; ) ); ) ;

;

Po kliknięciu strony z $(document).mouseup(function() , to pionowe menu rozwijane CSS zostanie ukryte.

W przypadku WordPressa pierwsza opcja jest oczywiście bardziej przydatna. Jest tak prosty, jak to tylko możliwe w implementacji i użytkowaniu (nawet zwykły użytkownik będzie mógł dodawać nowe sekcje do tego menu).

Z narzędziami WordPressa można wiele zrobić. dobra nawigacja w Twojej witrynie. Jednym z elementów nawigacyjnych witryny WP jest specjalnie przygotowane menu witryny. Menu WordPress można tworzyć zarówno za pomocą wewnętrznych narzędzi administracyjnych WP, jak i wtyczek.

Utwórz menu WordPress za pomocą wbudowanych narzędzi administracyjnych

Trochę o zasadach organizacji i strukturze menu WordPressa

Podstawowy kod wordpress umożliwia utworzenie menu składającego się z trzech elementów: dowolnych linków, kategorii witryn i stron witryny.

• Dowolne linki to możliwość wstawienia elementu do menu - link do dowolnego strona strony trzeciej Internet lub wewnętrzna strona strona. W ten sposób możesz wstawić stronę główną witryny do menu, podając adres strony głównej witryny w polu URL.
• Nagłówki i strony serwisu są wybierane do menu z listy nagłówków i stron faktycznie istniejących w serwisie. Na tej liście nie ma szkiców nagłówków i stron.

Liczba menu, które można przygotować, jest ograniczona jedynie zdrowym rozsądkiem. Przy dużej liczbie nieużywanych menu mogą wystąpić problemy z wczytaniem tej strony panelu administracyjnego. Ponadto nie ma szczególnego sensu tworzenie zapasowych menu, ponieważ przydzielone miejsca na ich umieszczenie są ograniczone w szablonie. Każdy szablon ma określoną liczbę przydzielonych miejsc na menu. Zwykle jest to jeden lub dwa.

Na stronie ustawień „Menu” musisz wybrać miejsca do umieszczenia menu szablonu w lewej górnej części strony, nagłówek „Obszar tematyczny”.

Na stronie Menu znajdują się dwa przyciski: Edytuj menu i Zarządzaj obszarami. Zmiana wyglądu strony w żaden sposób nie zmienia jej funkcjonalności. Menu jest „składane” według tych samych zasad: pozycje menu są wybierane z Zewnętrzne linki, strony i nagłówki.

Na przykład stwórzmy Menu WordPress ze strony głównej serwisu oraz rozgałęzionego menu nagłówków i stron serwisu.

Utwórz menu WordPress z niestandardowym linkiem

Zrzuty ekranu dla wersji poniżej WP 3.8.

Aby utworzyć menu WordPress, nadaj mu nazwę. W prawej górnej części okna wpisz „Tytuł menu” i kliknij „Zapisz menu”. Menu zostało stworzone, teraz musisz wypełnić je niezbędnymi pozycjami.

Notatka: Możesz stworzyć dowolną ilość menu WordPressa, ale możesz umieścić je na stronie tylko w specjalnie wyznaczonych miejscach w szablonie.

W WordPressie jako strona główna możesz wybrać:

• dowolna statyczna strona witryny;
• lub najnowsze opublikowane artykuły w formie bloga.

W tym przykładzie jako stronę główną wybierzemy stronę, która otwiera się w głównej domenie witryny. Aby utworzyć pozycję menu Strona główna» w części «Arbitralne linki» wpisz adres URL strony. W elemencie „Tekst” wprowadź nazwę, na przykład „Dom”. Kliknij „Dodaj do menu”.

Po dodaniu do menu pojawia się nowa pozycja o nazwie „Dom”.

Ciekawy punkt arbitralnie. Po kliknięciu „Niestandardowy” pojawi się formularz, w którym

• możesz edytować tę pozycję, uzupełnić ją o atrybuty tytułu (ta pozycja pojawi się po najechaniu kursorem myszy na pozycję menu);
• zapisać zmiany w pozycji menu;
• usuń tę pozycję menu;
• i co bardzo przydatne, możesz zmienić jego nazwę.

W tym przykładzie nic nie trzeba zmieniać, więc zapisujemy menu z dodaną pozycją „Strona główna”.

Utworzone menu pozostaje do umieszczenia na stronie. Można to zrobić w części „Obszar tematyczny”. Z menu rozwijanych Nawigacja (mogą to być Nawigacja główna i Nawigacja górna) wybierz utworzone menu „Strona główna” i kliknij Zapisz.

utwórz gotowe menu wordpress

Menu jest tworzone i hostowane na stronie Wordpress.

Notatka. W ten sam sposób możesz tworzyć i wypełniać dowolne menu niezbędnymi elementami z dowolnymi linkami do dowolnych postów w witrynie według ich adresów URL.

Stwórzmy kolejne menu z nagłówkami i stronami witryny

Utwórz menu o nazwie „Nagłówki”. Aby to zrobić, najpierw utwórz menu, nadając mu nazwę. Naciskamy znak plus [+] , wpisujemy dowolną nazwę menu w wyświetlonym formularzu i klikamy „Utwórz menu”. Menu pod nową nazwą jest tworzone i zapisywane. Pozostaje go złożyć, czyli wypełnić niezbędnymi przedmiotami.

W oknach „Strony” i „Nagłówki” wybierz niezbędne nagłówki i / lub strony, które chcesz dodać do menu. Aby dodać, kliknij przycisk „Dodaj do menu”.

W środkowej części strony ustawień „Struktura menu” wyświetlane są wszystkie wybrane pozycje menu, które można uporządkować w żądanej strukturze. Tutaj możesz zmienić kolejność elementów, po prostu przeciągając lewy przycisk myszy. Możesz także tworzyć elementy nadrzędne i podrzędne.

Nie zapomnij o "Zapisz menu". Jak widać, stworzenie menu WordPressa nie jest trudne. Jednakże, w Wygląd menu stworzonych za pomocą wewnętrznej administracji WordPressa jest całkowicie zdeterminowany projektem szablonu witryny. Czasami nie jest to najbardziej atrakcyjny wygląd. Aby stworzyć menu o indywidualnym wyglądzie, w tym efekt upuszczania podelementów, możesz użyć dobrej wtyczki widżetu menu rozwijanego.

Oryginalna wtyczka menu rozwijanego WordPress Widżet menu rozwijanego

Przed zainstalowaniem wtyczki zwróć uwagę na przetestowanie jej na swojej wersji WordPressa.

Najpierw zainstaluj wtyczkę na swojej stronie. Możesz to zrobić za pomocą wtyczek, w tym pobierając wtyczkę z oficjalnej strony wtyczek na WordPress.org ( //wordpress.org/extend/plugins/dropdown-menu-widget/) i prześlij go do folderu wp-content/plugins.

Po aktywacji wtyczki w menu „Opcje” pojawia się nowa pozycja „Rozwijane menu”. Za pomocą dwóch kliknięć otwórz go do konfiguracji.

Podstawowe ustawienia wtyczki dokonujemy według własnego uznania. Zajmę się kilkoma z nich.

W pozycji „Motywy” wybierz jeden z 10 motywów nowego menu.

W sekcji „Efekty” zaznacz pole wyboru „Użyj efektu dropout”;

W pozycji „Tag szablonu” (Tagi szablonu) wybierz z listy rozwijanej menu, które chcesz wyświetlić. Tutaj kopiujemy kod, który należy wstawić do szablonu Twojej witryny, aby na stronie pojawiło się nowe menu.

Wklej kod menu rozwijanego do szablonu strony internetowej

Aby wstawić kod menu (poniżej) do szablonu, otwórz w konsoli Wygląd >>> Edytor.

Wklej kod w dowolnym miejscu szablonu, na przykład w pliku szablonu nagłówek.php. wybrałem miejsce przed menu szablonów utworzonym przez wewnętrzne narzędzia administracyjne. Nie zapomnij zapisać.

Przed testowaniem nowego menu należy usunąć stare menu. Jeśli utworzone menu zawiera pozycje i podpunkty, podpunkty znikną.

Po zainstalowaniu wtyczki widżetu Dropdown Menu, na liście widżetów pojawia się nowy widżet Dropdown Menu, który można również wykorzystać do stworzenia rozwijanego menu z boku strony.

To wszystko o tym, jak stworzyć proste i rozwijane menu WordPress!

Rozwijanego menu nie trzeba przedstawiać, wszyscy od dawna rozumieją jego zalety. Wygodnym sposobem nawigacja, odzwierciedlająca hierarchię stron serwisu. A dzisiaj porozmawiamy o tym, jak stworzyć takie menu na swoim blogu wordpress i jak przypisać do niego różne style i efekty wizualne.

Zacznijmy od najprostszego, jak stworzyć rozwijane menu w WordPressie. Myślę, że większość użytkowników o tym wie, ale wyjaśnię to w skrócie. Rozwijane menu to menu zawierające podstrony, więc aby je utworzyć, musisz stworzyć w swoim blogu przynajmniej jedną stronę nadrzędną i jedną podrzędną.

Aby nie kontynuować bezsensownej rozmowy, wyobraźmy sobie, że mamy na blogu stałą, statyczną stronę o nazwie „O blogu”, dlatego utworzymy dla niej trzy podstrony: „o autorze”, „kontakty”, „partnerzy” .

Tak więc, jedna po drugiej, w najbardziej typowy sposób, dodamy wszystkie trzy strony, z wyjątkiem tego, że w polu strony nadrzędnej wybierz „O blogu”.

Po tych, w dodatku proste czynności, w swoim blogu pojawi się menu rozwijane, ale jego wygląd zależy od używanego motywu. Jeśli jest to jeden z motywów dostarczanych z WordPress, Twoje menu pojawi się na pasku bocznym jako lista punktowana.

Jeśli użyjesz motywu innej firmy, wszystko zależy od sumienia dewelopera. Często spotykałem się z bardzo pięknymi motywami, w których w ogóle nie było rozwijanego menu, w wyniku czego po dodaniu szablon się rozsypywał.

1. Pierwszą rzeczą, którą zrobimy, jest umieszczenie menu tuż za nagłówkiem, a żeby to zrobić, najpierw musimy usunąć je z paska bocznego. Otwórz plik sidebar.php, znajdź w nim wiersz

Strony"); ?>

i usuń to

2. Teraz umieśćmy menu pod nagłówkiem, w tym celu otwieramy plik header.php, a po bloku „headerimg” wstawiamy następujące wiersze:

Tutaj parametr title_li= z pustą wartością oznacza, że ​​menu będzie wyświetlane bez napisu „Strony”.

3. Teraz dodajmy trochę stylizacji do naszego menu, aby wyglądało zgodnie z ogólnym projektem motywu, w pliku style.css:

/*ogólny styl bloku menu*/ #menu( height: 30px; background: #4182b8; margin: 5px 20px 100px 20px; clear: both; font-size: 14px; ) /*styl linków menu*/ #menu li a ( kolor: #fff; display: block; line-height: 27px; padding: 0 10px; ) #menu li a:hover( background: #07599d; text-decoration: none; ) /* styl dla elementów pierwszego poziomu, t . mi. strony podrzędne*/ #menu li( list-style: none; float: left; ) /*styl dla pozycji menu podrzędnego*/ #menu li ul li( float: brak; ) #menu ul( background: #4182b8; margin: 0; dopełnienie: 0; pozycja: bezwzględna; z-index: 10; )

Po dodaniu stylów menu powinno wyglądać mniej więcej tak:

4. Następnie fajnie byłoby wyróżnić aktywne strony. Na moim blogu wcześniej opublikowano artykuł na ten temat, chociaż nie dotyczył on stron podrzędnych. Oznacza to, że jeśli jesteśmy na stronie podrzędnej, byłoby miło znać jej stronę nadrzędną. Jest to całkiem łatwe w CSS:

Current_page_item, .current_page_parent(tło: #07599d; dekoracja tekstu: brak; )

Here.current_page_item jest bieżącym aktywna strona(na poniższym zrzucie ekranu jest to strona „partnerzy”), .current_page_parent to jej strona nadrzędna.

5. Wszystko byłoby w porządku, ale menu rozwijane, jak to się nazywa, ma pojawiać się i znikać po najechaniu myszą, a nie być stale wyświetlane na ekranie. Więc ukryjemy to najpierw w CSS, a potem pokażemy w jQuery.

/*line display:none ukrywa rozwijane menu*/ #menu ul( display: none; background: #4182b8; margin: 0; padding: 0; position: absolute; z-index: 10; )

W zasadzie to wystarczy, teraz po najechaniu myszą na nazwę strony wyświetli się menu podrzędne. Ale możesz pójść dalej i dodać różne efekty wyglądu menu potomnego.

6. Efekt powolnego pojawiania się menu podrzędnego uzyskuje się w bardzo prosty sposób poprzez zmianę wysokości, szerokości i przezroczystości wyświetlanego bloku. Wystarczy dodać jeden parametr do już napisanego kodu:

Możesz dodać efekt wyglądu bez przezroczystości, pionowy:

Jeśli to konieczne, wyświetl menu rozwijane na stałe, jeśli strona podrzędna jest aktywna (odpowiednia dla pionu menu boczne), następnie odbywa się to w następujący sposób:

Być może przykład nie jest zbyt elegancki z punktu widzenia programowania (jeśli pojawią się sugestie usprawnień, chętnie to poprawię), ale zadziała.

Jak widać, każdy użytkownik może stworzyć rozwijane menu i wygląd zewnętrzny zależy wyłącznie od Twojej wyobraźni i znajomości efektów jQuery.

Rozwijane mega menu- świetne znalezisko projektowe. Nawigacja w witrynie zawierający duża liczba stron, zawsze był problem. Klasyczne statyczne menu a la sitemap szybko rosną wraz ze wzrostem liczby stron i zajmują dużo miejsca. Dynamiczne rozwijane menu mogą znacznie zaoszczędzić miejsce na stronie, ale poświęca się użyteczność - nawigacja wymaga aktywnej i dość precyzyjnej pracy myszy. Lekko pominięty i ujawnia się niewłaściwe menu.

Impulsem do rozwoju koncepcji mega-menu był prawdopodobnie interfejs wstęgowy Microsoft Office 2007. Ta koncepcja znajduje się pomiędzy prostym statycznym menu a dynamicznym menu rozwijanym. Z jednej strony takie menu jest dość pouczające i intuicyjne, z drugiej strony znacznie ogranicza niezbędne manipulacje myszą. Rozwijając się, może wykorzystać całą dostępną przestrzeń na ekranie, co pozwala użytkownikowi zagarnąć wszystkie oferowane w tym kontekście przedmioty, a w razie potrzeby ukryć.

Tak czy inaczej, mega-menu jest teraz, jak mówią, modne, a jeśli jeszcze z niego nie korzystałeś, powinieneś przyjrzeć mu się bliżej.

UberMenu: wtyczka WordPress Mega Menu

Ta wielofunkcyjna wtyczka może być bezpiecznie umieszczona na pierwszym miejscu w tej recenzji: tworzy pełne mega menu, ma niesamowitą liczbę różnych opcji, w tym sterowanie kolorem tła i czcionki, rozmiar czcionki i tak dalej. A wszystko to odbywa się z potężnego i wygodnego panelu ustawień.

Ponadto menu posiada również szereg innych świetnych funkcji, takich jak:

• Wbudowana responsywna siatka
• Indywidualna regulacja szerokości każdej kolumny oraz ustawienie domyślnej szerokości
• Łączenie pozycji menu w grupy
• Centrowanie pozycji menu w rzędach poziomych
• Niestandardowe obrazy tła
• Przewijalne podmenu zawierające dużą liczbę pozycji.

Podsumowując, bardzo potężna wtyczka, którą bardzo polecam.

Koszt: 19$

Mega Menu Główne

Bardzo popularna i szeroko stosowana wtyczka Mega Menu Główne wie, jak zachować równowagę między funkcjonalnością a prostotą. Do Twojej dyspozycji jest ponad 10 różnych narzędzi do tworzenia rozwijanych menu, które mogą zawierać tekst, obrazy, linki i widżety. Do tego nieograniczone ustawienia kolorów i ponad 600 czcionek Google.

Koszt: $15

Mega Menu

Mega Menu- nowoczesna i wielofunkcyjna wtyczka, która będzie odpowiadać zarówno zwykłym użytkownikom, jak i programistom - można ją łatwo osadzić we własnym opracowanym motywie.

Wtyczka oferuje szeroką gamę opcji dla tworzenie menu z nowoczesnymi i stylowy design: orientacja pionowa lub pozioma, możliwość włączenia elementów menu linki, obrazy, a nawet karty produktów WooCommerce lub Easy Digital Downloads, które mogą się przydać podczas tworzenia sklepów internetowych.

Koszt: 19$

Niebo Mega Menu

Trzy opcje projektowania dla urządzenia mobilne, 9 schematów kolorów, niestandardowa siatka, kształty i 360 wektorowe ikony. Ten zestaw pozwala Sky Mega Menu zająć należne mu miejsce wśród swojego gatunku.

Koszt: $6

Mega menu WP

Wtyczka z kategorii must have. Wiele ustawień i opcji, praca z kategoriami, podkategoriami i wiadomościami, Optymalizacja SEO oraz dwa gotowe schematy kolorów (ciemny i jasny), które jednak można łatwo zmienić według własnych upodobań.

Koszt: 29 USD

NIE Menu

Aby zrozumieć panel ustawień NIE Menu nie musisz nawet czytać dokumentacji - wszystko jest tak intuicyjne. Mając pod ręką zapowiedź w czasie rzeczywistym możesz po prostu zmieniać wartości i przesuwać suwaki podczas oglądania efektu. schemat kolorów możesz to zmienić całkowicie dowolnie i każdą opcję zapisać pod własnym nazwiskiem, a ilość tych opcji jest nieograniczona.

Zawartość pozycji menu może być tekst, linki, obrazy, filmy, formularze i różne widżety. Wykorzystuje własną 12-kolumnową siatkę, aby to wszystko pomieścić.

Koszt: $15

Hero Menu – Responsywna wtyczka WordPress Mega Menu

Hero Menu pozwala powiązać linki do postów, kategorii, zewnętrznych adresów URL z pozycjami menu, a także wyświetlać w nich posty na blogu wraz z wyróżnionym obrazem. W Ostatnia wersja ogłosił pełne wsparcie dla platformy WooCommerce. Do wygodna obsługa ma wbudowany edytor „przeciągnij i upuść”.

Projekt jest nowoczesny i stylowy i oczywiście całkowicie.

Koszt: 19$

Superfly — responsywna wtyczka menu WordPress

Tak zwany menu latania- najnowszy trend w świecie web designu. Takie menu po cichu „drzemie” w rogu strony w postaci ikony, zajmując prawie niewiele miejsca, a po najechaniu na nie otwiera się, przesuwając elementy strony, a nie nachodząc na nie.

Jednym z przedstawicieli tego typu mega-menu jest Superfly - Responsive WordPress Menu Plugin. Imponujący instrument zarówno pod względem wzornictwa, jak i funkcji.

Koszt: 22 USD

Przełącz menu

Wraz z rosnącą popularnością urządzeń mobilnych, menu wyskakujące (lub kontekstowe) stają się ważne, ponieważ mogą zaoszczędzić dużo miejsca na ekranie.

Przełącz menu jest bardzo proste, minimalistyczne menu, który jednak doskonale radzi sobie ze swoją główną funkcją.

Koszt: $5

WP pływające menu Pro

WP pływające menu Pro to wtyczka 2 w 1. Nawigator menu dla witryny jednostronicowej i naklejki menu. Co więcej, dzięki tej wtyczce możesz, przynajmniej wizualnie, przekształcić swoją tradycyjną witrynę w nowoczesną witrynę jednostronicową. WP Floating Menu Pro zapewni płynne przewijanie z jednej części strony do drugiej.

Do dyspozycji dewelopera WP Floating Menu Pro oferuje 13 i 7 różne opcje lokalizacja na stronie, opcje dostosowywania, kolor, treść i liczba punktów.
W przypadku ekranów mniejszych niż 480px możliwe jest: automatyczne wyłączanie menu.

Koszt: $17

Wtyczka WordPress Flexi Menu

Flexi Menu to 5 różnych, w pełni konfigurowalnych typów menu: menu latania, szeroka (szerokość strony), szeroka+opisy, szeroka+obrazy i pionowa.

Koszt: 14 USD

Max Mega Menu (bezpłatnie)

Bardzo dobry wtyczka z edytorem menu przeciągnij i upuść oraz możliwość osadzenia niemal dowolnego widżetu w pozycjach menu - od formularzy kontaktowych po mapy Google.

Możliwość automatycznej konwersji istniejących zwykłych menu w jedno mega menu z pełną kontrolą nad procesem konwersji i zapisywaniem lub ponownym przypisywaniem odpowiednich działań.