Przed skopiowaniem bloku przeczytaj instrukcję.

Na obrazku wyróżniającym jest zaprezentowany przykładowy efekt.

Ustawienia personalizatora: Dodaj blok Toggle Widget Area do swojego nagłówka. Kliknij ikonę ustawień (nie trybik, drugi) i upewnij się, że zastosowano następujące ustawienia:
Układ = Panel boczny
Wysuwana strona = Lewa
Maksymalna szerokość wyskakującej zawartości = 500px działa dobrze.

Skopiuj i wklej Javascript w bloku Custom HTML poniżej tych instrukcji do Customiser > Custom Scripts > Add scripts into your footer lub wtyczki code snippet. Pamiętaj, aby zachować znaczniki script

Jeśli zaimportowałeś ten układ do strony, skopiuj i wklej sekcję WPziom Expanding Off Canvas Menu 1 do nowego elementu Kadence (typ zawartości). Pozostaw pole Placement puste i ustaw opcję Show On w sekcji Display Settings na Entire Site, a następnie zapisz. Pobierz shortcode dla nowego elementu.
Przejdź do sekcji Wygląd > Widżety. W obszarze widżetów Header Off Canvas dodaj blok shortcode i wklej shortcode dla nowego elementu.
Menu powinno być teraz wyświetlane w witrynie i możesz je edytować.

Edycja:
Chociaż możesz dodawać i usuwać menu, musisz zachować strukturę, aby ten układ działał. Struktura wygląda następująco,

Menu główne

  • Pozycja 1 (Produkty)
  • Pozycja 2 (Zasoby)
  • Pozycja 3 (O nas)
  • itd.
    Podmenu dla pozycji 1 (Sub: Produkty)
  • Podmenu Pozycja 1 (Pakiety Premium)
  • Podmenu Pozycja 2 (Motyw Kadence)
  • Podmenu Pozycja 3 (Bloki Kadence)
  • itd.
    Podmenu dla pozycji 1 podmenu (podmenu: Pakiety premium)
  • Podmenu dla pozycji 1 podmenu (sekcja)
  • Podmenu dla pozycji podmenu 1 (sekcja)
  • Podmenu dla pozycji podmenu 1 (sekcja)
  • itd.
    Submenu dla Submenu Item 2 (Sub Sub: Kadence Theme)
  • Podmenu dla pozycji podmenu 2 (Konstruktor nagłówków)
  • Podmenu dla pozycji 2 podmenu (Konstruktor stopki)
  • Submenu dla Submenu Pozycja 2 (Układy niestandardowe)
  • itd.
    Submenu dla Submenu Item 3 (Sub Sub: Kadence Blocks)
  • Podmenu dla pozycji 2 podmenu (wiersz/układ)
  • Podmenu dla pozycji 2 podmenu (zakładki)
  • Submenu dla Submenu Item 2 (Info Box)
  • itd.
    itd.
    Podmenu dla pozycji 2 (Sub: Zasoby)
  • Podmenu Pozycja 1 (Blog)
  • Podmenu Pozycja 2 (Szablony startowe)
  • Podmenu Pozycja 3 (Podcast)
  • itd.
    Podmenu dla pozycji 3 (Sub: O nas)
  • Podmenu Pozycja 1 (O Kadence)
  • Podmenu Pozycja 2 (Zostań partnerem)
  • Podmenu Pozycja 3 (Skontaktuj się z nami)
  • itd.
    itd.

Możesz dodać podmenu do Zasobów, O nas itp., aby uzyskać trzeci panel, taki jak pozycja menu Produkty, po prostu zachowaj tę samą strukturę, którą widzisz w Produktach.

Najwyższy poziom:
W sekcji nadrzędnej WPziom Expanding Off Canvas Menu 1 znajduje się sekcja o nazwie Menu główne. Jest to menu najwyższego poziomu i musi być zachowane jako pierwszy element. Wewnątrz niej można dodawać dowolne bloki jako elementy menu. Każdy element menu na najwyższym poziomie musi mieć klasę wpziom-exp-menu-1-main-trigger. W ustawieniach łącza dla każdego elementu menu najwyższego poziomu potrzebna jest kotwica wskazująca na identyfikator odpowiadającego mu podmenu. Na przykład w podanej treści pozycja menu Produkty ma podmenu (Sub: Produkty) z identyfikatorem produkty, więc link do pozycji menu Produkty powinien mieć postać #products.

