CSS třídy pro navigaci v bluetronix CMS – přehled a použití
V tomto přehledu najdeš všechny důležité CSS třídy navigace v bluetronix CMS. Nauč se, jak můžeš pomocí několika úprav upravit design, responzivitu a chování své struktury menu.
Navigace CSS třídy Popis
Zde najdeš kompaktní přehled, která CSS třída je v tvém HTML úryvku na co určena. Tak můžeš rychle přizpůsobit rozložení a chování.
Důležité: je zástupný znak z tabulky navigace (např. 00_Menue) a při renderování je nahrazen vlastními třídami (např. pro viditelnost, zvýraznění, ikony pro jednotlivé položky menu).
Přehled tříd
| Třída | Používá se v | Účel / význam | Typická interakce |
|---|---|---|---|
bx-DesktopHTML1 |
div nad navigační lištou | Horní lišta nad hlavním menu (např. upozornění, promo, banner aplikace). | Viditelnost řízena přes DB zástupce (none). |
bx-DesktopHTML2 |
div pod navigační lištou | Spodní lišta pod hlavním menu (další informace/odznaky). | Viditelnost přes none. |
bx-nav-outer |
Wrapper kolem nav.bx-nav |
Vnější kontejner pro umístění (např. Sticky, stín, šířka). | Rozvržení rámce pro plnou šířku stránky. |
bx-nav |
nav Hlavní navigace | Základní navigační lišta (Grid/Flex, pozadí, výška). | Globální styly navigační lišty a responzivita. |
bx-navbar-left |
Levá sloupec navigační lišty | Oblast pro menu ikonu (hamburger) a logo. | Obsahuje .bx-nav-icon a .bx-nav-brand. |
bx-navbar-center |
Střed navigační lišty | Kontejner pro položky menu (UL/LI) včetně submenu. | Vyplňuje mobile/sidebar pomocí JS (zdroj: #bxNavPoints). |
bx-navbar-right |
Pravý sloupec navigační lišty | Skupina ikon (Hledat, Světlý/Tmavý, Přihlásit se, Jazyk, Nákupní košík, Boční panel). | Tlačítka spouštějí JS funkce (např. BlueSearchBar()). |
bx-nav-icon |
button / Ikonová tlačítka | Jednotný styl pro všechny ikony na navigační liště. | Cíle kliknutí pro přepínače (Mobilní lišta, Boční lišta, Hledat atd.). |
bx-nav-brand |
img Logo | Zobrazení loga (velikost, mezery). | Často s odkazem na /index.html. |
bx-nav-item |
li v hlavním menu | Prvok seznamu pro položku menu. | Může být kombinováno s .has-submenu. |
bx-nav-link |
a v menu | Styl odkazu v menu (písmo, hover, aktivní stavy). | Získává cíl/jméno přes DB placeholder. |
has-submenu |
li s dropdownem | Označuje položku menu s podmenu; aktivuje styly dropdownu. | Otevírá/uzavírá odpovídající .bx-navbar-dropdown. |
submenu-toggle |
tlačítko vedle odkazu | Ovládací prvek pro rozbalení/sbalení podmenu (ikona Chevron). | Obvykle viditelné pouze na větších obrazovkách (viz utility třídy). |
d-none, d-lg-inline |
Utility třídy na tlačítku | Ovládání viditelnosti (např. skrýt → zobrazit inline od lg). | Responsivní chování přepínače. |
bx-menu |
ul v dropdownu | Seznam položek podmenu. | Naplněno navigací z databáze. |
bx-navbar-dropdown |
ul (kontejner dropdownu) | Panel dropdownu (pozicování, stín, animace). | Otevře se při hoveru/kliknutí nebo .submenu-toggle. |
bx-dropdown-item |
li v dropdownu | Jednotlivá položka podmenu. | Obsahuje .bx-dropdown-link. |
bx-dropdown-link |
a v dropdownu | Styl odkazu uvnitř dropdownu. | Stavy hover/focus pro lepší použitelnost. |
bx-mobile-bar |
Mobilní menu (off-canvas vpravo) | Kontejner pro mobilní navigaci a volitelné bloky nahoře/dole. | Bude naplněno pomocí JS (zdroj: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
Bloky v mobilním panelu | Volitelné HTML oblasti nad/pod mobilním menu (např. logo). | Viditelnost přes |
bx-side-bar |
Boční navigace (Off-Canvas vlevo) | Kontejner pro alternativní/přídavnou navigaci. | Může obsahovat menu nebo vlastní obsah. |
bx-SideHTML1, bx-SideHTML2 |
Bloky v bočním panelu | Volitelné HTML oblasti nad/pod bočním menu (např. velké logo). | Viditelnost přes |
WKGBAnzDiv |
Obal pro ikonu košíku | Obklopující oblast počítadla (rozložení/pozice). | Obsahuje .WKGBAnzDivInner (počet). |
WKGBAnzDivInner |
Vnitřek odznaku | Zobrazuje aktuální množství v košíku. | Bude naplněno pomocí JS přes #WKGBAnz. |
Zástupné třídy z databáze
| Zástupný symbol | Popis | Příklad |
|---|---|---|
|
Každý položka menu může být nahrazena jednou nebo více vlastními třídami (např. only-desktop, highlight, icon-contact). | Ovládá viditelnost/style jednotlivých tlačítek v desktopové, mobilní nebo boční liště. |
Kombinujte .bx-nav-item s databázově řízenými třídami přes , abyste mohli cíleně skrývat nebo zobrazovat jednotlivá tlačítka v #bxNavPoints (desktop), .bx-mobile-bar nebo .bx-side-bar, aniž byste museli upravovat HTML kód.
Často kladené otázky
co se nás zákazníci často ptají
Zde se dozvíte, jaké CSS třídy jsou zodpovědné za rozložení, chování a viditelnost ve vašem HTML navbaru. Díky tomu můžete provádět cílené úpravy navigace.
Co znamená zástupný symbol ?
Tento zástupný symbol je automaticky nahrazen vlastními CSS třídami, které určíte v tabulce navigace (např. 00_Menue). Tím řídíte viditelnost, zvýraznění a ikony pro jednotlivé položky menu.
Jak mohu přidat obsah nad nebo pod navbar?
K tomu použijte třídy bx-DesktopHTML1 (nahoře) a bx-DesktopHTML2 (dole). Můžete je v CMS skrýt nebo zobrazit přes CMS ⯈ Webová stránka ⯈ Hlavní záhlaví.
Jaký úkol má třída bx-nav-outer?
Jedná se o vnější kontejner navigace. Tím řídíte šířku, stín nebo chování 'sticky' navbaru.
Na co se vztahuje bx-nav?
Tato třída definuje samotnou hlavní navigaci – tedy rozložení (např. Flex/Grid), barvu pozadí a výšku navbaru.
Jak je navbar rozdělen do sloupců?
Navbar se skládá ze tří oblastí: bx-navbar-left (logo & ikona menu), bx-navbar-center (položky menu), bx-navbar-right (ikony jako hledání, přihlášení, jazyk, nákupní košík).
Co dělá třída bx-nav-icon?
Zajišťuje jednotné styling všech ikon navbaru. Tyto tlačítka například ovládají otevření Mobile-Bar, Side-Bar nebo vyhledávání.
Jak mohu formátovat menu odkazy?
Pomocí bx-nav-item definujete položky seznamu, s bx-nav-link stylingové pravidla pro písmo, hover a aktivní stavy odkazů.
Jak funguje ovládání podmenu?
Položka menu s třídou has-submenu obsahuje dropdown. Pomocí submenu-toggle (tlačítko s ikonou šipky) můžete tento zobrazit nebo skrýt.
Co znamenají utility třídy d-none a d-lg-inline?
Tyto třídy řídí viditelnost jednotlivých prvků podle velikosti obrazovky – ideální pro responsivní navigace.
Jak je strukturováno dropdown menu?
Dropdown se skládá z bx-navbar-dropdown (kontejner), v něm bx-menu (seznam) s bx-dropdown-item a bx-dropdown-link pro jednotlivé podbody.
Jak funguje mobilní lišta?
bx-mobile-bar se na mobilních zařízeních otevírá zprava jako Off-Canvas menu. Naplní se pomocí JS s obsahem z #bxNavPoints. Další bloky můžeš doplnit pomocí bx-MobilHTML1 a bx-MobilHTML2.
Co je to boční lišta?
bx-side-bar je boční Off-Canvas menu (většinou vlevo). Zde můžeš umístit vlastní obsah nebo prvky navigace, doplněné o bx-SideHTML1 a bx-SideHTML2.
Jak je zobrazeno číslo v košíku?
Wrapper WKGBAnzDiv obsahuje WKGBAnzDivInner, který pomocí JS (přes #WKGBAnz) zobrazuje aktuální počet položek – zpravidla jako badge v ikoně košíku.
Jak mohu zobrazit jednotlivé tlačítka pouze v určitých oblastech?
Kombinuj .bx-nav-item s . Tímto způsobem můžeš cíleně zapínat nebo vypínat tlačítka v #bxNavPoints (desktop), .bx-mobile-bar nebo .bx-side-bar, aniž bys musel měnit HTML kód.