Kiedy tworzysz rozbudowany serwis, w którym występują wielopoziomowe pozycje menu, często istnieje potrzeba utworzenia menu lokalnego, które jest widoczne tylko w określonej sytuacji.

Powiedzmy, że menu główne wyświetla tylko jeden poziom pozycji. Takie menu jest często widoczne jako menu poziome umieszczone w górnym obszarze witryny. Kiedy użytkownik kliknie wybraną pozycję menu, otwiera stronę, na której - oprócz określonych treści - widoczne będzie menu lokalne wyświetlające kolejne poziomy pozycji menu głównego.

Zrzut ekranu przedstawiający menu lokalne wyświetlane po kliknięciu pozycji w menu głównym

Krok 1. Utwórz moduł menu

Aby jakiekolwiek utworzone wcześniej menu było widoczne w twoim serwisie, musisz najpierw utworzyć moduł, a następnie przypisać do niego wybrane menu.

Zaloguj się zatem do zaplecza administracyjnego swojego serwisu i otwórz okno menadżera modułów (menu Rozszerzenia / Moduły). Następnie kliknij przycisk Utwórz.

Zrzut ekranu przedstawiający okno menadżera modułów z zaznaczonym przyciskiem Utwórz

W kolejnym oknie kliknij odnośnik Menu

Zrzut ekranu przedstawiający okno z tworzenia nowego modułu typu Menu

Krok 2. Skonfiguruj moduł Menu

W oknie Moduły: Moduł Menu wypełnij pole Tytuł modułu, w polu Pokaż tytuł zdecyduj, czy tytuł modułu ma być widoczny w Twoim serwisie. W polu Pozycja wybierz z listy nazwę obszaru strony, w którym powinien być opublikowany moduł.

  • w polu Wybierz menu, wybierz z listy menu, które ma być wyświetlane w module;
  • w polu Pozycja bazowa wybierz z listy pozycję menu, która zostanie użyta do kontrolowania wyświetlania modułu. Wybranie tej pozycji będzie informacją dla systemu, że moduł należy wyświetlać tylko wtedy, gdy internauta kliknie tę pozycję, lub pozycję podrzędną;
  • w polu Rozpocznij od poziomu wybierz z listy poziom, od którego chcesz, aby system wyświetlał moduł. Jeżeli tworzysz menu lokalne w oparciu o kolejne poziomy menu głównego, to wybierz poziom 2;
  • w polu Najniższy poziom wybierz z listy poziom, na którym system powinien zaprzestać wyświetlania modułu;
  • w polu Pokaż pozycje podmenu zdecyduj, czy chcesz, aby moduł wyświetlał wszystkie pozycje podrzędne. Nawet wówczas, kiedy nie została kliknięta pozycja nadrzędna;

Zrzut ekranu przedstawiający opcje konfiguracyjne modułu Menu

Zapisz wprowadzone zmiany i sprawdź, jak moduł menu lokalnego prezentuje się w twoim serwisie.

Jak uatrakcyjnić wygląd menu lokalnego?

Możesz w dosyć prosty sposób wykonać atrakcyjny moduł, w którym na górze znajduje się atrakcyjna grafika a pod nią menu.

Takie rozwiązania zaimplementowane jest już w pakietach startowych Kuźni Dostępnych Stron, np. JSzkoła. 

Zrzut ekranu przedstawiający ulepszone menu lokalne wyświetlane po kliknięciu pozycji w menu głównym

Jak wykonać taki moduł?

Wystarczy, że umieścisz wcześniej wykonany moduł menu w module typu własny HTML.

Zdefiniuj własną pozycję dla modułu typu menu

Edytuj moduł wyświetlający menu lokalne (menu Rozszerzenia / Moduły). W polu Pokaż tytuł kliknij przycisk Ukryj, a następnie w polu Pozycja wpisz własną nazwę pozycji, która nie występuje w twoim szablonie, np. oszkole

Zrzut ekranu przedstawiający okno edycji modułu typu Menu

Zapisz wprowadzone zmiany, klikając przycisk Zapisz i zamknij

Sprawdź, czy dodatek Artykuły - Wpinacz modułów jest włączony (opublikowany)

Zrzut ekranu przedstawiający wygląd menadżera dodatków z zaznaczoną pozycją Artykuły - Wpinacz modułów

Utwórz nowy moduł typu Własny HTML

Zrzut ekranu przedstawiający okno z tworzenia nowego modułu typu Własny HTML

W oknie Moduły: Moduł Własny HTML wypełnij pole Tytuł modułu, w polu Pokaż tytuł zdecyduj, czy tytuł modułu ma być widoczny. W polu Pozycja, wybierz z listy nazwę obszaru strony, w którym chcessz opublikować moduł.

Za pomocą domyślnego edytora wstaw własną grafikę, a pod nią kod o składni:

Zrzut ekranu przedstawiający opcje konfiguracyjne modułu typu Własny HTML

Kliknij zakładkę Opcje podstawowe, a następnie w polu Obsługa dodatków kliknij przycisk Tak

Zrzut ekranu przedstawiający opcje konfiguracyjne po kliknięciu zakładki Opcje podstawowe moduły Własny HTML

Zapisz wprowadzone zmiany i sprawdź, jak prezentuje się wzbogacony o grafikę moduł menu lokalnego.

Zrzut ekranu przedstawiający menu lokalne z grafiką u góry

Przyrostek klas CSS modułu

Możesz dodatkowo wyróżnić moduł menu lokalnego stosując odpowiednie przyrostki klas CSS zdefiniowane dla twojego szablonu. Aby to zrobić, kliknij zakładkę Wzbogacone, a następnie w polu Przyrostek klas CSS modułu wprowadź spację, a następnie nazwę przyrostka klas.

Zrzut ekranu przedstawiający wygląd opcji konfiguracyjnych po kliknięciu zakładki Wzbogacone w module Własny HTML

Zapisz wprowadzone zmiany i sprawdź, jak moduł menu lokalnego prezentuje się w serwisie

Ministerstwo Administracji i Cyfryzacji Spółdzielnia FADO Fundacja PCJ Otwarte Źródła

Projekt współfinansowany ze środków Ministerstwa Administracji i Cyfryzacji