Klasy CSS nawigacji w bluetronix CMS – przegląd i zastosowanie
W tym przeglądzie znajdziesz wszystkie ważne klasy CSS nawigacji w CMS bluetronix. Naucz się, jak za pomocą kilku zmian dostosować projekt, responsywność i zachowanie swojej struktury menu.
Klasy CSS nawigacji Opis
Tutaj znajdziesz kompaktowy przegląd, która klasa CSS w Twoim kodzie HTML jest do czego przeznaczona. Dzięki temu szybko możesz dostosować układ i zachowanie.
Ważne: jest miejscem na dane z tabeli nawigacyjnej (np. 00_Menue) i podczas renderowania jest zastępowane przez własne klasy (np. dla widoczności, wyróżnienia, ikon dla każdego elementu menu).
Przegląd klas
| Klasa | Używane w | Cel / znaczenie | Typowa interakcja |
|---|---|---|---|
bx-DesktopHTML1 |
div powyżej paska nawigacji | Górny pasek nad głównym menu (np. powiadomienia, promocje, banery aplikacji). | Widoczność kontrolowana przez placeholdery DB (none). |
bx-DesktopHTML2 |
div poniżej paska nawigacji | Dolny pasek pod głównym menu (dodatkowe informacje/odznaki). | Widoczność przez none. |
bx-nav-outer |
Wrapper dla nav.bx-nav |
Zewnętrzny kontener do pozycjonowania (np. Sticky, cień, szerokość). | Ramka układu na pełną szerokość strony. |
bx-nav |
nav główna nawigacja | Podstawa paska nawigacji (Grid/Flex, tło, wysokość). | Style globalnej paska nawigacji i responsywność. |
bx-navbar-left |
Lewy pasek nawigacji | Obszar dla ikony menu (Burger) i logo. | Zawiera .bx-nav-icon oraz .bx-nav-brand. |
bx-navbar-center |
Środek paska nawigacji | Kontener dla pozycji menu (UL/LI) w tym podmenu. | Wypełnia Mobile/Sidebar przez JS (źródło: #bxNavPoints). |
bx-navbar-right |
Prawa kolumna paska nawigacji | Grupa ikon (Szukaj, Tryb jasny/ciemny, Logowanie, Język, Koszyk, Pasek boczny). | Przyciski wywołują funkcje JS (np. BlueSearchBar()). |
bx-nav-icon |
button / Przyciski ikon | Jednolity styl dla wszystkich ikon paska nawigacji. | Cele kliknięcia dla przełączników (Pasek mobilny, Pasek boczny, Szukaj, itp.). |
bx-nav-brand |
img Logo | Wyświetlanie logo (rozmiar, odstępy). | Często z linkiem do /index.html. |
bx-nav-item |
li w menu głównym | Element listy punktu menu. | Można połączyć z .has-submenu. |
bx-nav-link |
a w menu | Styl linku w menu (czcionka, efekt na najechanie, stany aktywne). | Otrzymuje cel/nazwę przez zmienną bazy danych. |
has-submenu |
li z rozwijanym menu | Oznacza punkt menu z podmenu; aktywuje style rozwijanego menu. | Otwiera/Zamyka powiązane .bx-navbar-dropdown. |
submenu-toggle |
przycisk obok linku | Element sterujące rozwijaniem/zwiń podmenu (ikona chevron). | Zwykle widoczne tylko na większych ekranach (patrz klasy użyteczności). |
d-none, d-lg-inline |
Klasy użyteczności przy przycisku | Sterowanie widocznością (np. ukryj → pokaż jako lg inline). | Responsywne zachowanie przełącznika. |
bx-menu |
ul w rozwijanym menu | Lista wpisów podmenu. | Wypełniane przez nawigację z bazy danych. |
bx-navbar-dropdown |
ul (kontener rozwijanego menu) | Panel rozwijanego menu (pozycjonowanie, cień, animacja). | Otwiera się po najechaniu myszą/kliknięciu lub .submenu-toggle. |
bx-dropdown-item |
li w rozwijanym menu | Pojedynczy wpis podmenu. | Zawiera .bx-dropdown-link. |
bx-dropdown-link |
a w rozwijanym menu | Styl linku wewnątrz rozwijanego menu. | Stany na hover/focus dla lepszej użyteczności. |
bx-mobile-bar |
Mobilne menu (Off-Canvas z prawej) | Kontener do mobilnej nawigacji i opcjonalnych bloków u góry/dole. | Wypełniane przez JS (Źródło: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
Bloki w pasku mobilnym | Opcjonalne sekcje HTML nad/poniżej menu mobilnego (np. logo). | Widoczność przez |
bx-side-bar |
Nawigacja boczna (Off-Canvas z lewej strony) | Kontener dla alternatywnej/dodatkowej nawigacji. | Może zawierać menu lub własne treści. |
bx-SideHTML1, bx-SideHTML2 |
Bloki w pasku bocznym | Opcjonalne sekcje HTML nad/poniżej menu bocznego (np. duże logo). | Widoczność przez |
WKGBAnzDiv |
Bounda do ikony koszyka | Obszar licznika otaczający (Układ/Pozycja). | Zawiera .WKGBAnzDivInner (Liczba). |
WKGBAnzDivInner |
Wnętrze odznaki | Wyświetla aktualną ilość w koszyku. | Wypełniane przez JS z #WKGBAnz. |
Klasy zastępcze z bazy danych
| Zastępcze | Opis | Przykład |
|---|---|---|
|
Każdy punkt menu może być zastąpiony jedną lub kilkoma własnymi klasami (np. only-desktop, highlight, icon-contact). | Steruje widocznością/stylami dla przycisków w wersji desktopowej, mobilnej lub bocznej. |
Połącz .bx-nav-item z klasami zarządzanymi przez bazę danych przy użyciu , aby celowo włączyć/wyłączyć poszczególne przyciski w #bxNavPoints (desktop), .bx-mobile-bar lub .bx-side-bar, bez dostosowywania kodu HTML.
FAQ
co klienci często nas pytają
Tutaj dowiesz się, które klasy CSS odpowiedzialne są za układ, zachowanie i widoczność w twoim HTML w pasku nawigacji. Dzięki temu możesz celowo wprowadzać zmiany w nawigacji.
Co oznacza placeholder ?
Ten placeholder jest automatycznie zastępowany przez własne klasy CSS, które ustalasz w tabeli nawigacji (np. 00_Menue). Dzięki temu kontrolujesz widoczność, wyróżnienie i ikony dla pojedynczych punktów menu.
Jak mogę dodać treści powyżej lub poniżej paska nawigacji?
Użyj do tego klas bx-DesktopHTML1 (u góry) i bx-DesktopHTML2 (na dole). Możesz je w CMS włączyć lub wyłączyć przez CMS ⯈ Strona internetowa ⯈ Nagłówek.
Jaką rolę pełni klasa bx-nav-outer?
Jest to zewnętrzny kontener nawigacji. Dzięki temu kontrolujesz szerokość, cień lub zachowanie sticky paska nawigacji.
Co oznacza bx-nav?
Ta klasa definiuje samą główną nawigację – czyli układ (np. Flex/Grid), kolor tła i wysokość paska nawigacji.
Jak podzielona jest nawigacja na kolumny?
Pasek nawigacji składa się z trzech obszarów: bx-navbar-left (Logo & Ikona menu), bx-navbar-center (punkty menu), bx-navbar-right (ikony takie jak wyszukiwanie, logowanie, język, koszyk).
Co robi klasa bx-nav-icon?
Zapewnia jednolity styl wszystkich ikon w pasku nawigacji. Te przyciski kontrolują np. otwieranie Mobile-Bar, Side-Bar lub wyszukiwanie.
Jak mogę stylizować linki menu?
Za pomocą bx-nav-item definiujesz elementy listy, a przy pomocy bx-nav-link zasady stylu dla długości, stanu hover i aktywnego dla linków.
Jak działa kontrola submenu?
Punkt menu z klasą has-submenu zawiera rozwijane menu. Używając submenu-toggle (przycisk z ikoną strzałki), możesz je rozwinąć lub zwinąć.
Co oznaczają klasy pomocnicze d-none i d-lg-inline?
Te klasy kontrolują widoczność poszczególnych elementów w zależności od rozmiaru ekranu – idealne do responsywnych nawigacji.
Jak zbudowane jest menu rozwijane?
Menu rozwijane składa się z bx-navbar-dropdown (kontener), w nim bx-menu (lista) z bx-dropdown-item i bx-dropdown-link dla poszczególnych podpunktów.
Jak działa Mobile-Bar?
bx-mobile-bar otwiera się na urządzeniach mobilnych po prawej stronie jako menu Off-Canvas. Wypełnia się zawartością z #bxNavPoints za pomocą JS. Dodatkowe bloki możesz dodać za pomocą bx-MobilHTML1 oraz bx-MobilHTML2.
Czym jest Side-Bar?
bx-side-bar to boczne menu Off-Canvas (zwykle po lewej stronie). Możesz umieścić tutaj własne treści lub elementy nawigacyjne, uzupełnione o bx-SideHTML1 oraz bx-SideHTML2.
Jak jest wyświetlany licznik koszyka?
Wrapper WKGBAnzDiv zawiera WKGBAnzDivInner, który za pomocą JS (przez #WKGBAnz) wyświetla aktualną liczbę artykułów – najczęściej jako znacznik w ikonce koszyka.
Jak mogę wyświetlać pojedyncze przyciski tylko w wybranych obszarach?
Połącz .bx-nav-item z . W ten sposób możesz celowo włączać lub wyłączać przyciski w #bxNavPoints (desktop), .bx-mobile-bar lub .bx-side-bar, bez konieczności zmiany kodu HTML.