Sub Level:
Każdy kontener menu niższego poziomu musi mieć klasę wpziom-exp-menu-1-sub. Poszczególne pozycje wewnątrz menu podrzędnego muszą mieć klasę wpziom-exp-menu-1-sub-trigger (jeśli mają otwierać trzeci poziom). Jeśli element ma otwierać trzeci poziom, potrzebna jest kotwica wskazująca na identyfikator odpowiedniego podmenu. Na przykład w podanej treści menu Sub: Products ma pozycję menu Premium Bundles, która otwiera menu Sub: Premium Bundles z identyfikatorem premium-bundles, więc link do pozycji menu Premium Bundles powinien mieć postać #premium-bundles.

Sub Sub Level:
Każdy kontener menu poziomu podrzędnego musi mieć klasę wpziom-exp-menu-1-sub-sub i identyfikator, aby można go było otworzyć za pomocą pozycji menu w odpowiednim menu poziomu podrzędnego.

Wersja mobilna:
W każdym kontenerze menu podrzędnego i podrzędnego u góry znajduje się łącze Wstecz. Linki wstecz są ukryte w wersji desktopowej za pomocą CSS. Linki wstecz muszą mieć klasę wpziom-exp-menu-1-back-trigger.

CSS:
CSS znajduje się w polu Custom CSS w sekcji WPziom Expanding Off Canvas Menu 1. Na górze znajdują się następujące zmienne:

:root {
–wpziom-exp-menu-1-level-1: 500px;
–wpziom-exp-menu-1-level-2: 400px;
–wpziom-exp-menu-1-level-3: 400px;
–wpziom-exp-menu-1-active-color: var(–global-palette1);
}

–wpziom-exp-menu-1-level-1 ustawia szerokość kontenera menu głównego i musi to być ta sama wartość, którą wprowadzono dla maksymalnej szerokości zawartości wyskakującego okienka w konfiguratorze.
–wpziom-exp-menu-1-level-2 ustawia szerokość dla kontenerów menu niższego poziomu. Może to być dowolna szerokość, ale dotyczy wszystkich menu niższego poziomu.
–wpziom-exp-menu-1-level-3 ustawia szerokość kontenerów menu niższego poziomu. Może to być dowolna szerokość, ale dotyczy wszystkich menu niższego poziomu.
–wpziom-exp-menu-1-active-color: var(–global-palette1) definiuje kolor elementów menu głównego, gdy otwarte są odpowiadające im menu niższego poziomu, oraz kolor elementów niższego poziomu, gdy otwarte są odpowiadające im menu niższego poziomu. Możesz zmienić na inny kolor w ramach palety, zmieniając 1 (1-9) lub usunąć tę zmienną, jeśli nie chcesz, aby kolory się zmieniały.

Media querries
W dolnej części CSS zobaczysz dwa media querries, które zaczynają się tak:

@media all and (min-width: 1301px)

@media all and (max-width: 1300px)

Zapytania definiują, kiedy menu przełącza się na wersję mobilną. Punkt przerwania powinien być sumą szerokości 3 poziomów menu zdefiniowanych w powyższych zmiennych. 500 + 400 + 400 = 1300.

Jeśli zmienisz szerokości, musisz zmienić dwa punkty przerwania, aby wersja mobilna została uruchomiona w odpowiednim momencie. Przykład:
–wpziom-exp-menu-1-level-1: 400px;
–wpziom-exp-menu-1-level-2: 300px;
–wpziom-exp-menu-1-level-3: 200px;

400 + 300 + 200 = 900.

Tak więc media querries to:

@media all and (min-width: 901px)
@media all and (max-width: 900px)

To wszystko!

Back

Free Forever

Free

Get Started

Essential Bundle

$129

/first year

Renews at $149 annually, cancel anytime.*

Get the essentials

Full Bundle

$199

/first year

Renews at $219 annually, cancel anytime.*

Get the full bundle

Wstecz

Zobacz wszystkie funkcje

Powrót

Aby uzyskać pomoc, prześlij bilet wsparcia

Jeśli jesteś użytkownikiem darmowego produktu, możesz uzyskać wsparcie tutaj.