CSS triedy navigácie v bluetronix CMS – prehľady a aplikácia
V tomto prehľade nájdeš všetky dôležité CSS triedy navigácie v bluetronix CMS. Nauč sa, ako s pár úpravami prispôsobiť dizajn, responzívnosť a správanie tvojej štruktúry menu.
Navigačné CSS triedy Popis
Tu nájdeš kompaktný prehľad, ktorá CSS trieda v tvojom HTML úryvku je na čo určená. Tak si môžeš rýchlo prispôsobiť rozloženie a správanie.
Dôležité: je zástupca z navigačnej tabuľky (napr. 00_Menue) a pri renderovaní sa nahradí vlastnými triedami (napr. pre viditeľnosť, zvýraznenie, ikony pre každú položku menu).
Prehľad tried
| Trieda | Používa sa v | Účel / význam | Typická interakcia |
|---|---|---|---|
bx-DesktopHTML1 |
div nad navigačným panelom | Horný panel nad hlavným menom (napr. upozornenia, promo, banner aplikácie). | Viditeľnosť riadená pomocou DB-zástupcu (none). |
bx-DesktopHTML2 |
div pod navigačným panelom | Dolný panel pod hlavným menom (dodatočné informácie/odznaky). | Viditeľnosť cez none. |
bx-nav-outer |
Wrapper okolo nav.bx-nav |
Vonkajší kontajner pre polohovanie (napr. Sticky, tieň, šírka). | Rozloženie rámca pre plnú šírku stránky. |
bx-nav |
nav Hlavná navigácia | Základný navigačný panel (Mriežka/Flex, pozadie, výška). | Globálne štýly navigačného panela a responzívnosť. |
bx-navbar-left |
Ľavý stĺpec navigačného panela | Oblasť pre ikonu menu (burger) a logo. | Obsahuje .bx-nav-icon a .bx-nav-brand. |
bx-navbar-center |
Stred navigačného panela | Kontajner pre položky menu (UL/LI) vrátane podmenu. | Vyplňuje mobilnú/súbežnú lištu pomocou JS (zdroj: #bxNavPoints). |
bx-navbar-right |
Pravý stĺpec navigácie | Skupina ikon (Hľadanie, Svetlý/Tmavý, Prihlásenie, Jazyk, Nákupný košík, Bočná lišta). | Tlačidlá spúšťajú JS funkcie (napr. BlueSearchBar()). |
bx-nav-icon |
button / Ikonové tlačidlá | Jednotný štýl pre všetky ikony navigácie. | Ciele kliknutí pre prepinace (Mobilná lišta, Bočná lišta, Hľadanie, atď.). |
bx-nav-brand |
img Logo | Zobrazenie loga (veľkosť, vzdialenosti). | Často s odkazom na /index.html. |
bx-nav-item |
li v hlavnom menu | Položka zoznamu menu. | Môže byť kombinovaná s .has-submenu. |
bx-nav-link |
a v menu | Štýl odkazu v menu (písmo, hover, aktívne stavy). | Získava cieľ/názov cez DB zástupcov. |
has-submenu |
li s rozbaľovacím menu | Ozvrhnutý položka menu s podmenu; aktivuje štýly rozbaľovania. | Otvorí/Zatvorí súvisiace .bx-navbar-dropdown. |
submenu-toggle |
tlačidlo vedľa odkazu | Ovládací prvok na zobrazenie/skrytie submení (ikona Chevron). | Zvyčajne viditeľné len na väčších obrazovkách (pozri Utility triedy). |
d-none, d-lg-inline |
Utility triedy na tlačidle | Ovládanie viditeľnosti (napr. skryť → zobraziť inline od lg). | Responzívne správanie prepínača. |
bx-menu |
ul v rozbaľovacej ponuke | Zoznam položiek submenü. | Napĺňa sa navigáciou z databázy. |
bx-navbar-dropdown |
ul (kontajner rozbaľovacej ponuky) | Panel rozbaľovacej ponuky (umiestnenie, tiene, animácia). | Otvára sa po prechode myškou/kliknutí alebo .submenu-toggle. |
bx-dropdown-item |
li v rozbaľovacej ponuke | Jednotlivá položka submenü. | Obsahuje .bx-dropdown-link. |
bx-dropdown-link |
a v rozbaľovacej ponuke | Štýl odkazu v rozbaľovacej ponuke. | Stavy hover/focus pre lepšiu použiteľnosť. |
bx-mobile-bar |
Mobilné menu (off-canvas vpravo) | Kontajner pre mobilnú navigáciu a voliteľné bloky hore/dole. | Bude naplnené pomocou JS (zdroj: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
Bloky v mobilnej lište | Voliteľné HTML oblasti nad/pod mobilným menu (napr. logo). | Viditeľnosť cez |
bx-side-bar |
Bočná navigácia (Off-Canvas vľavo) | Kontajner pre alternatívnu/doplňkovú navigáciu. | Môže obsahovať menu alebo vlastný obsah. |
bx-SideHTML1, bx-SideHTML2 |
Bloky v bočnej lište | Voliteľné HTML oblasti nad/pod bočným menu (napr. veľké logo). | Viditeľnosť cez |
WKGBAnzDiv |
Wrapper na odznak v ikone nákupného košíka | Oblasť počítadla (rozloženie/pozícia). | Zahŕňa .WKGBAnzDivInner (počet). |
WKGBAnzDivInner |
Vnútro odznaku | Zobrazuje aktuálny počet v nákupnom košíku. | Bude naplnené pomocou JS cez #WKGBAnz. |
Placeholderové triedy z DB
| Placeholder | Popis | Príklad |
|---|---|---|
|
Každý menu bod je nahradený jednou alebo viacerými vlastnými triedami (napr. only-desktop, highlight, icon-contact). | Riadi viditeľnosť/styl pre tlačidlo v desktopovej, mobilnej alebo bočnej lište. |
Kombinuj .bx-nav-item s triedami riadenými DB cez , aby si mohol cielené tlačidlá v #bxNavPoints (desktop), .bx-mobile-bar alebo .bx-side-bar zobraziť alebo skryť bez úpravy HTML kódu.
Často kladené otázky
čo sa nás zákazníci často pýtajú
Tu sa dozvieš, ktoré CSS triedy sú v tvojom HTML navigačnom paneli zodpovedné za rozloženie, správanie a viditeľnosť. Tak môžeš cielene upraviť navigáciu.
Čo znamená zástupný symbol ?
Tento zástupný symbol sa automaticky nahrádza vlastnými CSS triedami, ktoré určíš v navigačnej tabuľke (napr. 00_Menue). Tým riadiš viditeľnosť, zvýraznenie a ikony pre jednotlivé menu položky.
Ako môžem vložiť obsah nad alebo pod navigačný panel?
Na to použij triedy bx-DesktopHTML1 (hore) a bx-DesktopHTML2 (dole). Môžeš ich v CMS zobraziť alebo skryť cez CMS ⯈ Webová stránka ⯈ Hlavička.
Akú funkciu má trieda bx-nav-outer?
Je vonkajším kontajnerom navigácie. Tým riadiš šírku, tieň alebo lepkavé správanie navigačného panelu.
Na čo sa vzťahuje bx-nav?
Táto trieda definuje hlavnú navigáciu – teda rozloženie (napr. Flex/Grid), farbu pozadia a výšku navigačného panelu.
Ako je navigačný panel rozdelený na stĺpce?
Navigačný panel sa skladá z troch oblastí: bx-navbar-left (logo a menu ikona), bx-navbar-center (menu položky), bx-navbar-right (ikony ako vyhľadávanie, prihlásenie, jazyk, nákupný košík).
Čo robí trieda bx-nav-icon?
Zabezpečuje jednotné štýlovanie všetkých ikon v navigačnom paneli. Tieto tlačidlá napríklad riadia otváranie mobilnej lišty, bočnej lišty alebo vyhľadávania.
Ako môžem navrhnúť menu odkazy?
S bx-nav-item definuješ zoznamové položky, s bx-nav-link štýlové pravidlá pre písmo, hover a aktívne stavy odkazov.
Ako funguje ovládanie submení?
Položka menu s triedou has-submenu obsahuje rozbaľovací zoznam. S submenu-toggle (tlačidlo s ikonou šípky) môžeš tento zoznam rozbaliť alebo zrolovať.
Čo znamenajú utility triedy d-none a d-lg-inline?
Tieto triedy riadia viditeľnosť jednotlivých prvkov v závislosti od veľkosti obrazovky – ideálne pre responsívne navigácie.
Ako je postavené rozbaľovacie menu?
Rozbaľovacie menu sa skladá z bx-navbar-dropdown (kontajner), v ktorom je bx-menu (zoznam) s bx-dropdown-item a bx-dropdown-link pre jednotlivé podmenu.
Ako funguje mobilný panel?
bx-mobile-bar sa na mobilných zariadeniach otvorí napravo ako Off-Canvas menu. Naplní sa pomocou JS obsahom z #bxNavPoints. Ďalšie bloky môžeš doplniť pomocou bx-MobilHTML1 a bx-MobilHTML2.
Čo je bočný panel?
bx-side-bar je bočné Off-Canvas menu (väčšinou naľavo). Tu môžeš umiestniť vlastný obsah alebo navigačné prvky, doplnené o bx-SideHTML1 a bx-SideHTML2.
Ako sa zobrazuje počet položiek v nákupnom košíku?
Wrapper WKGBAnzDiv obsahuje WKGBAnzDivInner, ktorý pomocou JS (cez #WKGBAnz) zobrazuje aktuálny počet položiek – zvyčajne ako badge v ikone nákupného košíka.
Ako môžem zobraziť jednotlivé tlačidlá iba v určitých oblastiach?
Kombinuj .bx-nav-item s . Tak môžeš cielené zapínať alebo vypínať tlačidlá v #bxNavPoints (desktop), .bx-mobile-bar alebo .bx-side-bar bez toho, aby si musel meniť HTML kód.