Navigasjons CSS-klasser i bluetronix CMS – oversikt og anvendelse
I denne oversikten finner du alle viktige CSS-klasser for navigasjonen i bluetronix CMS. Lær hvordan du med få justeringer kan tilpasse designet, responsiviteten og oppførselen til menystrukturen din.
Navigasjon CSS-klasser Beskrivelse
Her finner du en kompakt oversikt over hvilken CSS-klasse som er ment for hva i HTML-snippet ditt. Slik kan du raskt tilpasse layout og oppførsel.
Viktig: er en plassholder fra navigasjonstabellen (f.eks. 00_Menue) og blir ved rendering erstattet med egne klasser (f.eks. for synlighet, utheving, ikoner per menyvalg).
Klasseoversikt
| Klasse | Brukt i | Formål / Betydning | Typisk interaksjon |
|---|---|---|---|
bx-DesktopHTML1 |
div over navigasjonslinjen | Topplinje over hovedmenyen (f.eks. varsler, kampanje, app-banner). | Synlighet styres via DB-plassholder (none). |
bx-DesktopHTML2 |
div under navigasjonslinjen | Bunnlinje under hovedmenyen (tilleggsinformasjon/merker). | Synlighet via none. |
bx-nav-outer |
Wrapper rundt nav.bx-nav |
Ytre container for posisjonering (f.eks. sticky, skygge, bredde). | Layout-ramme for full sidesbredd. |
bx-nav |
nav hovednavigasjon | Basis-navigasjonslinje (Grid/Flex, bakgrunn, høyde). | Globale navigasjonslinje-stiler og responsivitet. |
bx-navbar-left |
Venstre kolonne av navigasjonslinjen | Område for menyikon (burger) og logo. | Inneholder .bx-nav-icon og .bx-nav-brand. |
bx-navbar-center |
Midten av navigasjonslinjen | Container for menypostene (UL/LI) inkludert undermenyer. | Fyller mobil/sidebar via JS (Kilde: #bxNavPoints). |
bx-navbar-right |
Høyre kolonne i navigasjonslinjen | Ikon-gruppe (Søk, Lys/Mørk, Logg inn, Språk, Handlekurv, Sidefelt). | Knappene utløser JS-funksjoner (f.eks. BlueSearchBar()). |
bx-nav-icon |
knapp / Ikon-knapper | Ensartet stil for alle navigasjonslinje-ikoner. | Klikk-mål for togler (Mobil-bar, Side-bar, Søk, osv.). |
bx-nav-brand |
img Logo | Logo-visning (Størrelse, Avstander). | Ofte med lenke til /index.html. |
bx-nav-item |
li i hovedmenyen | Listeelement av en menypunkt. | Kan kombineres med .has-submenu. |
bx-nav-link |
a i menyen | Stil til meny-lenken (Skrift, Hover, aktive tilstander). | Mottar mål/ navn via DB-plassholder. |
has-submenu |
li med droppmeny | Markerer menypunkt med under-meny; aktiverer droppmeny-stiler. | Åpner/lukker tilknyttede .bx-navbar-dropdown. |
submenu-toggle |
knapp ved siden av linken | Element for å skjule/visse undermenyen (Chevron-ikon). | Synlig bare på større skjermer (se nytteklasser). |
d-none, d-lg-inline |
Nytteklasser på knappen | Siktkontroll (f.eks. skjule → vise inline fra lg). | Responsivt oppførsel til toggle. |
bx-menu |
ul i nedtrekksmenyen | Liste over undermenyelementer. | Fylles opp av navigasjon fra DB. |
bx-navbar-dropdown |
ul (Nedtrekks-container) | Nedtrekkspanel (posisjonering, skygge, animasjon). | Åpnes ved hover/klikk eller .submenu-toggle. |
bx-dropdown-item |
li i nedtrekksmenyen | Enkelt undermenyelement. | Inneholder .bx-dropdown-link. |
bx-dropdown-link |
a i nedtrekksmenyen | Lenkestil innenfor nedtrekksmenyen. | Hover-/fokus-tilstander for bedre brukervennlighet. |
bx-mobile-bar |
Mobilmeny (Off-Canvas til høyre) | Container for mobil navigasjon og valgfrie blokker oppe/nede. | Fylles med JS (Kilde: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
Blokker i mobilbaren | Valgfrie HTML-seksjoner over/under mobilmenyen (f.eks. logo). | Synlighet via |
bx-side-bar |
Side-navigasjon (Off-Canvas venstre) | Container for alternativ/tilleggsnavigasjon. | Kan ta opp menyen eller egne innhold. |
bx-SideHTML1, bx-SideHTML2 |
Blokker i sidepanelet | Valgfrie HTML-seksjoner over/under side-menyen (f.eks. stort logo). | Synlighet via |
WKGBAnzDiv |
Badge-wrapper i handlekurv-ikon | Innrammende telleområde (Layout/Posisjon). | Inkluderer .WKGBAnzDivInner (Antall). |
WKGBAnzDivInner |
Badge-inner. | Viser den nåværende handlekurvmengden. | Fylles med JS via #WKGBAnz. |
Plassholder-klasser fra DB
| Plassholder | Beskrivelse | Eksempel |
|---|---|---|
|
Hver menyknapp kan erstattes av en eller flere egne klasser (f.eks. only-desktop, highlight, icon-contact). | Styrer synlighet/stil per knapp i Desktop-, Mobil- eller Side-bar. |
Kombiner .bx-nav-item med DB-styrte klasser gjennom , for å spesifikt vise eller skjule enkeltknapper i #bxNavPoints (Desktop), .bx-mobile-bar, eller .bx-side-bar uten å måtte endre HTML-koden.
FAQ
hva kunder ofte spør oss om
Her lærer du hvilke CSS-klasser som styrer layout, oppførsel og synlighet i HTML-en av din navigasjonslinje. På denne måten kan du foreta målrettede tilpasninger til navigasjonen.
Hva betyr plassholderen ?
Denne plassholderen blir automatisk erstattet med egne CSS-klasser som du angir i navigasjons-tabellen (f.eks. 00_Menue). Dette styrer synlighet, utheving og ikoner for enkeltmenypunkter.
Hvordan kan jeg legge inn innhold over eller under navigasjonslinjen?
Bruk klassene bx-DesktopHTML1 (øverst) og bx-DesktopHTML2 (nederst). Du kan vise eller skjule dem i CMS under CMS ⯈ Nettside ⯈ Topptekst.
Hva er oppgaven til klassen bx-nav-outer?
Den er den ytre containeren for navigasjonen. Dette styrer bredde, skygge eller sticky-adferd for navigasjonslinjen.
Hva står bx-nav for?
Denne klassen definerer hovednavigasjonen selv – altså layout (f.eks. Flex/Grid), bakgrunnsfarge og høyde på navigasjonslinjen.
Hvordan er navigasjonslinjen delt inn i seksjoner?
Navigasjonslinjen består av tre områder: bx-navbar-left (Logo & Mening-ikon), bx-navbar-center (Menypunkter), bx-navbar-right (Ikoner som søk, innlogging, språk, handlekurv).
Hva gjør klassen bx-nav-icon?
Den sørger for enhetlig styling av alle navigasjonslinje-ikoner. Disse knappene styrer f.eks. åpning av Mobil-bar, Side-bar eller søk.
Hvordan kan jeg utforme menylinker?
Med bx-nav-item definerer du listeelementene, mens bx-nav-link definerer stilreglene for skrift, hover og aktive tilstander for lenkene.
Hvordan fungerer styringen av undermenyer?
Et menypunkt med klassen has-submenu inneholder en dropdown. Med submenu-toggle (knapp med pil-ikon) kan du åpne eller lukke denne.
Hva betyr hjelpekclassene d-none og d-lg-inline?
Disse klassene styrer synligheten til enkelte elementer basert på skjermstørrelse – ideelt for responsive navigasjoner.
Hvordan er et dropdown-meny bygget opp?
Et dropdown består av bx-navbar-dropdown (container), med bx-menu (liste) som inneholder bx-dropdown-item og bx-dropdown-link for de enkelte undermenypunktene.
Hvordan fungerer Mobile-Baren?
bx-mobile-bar åpner seg på mobile enheter til høyre som et Off-Canvas-meny. Den fylles med innhold fra #bxNavPoints via JS. Du kan legge til ekstra blokker med bx-MobilHTML1 og bx-MobilHTML2.
Hva er Side-Baren?
bx-side-bar er et side Off-Canvas-meny (vanligvis til venstre). Her kan du plassere egne innhold eller navigasjonselementer, supplert med bx-SideHTML1 og bx-SideHTML2.
Hvordan vises handlekurv-telleren?
Wrapperen WKGBAnzDiv inneholder WKGBAnzDivInner, som viser det aktuelle antallet artikler via JS (gjennom #WKGBAnz) – vanligvis som et badge i handlekurv-ikonet.
Hvordan kan jeg vise enkelte knapper kun i bestemte områder?
Kombiner .bx-nav-item med . Slik kan du målrette knappene i #bxNavPoints (desktop), .bx-mobile-bar eller .bx-side-bar uten å endre HTML-koden.