Classi CSS di navigazione nel bluetronix CMS – panoramica e applicazione
In questa panoramica trovi tutte le importanti classi CSS della navigazione nel bluetronix CMS. Scopri come puoi personalizzare il design, la reattività e il comportamento della tua struttura di menu con poche modifiche.
Classi CSS di navigazione Descrizione
Qui trovi una panoramica compatta di quale classe CSS è destinata a cosa nel tuo snippet HTML. In questo modo puoi adattare rapidamente layout e comportamento.
Importante: è un segnaposto della tabella di navigazione (ad esempio 00_Menue) e viene sostituito da classi proprie al momento del rendering (ad esempio per visibilità, evidenziazione, icone per ogni voce di menu).
Panoramica delle classi
| Classe | Utilizzato in | Scopo / significato | Interazione tipica |
|---|---|---|---|
bx-DesktopHTML1 |
div sopra la Navbar | Barra superiore sopra il menu principale (ad esempio, avvisi, promozioni, banner app). | Visibilità controllabile tramite segnaposto DB (none). |
bx-DesktopHTML2 |
div sotto la Navbar | Barra inferiore sotto il menu principale (informazioni aggiuntive/badge). | Visibilità tramite none. |
bx-nav-outer |
Wrapper per nav.bx-nav |
Contenitore esterno per la posizione (ad esempio, appiccicoso, ombra, larghezza). | Cornice di layout per larghezza intera. |
bx-nav |
nav navigazione principale | Navbar di base (Grid/Flex, sfondo, altezza). | Stili della Navbar globale e reattività. |
bx-navbar-left |
Colonna sinistra della Navbar | Area per l'icona del menu (burger) e il logo. | Contiene .bx-nav-icon e .bx-nav-brand. |
bx-navbar-center |
Centro della Navbar | Contenitore per le voci di menu (UL/LI) incluse le sottomenu. | Compila Mobile/Sidebar tramite JS (Fonte: #bxNavPoints). |
bx-navbar-right |
Colonna destra della Navbar | Gruppo icone (Cerca, Chiaro/Scuro, Accesso, Lingua, Carrello, Sidebar). | I bottoni attivano funzioni JS (ad esempio, BlueSearchBar()). |
bx-nav-icon |
button / Bottoni icona | Stile uniforme per tutte le icone della Navbar. | Obiettivi di clic per i toggle (Mobile-Bar, Side-Bar, Cerca, ecc.). |
bx-nav-brand |
img Logo | Rappresentazione del logo (dimensione, spazi). | Spesso con link a /index.html. |
bx-nav-item |
li nel menu principale | Elemento della lista di un punto menu. | Può essere combinato con .has-submenu. |
bx-nav-link |
a nel menu | Stile del link di menu (carattere, hover, stati attivi). | Riceve obiettivo/nome tramite segnaposto DB. |
has-submenu |
li con dropdown | Segna punto menu con sottomenù; attiva stili dropdown. | Apre/Chiude il .bx-navbar-dropdown associato. |
submenu-toggle |
pulsante accanto al link | Controllo per espandere/collassare il sottomenu (icona Chevron). | Di solito visibile solo su schermi più grandi (vedi classi di utilità). |
d-none, d-lg-inline |
Classi di utilità sul pulsante | Controllo della visibilità (ad es. nascondere → mostrare inline da lg). | Comportamento responsive del toggle. |
bx-menu |
ul nel dropdown | Elenco delle voci del sottomenu. | Viene riempito tramite la navigazione dal DB. |
bx-navbar-dropdown |
ul (contenitore dropdown) | Pannello dropdown (posizionamento, ombra, animazione). | Apre al passaggio del mouse/clic o .submenu-toggle. |
bx-dropdown-item |
li nel dropdown | Voce singola del sottomenu. | Contiene .bx-dropdown-link. |
bx-dropdown-link |
a nel dropdown | Stile del link all'interno del dropdown. | Stati di hover/focus per una migliore usabilità. |
bx-mobile-bar |
Menu mobile (Off-Canvas a destra) | Container per navigazione mobile e blocchi opzionali sopra/sotto. | Viene riempito tramite JS (Fonte: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
Blocchi nella Mobile-Bar | Aree HTML opzionali sopra/sotto il menu mobile (ad esempio, logo). | Visibilità tramite |
bx-side-bar |
Navigazione laterale (Off-Canvas a sinistra) | Container per navigazione alternativa/aggiuntiva. | Può contenere il menu o contenuti propri. |
bx-SideHTML1, bx-SideHTML2 |
Blocchi nella Side-Bar | Aree HTML opzionali sopra/sotto il menu laterale (ad esempio, grande logo). | Visibilità tramite |
WKGBAnzDiv |
Wrapper del badge nell'icona del carrello | Area del contatore avvolgente (Layout/Posizione). | Include .WKGBAnzDivInner (numero). |
WKGBAnzDivInner |
Interno del badge | Mostra la quantità attuale del carrello. | Viene riempito tramite JS tramite #WKGBAnz. |
Classi segnaposto dal DB
| Segnaposto | Descrizione | Esempio |
|---|---|---|
|
Ogni voce di menu viene sostituita da una o più classi personalizzate (ad es. only-desktop, highlight, icon-contact). | Controlla la visibilità/stile per ogni pulsante in desktop, mobile o barra laterale. |
Combina .bx-nav-item con classi gestite da DB tramite per mostrare/nascondere singoli pulsanti in #bxNavPoints (Desktop), .bx-mobile-bar o .bx-side-bar, senza modificare il codice HTML.
FAQ
cosa ci chiedono spesso i clienti
Qui scoprirai quali classi CSS sono responsabili per layout, comportamento e visibilità nel tuo HTML della Navbar. Così puoi effettuare modifiche mirate alla navigazione.
Cosa significa il segnaposto ?
Questo segnaposto viene automaticamente sostituito da classi CSS personalizzate che definisci nella tabella di navigazione (ad es. 00_Menue). In questo modo controlli visibilità, evidenziazione e icone per singole voci di menu.
Come posso inserire contenuti sopra o sotto la Navbar?
Utilizza le classi bx-DesktopHTML1 (in alto) e bx-DesktopHTML2 (in basso). Puoi mostrarle o nasconderle nel CMS tramite CMS ⯈ Sito Web ⯈ Intestazione.
Qual è la funzione della classe bx-nav-outer?
È il contenitore esterno della navigazione. Qui controlli larghezza, ombra o comportamento sticky della Navbar.
Cosa rappresenta bx-nav?
Questa classe definisce la navigazione principale stessa – quindi il layout (ad es. Flex/Grid), colore di sfondo e altezza della Navbar.
Come è suddivisa la Navbar in colonne?
La Navbar è composta da tre aree: bx-navbar-left (Logo & icona del menu), bx-navbar-center (voci di menu), bx-navbar-right (icone come cerca, accesso, lingua, carrello).
Cosa fa la classe bx-nav-icon?
Si occupa di uno stile uniforme per tutte le icone della Navbar. Questi pulsanti controllano, ad esempio, l'apertura di Mobile-Bar, Side-Bar o la ricerca.
Come posso progettare i link del menu?
Con bx-nav-item definisci gli elementi della lista, con bx-nav-link le regole di stile per scrittura, hover e stati attivi dei link.
Come funziona il controllo dei sottomenù?
Un elemento di menu con la classe has-submenu contiene un dropdown. Con submenu-toggle (pulsante con icona a freccia) puoi aprirlo o chiuderlo.
Cosa significano le classi utility d-none e d-lg-inline?
Queste classi controllano la visibilità di singoli elementi in base alla dimensione dello schermo – ideali per navigazioni responsive.
Come è strutturato un menu a discesa?
Un dropdown è composto da bx-navbar-dropdown (contenitore), all'interno bx-menu (lista) con bx-dropdown-item e bx-dropdown-link per i singoli sottopunti.
Come funziona la Mobile-Bar?
La bx-mobile-bar si apre sui dispositivi mobili a destra come menu off-canvas. Viene riempita tramite JS con i contenuti di #bxNavPoints. Puoi aggiungere ulteriori blocchi con bx-MobilHTML1 e bx-MobilHTML2.
Che cos'è la Side-Bar?
La bx-side-bar è un menu off-canvas laterale (di solito a sinistra). Qui puoi posizionare contenuti personalizzati o elementi di navigazione, integrati con bx-SideHTML1 e bx-SideHTML2.
Come viene visualizzato il conteggio del carrello?
Il wrapper WKGBAnzDiv contiene WKGBAnzDivInner, che tramite JS (attraverso #WKGBAnz) mostra il numero attuale degli articoli – di solito come un badge sull'icona del carrello.
Come posso mostrare singoli pulsanti solo in determinate aree?
Combina .bx-nav-item con . In questo modo puoi visualizzare o nascondere i pulsanti in modo mirato in #bxNavPoints (desktop), .bx-mobile-bar o .bx-side-bar, senza modificare il codice HTML.