Navigations CSS-klasser i bluetronix CMS – översikt & tillämpning
I denna översikt hittar du alla viktiga CSS-klasser för navigeringen i bluetronix CMS. Lär dig hur du med få justeringar kan anpassa design, responsivitet och beteende för din menystruktur individuellt.
Navigering CSS-klasser Beskrivning
Här hittar du en kompakt översikt över vilken CSS-klass som är avsedd för vad i ditt HTML-snitt. Så kan du snabbt anpassa layout och beteende.
Viktigt: är en platshållare från navigationstabellen (t.ex. 00_Menue) och ersätts vid rendering med egna klasser (t.ex. för synlighet, markering, ikoner per menypunkt).
Klassöversikt
| Klass | Används i | Syfte / betydelse | Typisk interaktion |
|---|---|---|---|
bx-DesktopHTML1 |
div ovanför navigeringsfältet | Toppfält över huvudmenyn (t.ex. meddelanden, kampanjer, app-banner). | Synlighet styrs via DB-platsinnehåll (none). |
bx-DesktopHTML2 |
div nedanför navigeringsfältet | Bottenfält under huvudmenyn (ytterligare informationer/märken). | Synlighet via none. |
bx-nav-outer |
Wrapper runt nav.bx-nav |
Yttre behållare för positionering (t.ex. sticky, skugga, bredd). | Layoutram för fullständig sidbredd. |
bx-nav |
nav Huvudnavigation | Basis-navigeringsfält (Grid/Flex, bakgrund, höjd). | Globala navigeringsfält-stilar och responsivitet. |
bx-navbar-left |
Navigeringsfält Vänster kolumn | Område för menyikon (burgare) och logotyp. | Innehåller .bx-nav-icon och .bx-nav-brand. |
bx-navbar-center |
Navigeringsfält Mitten | Behållare för menyobjekt (UL/LI) inklusive under-menyer. | Fyller Mobile/Sidebar via JS (Källa: #bxNavPoints). |
bx-navbar-right |
Navbar-höger kolumn | Ikongrupp (Sök, Ljus/Mörk, Inloggning, Språk, Varukorg, Sidebar). | Knappar utlöser JS-funktioner (t.ex. BlueSearchBar()). |
bx-nav-icon |
knapp / Ikonknappar | Enhetlig stil för alla navbar-ikoner. | Klickmål för växlare (Mobilbar, Sidobar, Sök, osv.). |
bx-nav-brand |
img Logotyp | Logotypens visning (storlek, marginaler). | Ofta med länk till /index.html. |
bx-nav-item |
li i huvudmenyn | Listobjekt av en menypunkt. | Kan kombineras med .has-submenu. |
bx-nav-link |
a i menyn | Stil för meny-länken (typsnitt, hover, aktiva tillstånd). | Får mål/namn via DB-platsinnehåll. |
has-submenu |
li med dropdown | Markerar menypunkt med undermeny; aktiverar dropdown-stilar. | Öppnar/stänger tillhörande .bx-navbar-dropdown. |
submenu-toggle |
knapp bredvid länk | Element för att fälla ut/ihop undermenyn (Chevron-ikon). | Syns oftast endast på större skärmar (se utility-klasser). |
d-none, d-lg-inline |
Utility-klasser på knappen | Synlighetskontroll (t.ex. dölja → visa inline från lg). | Responsivt beteende av toggle. |
bx-menu |
ul i dropdown | Lista över undermenyelement. | Fylls med navigering från databasen. |
bx-navbar-dropdown |
ul (Dropdown-container) | Dropdown-panel (positionering, skugga, animation). | Öppnas vid hover/klick eller .submenu-toggle. |
bx-dropdown-item |
li i dropdown | Enskilt undermenyeelement. | Innehåller .bx-dropdown-link. |
bx-dropdown-link |
a i dropdown | Länkstil inom dropdown. | Hover-/Focus-tillstånd för bättre användbarhet. |
bx-mobile-bar |
Mobilt meny (Off-Canvas till höger) | Behållare för mobil navigering och valfria block ovan/nedan. | Fylls i med JS (källa: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
Block i mobilmenyn | Valfria HTML-områden ovan/för nedanför mobilmenyn (t.ex. logotyp). | Synlighet via |
bx-side-bar |
Sidonavigering (Off-Canvas vänster) | Behållare för alternativ/tilläggsnavigering. | Kan rymma menyn eller eget innehåll. |
bx-SideHTML1, bx-SideHTML2 |
Block i sidomenyn | Valfria HTML-områden ovan/för nedanför sidomenyn (t.ex. stor logotyp). | Synlighet via |
WKGBAnzDiv |
Badgewrap i varukorgsikonen | Omfattande räknarområde (layout/position). | Innehåller .WKGBAnzDivInner (antal). |
WKGBAnzDivInner |
Badgeinre | Visar det aktuella varukorgsantalet. | Fylls i med JS via #WKGBAnz. |
Platzhalter-klasser från databasen
| Platzhalter | Beskrivning | Exempel |
|---|---|---|
|
Varje menypunkt ersätts av en eller flera egna klasser (t.ex. only-desktop, highlight, icon-contact). | Styr synlighet/stil per knapp i desktop-, mobil- eller sidofält. |
Kombinera .bx-nav-item med DB-styrda klasser via för att specifikt dölja eller visa enskilda knappar i #bxNavPoints (desktop), .bx-mobile-bar eller .bx-side-bar, utan att anpassa HTML-koden.
FAQ
vad kunder ofta frågar oss
Här lär du dig vilka CSS-klasser som ansvarar för layout, beteende och synlighet i din Navbar-HTML. Så du kan göra riktade justeringar av navigeringen.
Vad betyder platshållaren ?
Denna platshållare ersätts automatiskt av egna CSS-klasser som du ställer in i navigeringstabellen (t.ex. 00_Menue). Så styr du synlighet, markering och ikoner för enskilda menyobjekt.
Hur kan jag infoga innehåll ovanför eller nedanför Navbar?
Använd klasserna bx-DesktopHTML1 (ovan) och bx-DesktopHTML2 (nedan). Du kan dölja eller visa dem i CMS under CMS ⯈ Webbplats ⯈ Huvudrubrik.
Vilken funktion har klassen bx-nav-outer?
Den är den yttre containern för navigeringen. Med den styr du bredd, skugga eller klibbighet för Navbar.
Vad står bx-nav för?
Denna klass definierar huvudnavigationen – alltså layout (t.ex. Flex/Grid), bakgrundsfärg och höjd på Navbar.
Hur är Navbar uppdelad i kolumner?
Navbar består av tre områden: bx-navbar-left (Logotyp & menyikon), bx-navbar-center (menyval), bx-navbar-right (ikoner som sök, inloggning, språk, varukorg).
Vad gör klassen bx-nav-icon?
Den säkerställer en enhetlig stil för alla Navbar-ikoner. Dessa knappar styr t.ex. öppningen av Mobile-Bar, Side-Bar eller sökfunktionen.
Hur kan jag utforma meny länkar?
Med bx-nav-item definierar du listobjekten, med bx-nav-link stilreglerna för typsnitt, hover och aktiva tillstånd för länkarna.
Hur fungerar styrningen av undermenyer?
En menypunkt med klassen has-submenu innehåller en dropdown. Med submenu-toggle (knapp med pilikon) kan du fälla ut eller in den.
Vad betyder utility-klasserna d-none och d-lg-inline?
Dessa klasser styr synligheten för enskilda element beroende på skärmstorlek – perfekt för responsiv navigering.
Hur är en dropdown-meny uppbyggd?
En dropdown består av bx-navbar-dropdown (container), där bx-menu (lista) med bx-dropdown-item och bx-dropdown-link för de enskilda underpunkterna.
Hur fungerar Mobile-Bar?
bx-mobile-bar öppnas på mobila enheter till höger som en Off-Canvas-meny. Den fylls med innehåll från #bxNavPoints via JS. Ytterligare block kan du lägga till med bx-MobilHTML1 och bx-MobilHTML2.
Vad är Side-Bar?
bx-side-bar är en sidomeny för Off-Canvas (vanligtvis till vänster). Här kan du placera eget innehåll eller navigationsobjekt, kompletterat med bx-SideHTML1 och bx-SideHTML2.
Hur visas varukorgens räkning?
Wrappern WKGBAnzDiv innehåller WKGBAnzDivInner, som via JS (genom #WKGBAnz) visar det aktuella antalet artiklar – oftast som en badge i varukorgsikonen.
Hur kan jag visa enskilda knappar endast i vissa områden?
Kombinera .bx-nav-item med . Så kan du strategiskt visa eller dölja knappar i #bxNavPoints (desktop), .bx-mobile-bar eller .bx-side-bar utan att behöva ändra HTML-koden.