Navigációs CSS-osztályok a bluetronix CMS-ben – áttekintés és alkalmazás
Ebben az áttekintésben megtalálod a bluetronix CMS navigációjához szükséges összes fontos CSS-osztályt. Tanuld meg, hogyan alakíthatod a dizájnt, a reszponzivitást és a menüstruktúra viselkedését minimális módosításokkal.
Navigáció CSS-osztályok Leírás
Itt egy tömör áttekintést találsz arról, hogy mely CSS-osztály mire szolgál a HTML-sablonodban. Így gyorsan módosíthatod a megjelenítést és a viselkedést.
Fontos: egy helyőrző a navigációs táblázatból (pl. 00_Menue), és a renderelés során saját osztályokra cserélődik (pl. láthatóság, kiemelés, ikonok menüpontonként).
Osztályok áttekintése
| Osztály | Használva itt | Cél / Jelentés | Tipikus interakció |
|---|---|---|---|
bx-DesktopHTML1 |
div a Navbar felett | Felső sáv a főmenü felett (pl. értesítések, promóciók, alkalmazásbanner). | Láthatóság DB-helyettesítők (none) révén szabályozható. |
bx-DesktopHTML2 |
div a Navbar alatt | Alsó sáv a főmenü alatt (további információk/jelvények). | Láthatóság a none alapján. |
bx-nav-outer |
Wrapper a nav.bx-nav körül |
Külső konténer a pozicionáláshoz (pl. Sticky, árnyék, szélesség). | Elrendezési keret az oldalszélességhez. |
bx-nav |
nav fő navigáció | Alap Navbar (Grid/Flex, háttér, magasság). | Globális Navbar-stílusok és reszponzivitás. |
bx-navbar-left |
Navbar bal oszlop | Tér a menüikon (hamburger) és a logó számára. | Tartalmazza a .bx-nav-icon és a .bx-nav-brand elemeket. |
bx-navbar-center |
Navbar középső rész | Konténer a menüelemek számára (UL/LI), beleértve az alkalamennüket. | Tölti ki a mobil/sávot JS-en keresztül (forrás: #bxNavPoints). |
bx-navbar-right |
Navbar jobb oszlopa | Ikoncsoport (Keresés, Világos/Sötét, Bejelentkezés, Nyelv, Kosár, Oldalsáv). | A gombok JS-funkciókat indítanak (pl. BlueSearchBar()). |
bx-nav-icon |
gomb / Ikongombok | Egységes stílus minden navbar ikon számára. | Kattintható célpontok Toggles-hez (Mobil sáv, Oldalsáv, Keresés, stb.). |
bx-nav-brand |
img Logo | Logo megjelenítés (méret, távolságok). | Gyakran linkel /index.html. |
bx-nav-item |
li a főmenüben | A menüpont listaeleme. | Össze lehet kombinálni a .has-submenu-val. |
bx-nav-link |
a a menüben | A menülink stílusa (betűtípus, lebegés, aktív állapotok). | Célot/nevet kap DB-helyettesítőn keresztül. |
has-submenu |
li legördülővel | Az almenüvel rendelkező menüpontot jelöli; aktiválja a legördülő stílusokat. | Megnyitja/zárja a vonatkozó .bx-navbar-dropdown-ot. |
submenu-toggle |
gomb a hivatkozás mellett | Elem a legördülő menü ki-/bekapcsolásához (Chevron ikon). | Legtöbbször csak nagyobb képernyőkön látható (lásd: utility osztályok). |
d-none, d-lg-inline |
Utility osztályok a gombon | Láthatóság szabályozás (pl. eltüntetés → lg inline megjelenítés). | A toggle reszponzív viselkedése. |
bx-menu |
ul a legördülő menüben | A legördülő menü bejegyzéseinek listája. | A navigáció a DB-ből töltődik be. |
bx-navbar-dropdown |
ul (legördülő konténer) | Legördülő panel (pozicionálás, árnyék, animáció). | Hover/katklintás révén nyílik meg vagy .submenu-toggle. |
bx-dropdown-item |
li a legördülő menüben | Egyedi legördülő menübejegyzés. | Tartalmazza a .bx-dropdown-linkt. |
bx-dropdown-link |
a a legördülő menüben | Hivatkozás stílus a legördülő menüben. | Hover-/Focus állapotok a jobb használhatóság érdekében. |
bx-mobile-bar |
Mobil menü (Off-Canvas jobbra) | Konténer a mobil navigációhoz és az opcionális blokkokhoz fent/alul. | JS-en keresztül töltődik be (forrás: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
Blokkok a mobil sávban | Opcionális HTML-területek a mobil menü felett/alatt (pl. logó). | Láthatóság |
bx-side-bar |
Oldalsó navigáció (Off-Canvas balra) | Konténer alternatív/további navigációhoz. | Felveheti a menüt vagy saját tartalmakat. |
bx-SideHTML1, bx-SideHTML2 |
Blokkok az oldalsó sávban | Opcionális HTML-területek az oldalsó menü felett/alatt (pl. nagy logó). | Láthatóság |
WKGBAnzDiv |
Jelvény kerete a bevásárlókosár ikonban | Zárójelezett számláló terület (elrendezés/hely). | Tartalmazza a .WKGBAnzDivInner-t (mennyiség). |
WKGBAnzDivInner |
Jelvény belső része | Megjeleníti a jelenlegi bevásárlókosár mennyiségét. | JS-en keresztül töltődik be a #WKGBAnz segítségével. |
Helyettesítő osztályok az adatbázisból
| Helyettesítő | Leírás | Példa |
|---|---|---|
|
Minden menüpont egy vagy több saját osztályra van cserélve (pl. only-desktop, highlight, icon-contact). | Szabályozza a láthatóságot/stílust gombonként asztali, mobil vagy oldalsáv nézetben. |
Kombináld a .bx-nav-item elemet DB-vezérelt osztályokkal a segítségével, hogy a gombokat célzottan láthatóvá tedd a #bxNavPoints-ban (asztali), .bx-mobile-bar-ban vagy .bx-side-bar-ban anélkül, hogy a HTML-kódot módosítanod kellene.
GYIK
Miket kérdeznek tőlünk gyakran az ügyfelek?
Itt megtudhatod, hogy mely CSS-osztályok felelősek a Navbar-HTML-ben a layoutért, viselkedésért és a láthatóságért. Így célzottan módosíthatod a navigációt.
Mit jelent a helyettesítő?
Ez a helyettesítő automatikusan helyettesítve lesz a saját CSS-osztályaiddal, amelyeket a navigációs táblázatban (pl. 00_Menue) határozol meg. Ezáltal szabályozhatod a láthatóságot, kiemeléseket és ikonokat az egyes menüpontokhoz.
Hogyan tudok tartalmat elhelyezni a Navbar fölött vagy alatt?
Ehhez használd a bx-DesktopHTML1 (felül) és bx-DesktopHTML2 (alul) osztályokat. Ezeket a CMS-ben a CMS ⯈ Weboldal ⯈ Fejléc alatt tudod megjeleníteni vagy elrejteni.
Mi a feladata a bx-nav-outer osztálynak?
Ez a navigáció külső tartálya. Ezzel szabályozhatod a Navbar szélességét, árnyékát vagy sticky viselkedését.
Mit jelent a bx-nav?
Ez az osztály definiálja a fő navigációt – tehát a layout-ot (pl. Flex/Grid), háttérszínt és a Navbar magasságát.
Hogyan van felosztva a Navbar oszlopokra?
A Navbar három részből áll: bx-navbar-left (Logó & Menü ikon), bx-navbar-center (Menüpontok), bx-navbar-right (Ikonok, mint keresés, bejelentkezés, nyelv, kosár).
Mit csinál a bx-nav-icon osztály?
Ez egységes stílust biztosít az összes Navbar ikonhoz. Ezek a gombok például a Mobile-Bar, Side-Bar megnyitását vagy a keresést vezérlik.
Hogyan alakíthatom a menülinkeket?
A bx-nav-item segítségével definiálod a listákat, a bx-nav-link pedig a linkek írásbeli, hover és aktív állapotainak stílusát.
Hogyan működik a legördülő menük vezérlése?
Egy menüpont, amelynek osztálya has-submenu, tartalmaz egy legördülő menüt. A submenu-toggle (nyíl ikonnal ellátott gomb) segítségével ezt ki- vagy becsukhatod.
Mit jelentenek az utility osztályok d-none és d-lg-inline?
Ezek az osztályok az egyes elemek láthatóságát szabályozzák a képernyőméret függvényében – ideálisak a reszponzív navigációkhoz.
Hogyan van felépítve egy legördülő menü?
Egy legördülő menü bx-navbar-dropdown (tartály) alkotja, benne bx-menu (lista) bx-dropdown-item és bx-dropdown-link a különböző alsó pontokhoz.
Hogyan működik a Mobil-Bar?
A bx-mobile-bar mobil eszközökön jobbra nyílik, mint Off-Canvas menü. JS-en keresztül a #bxNavPoints tartalmával töltődik fel. További blokkokat adhatsz hozzá a bx-MobilHTML1 és a bx-MobilHTML2 segítségével.
Mi az a Side-Bar?
A bx-side-bar egy oldalsó Off-Canvas menü (leggyakrabban balra). Itt saját tartalmakat vagy navigációs elemeket helyezhetsz el, kiegészítve a bx-SideHTML1 és bx-SideHTML2 elemekkel.
Hogyan jelenik meg a kosár számláló?
A WKGBAnzDiv tartalmazza a WKGBAnzDivInner-t, amely JS (a #WKGBAnz-on keresztül) segítségével mutatja a aktuális cikkek számát – leggyakrabban jelvényként a kosár ikonjában.
Hogyan tudok egyes gombokat csak bizonyos területeken megjeleníteni?
Kombináld a .bx-nav-item-et a -val. Így célzottan tudsz gombokat a #bxNavPoints-ban (asztali), .bx-mobile-bar-ban vagy .bx-side-bar-ban megjeleníteni vagy eltüntetni HTML-kód módosítása nélkül.