Navigations CSS-klasser i bluetronix CMS – oversigt og anvendelse
I dette overblik finder du alle de vigtige CSS-klasser for navigationen i bluetronix CMS. Lær, hvordan du med få tilpasninger kan designe, responsivisere og tilpasse adfærden af din menustruktur individuelt.
Navigation CSS-klasser Beskrivelse
Her finder du en kompakt oversigt over, hvilken CSS-klasse der er beregnet til hvad i dit HTML-snippet. På den måde kan du hurtigt justere layout og adfærd.
Vigtigt: er en pladsmarker fra navigationstabellen (f.eks. 00_Menue) og bliver ved rendering erstattet med egne klasser (f.eks. for synlighed, fremhævning, ikoner pr. menupunkt).
Klasseloftoversigt
| Klasse | Brugt i | Formål / Betydning | Typisk interaktion |
|---|---|---|---|
bx-DesktopHTML1 |
div over navbar | Top-bar over hovedmenuen (f.eks. beskeder, promo, app-banner). | Synlighed styres over DB-pladsholdere (none). |
bx-DesktopHTML2 |
div under navbar | Bund-bar under hovedmenuen (yderligere information/badges). | Synlighed over none. |
bx-nav-outer |
Wrapper om nav.bx-nav |
Ydre container til positionering (f.eks. sticky, skygge, bredde). | Layout-ramme til fuld sidebredde. |
bx-nav |
nav Hovednavigation | Basis-navbar (grid/flex, baggrund, højde). | Globale navbar-stile og responsivitet. |
bx-navbar-left |
Navbar-venstre kolonne | Område til menu-ikon (burger) og logo. | Indeholder .bx-nav-icon og .bx-nav-brand. |
bx-navbar-center |
Navbar-midt | Container til menuindgange (UL/LI) inkl. under-menuer. | Udfylder mobil/sidebar via JS (Kilde: #bxNavPoints). |
bx-navbar-right |
Navigationsbar - højre kolonne | Ikon-gruppe (Søg, Lys/Mørk, Login, Sprog, Indkøbskurv, Sidebar). | Knapper udløser JS-funktioner (f.eks. BlueSearchBar()). |
bx-nav-icon |
knap / Ikon-knapper | Enhedlig stil for alle navigationsbar-ikoner. | Klik-mål for toggles (Mobil-bar, Side-bar, Søg, osv.). |
bx-nav-brand |
img Logo | Logo-præsentation (størrelse, afstande). | Ofte med link til /index.html. |
bx-nav-item |
li i hovedmenuen | Listeelement af en menupunkt. | Kan kombineres med .has-submenu. |
bx-nav-link |
a i menuen | Stil for menu-linket (skrift, hover, aktive tilstande). | Modtager mål/tekst via DB-pladsholder. |
has-submenu |
li med dropdown | Markerer menupunkt med underordnet menu; aktiverer dropdown-stile. | Åbner/Lukker tilhørende .bx-navbar-dropdown. |
submenu-toggle |
knap ved siden af link | Kontrol til at åbne/lukke undermenuen (Chevron-ikon). | Ses ofte kun på større skærme (se Utility-klasser). |
d-none, d-lg-inline |
Utility-klasser på knap | Synlighedskontrol (f.eks. skjul → vis inline fra lg). | Responsiv adfærd af togglen. |
bx-menu |
ul i dropdown | Liste over undermenuobjekter. | Udfyldes via navigation fra databasen. |
bx-navbar-dropdown |
ul (Dropdown-container) | Dropdown-panel (positionering, skygge, animation). | Åbnes ved hover/klik eller .submenu-toggle. |
bx-dropdown-item |
li i dropdown | Enkelt undermenuobjekt. | Indeholder .bx-dropdown-link. |
bx-dropdown-link |
a i dropdown | Link-stil inden for dropdown. | Hover-/focus-tilstande for bedre brugervenlighed. |
bx-mobile-bar |
Mobilmenu (Off-Canvas til højre) | Container til mobil navigation og valgfrie blokke ovenfor/nedenfor. | Udfyldes via JS (Kilde: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
Blokke i mobilbaren | Valgfrie HTML-områder over/under mobilmenuen (f.eks. logo). | Sigtbarhed via |
bx-side-bar |
Side-navigation (Off-Canvas venstre) | Container til alternativ/ekstra navigation. | Kan indeholde menuen eller egne indhold. |
bx-SideHTML1, bx-SideHTML2 |
Blokke i sidebaren | Valgfrie HTML-områder over/under siden menu (f.eks. stort logo). | Sigtbarhed via |
WKGBAnzDiv |
Badge-wrapper i kurv-ikonet | Indkapslende tællerområde (layout/position). | Indeholder .WKGBAnzDivInner (antal). |
WKGBAnzDivInner |
Badge-indre | Viser den aktuelle kurvmængde. | Udfyldes via JS via #WKGBAnz. |
Pladsholderklasser fra DB
| Pladsholder | Beskrivelse | Eksempel |
|---|---|---|
|
|
Styrer synlighed/stil pr. knap i desktop-, mobil- eller side-bar. |
Kombiner .bx-nav-item med DB-styrede klasser gennem for at vise eller skjule enkelte knapper i #bxNavPoints (desktop), .bx-mobile-bar eller .bx-side-bar uden at ændre HTML-koden.
FAQ
hvad kunder ofte spørger os
Her kan du finde ud af, hvilke CSS-klasser der styrer layout, adfærd og synlighed i dit navbar-HTML. Så kan du foretage målrettede justeringer af navigationen.
Hvad betyder pladsholderen ?
Denne pladsholder bliver automatisk erstattet med egne CSS-klasser, som du definerer i navigationstabellen (f.eks. 00_Menue). Dermed styrer du synlighed, fremhævelse og ikoner for enkelte menupunkter.
Hvordan kan jeg tilføje indhold over eller under navbaren?
Brug klasserne bx-DesktopHTML1 (over) og bx-DesktopHTML2 (under). Du kan aktivere eller deaktivere dem i CMS under CMS ⯈ Hjemmeside ⯈ Overskrift.
Hvad er funktionen af klassen bx-nav-outer?
Den er den ydre container for navigationen. Dermed styrer du bredde, skygger eller sticky-adfærd i navbaren.
Hvad står bx-nav for?
Denne klasse definerer selve hovednavigationen – altså layoutet (f.eks. flex/grid), baggrundsfarve og højden af navbaren.
Hvordan er navbaren opdelt i kolonner?
Navbaren består af tre områder: bx-navbar-left (logo & menu-ikon), bx-navbar-center (menupunkter), bx-navbar-right (ikoner som søg, login, sprog, kurv).
Hvad gør klassen bx-nav-icon?
Den sikrer ensartet styling af alle navbar-ikoner. Disse knapper styrer f.eks. åbning af Mobile-Bar, Side-Bar eller søgningen.
Hvordan kan jeg designe menulinks?
Med bx-nav-item definerer du listeelementerne, med bx-nav-link stilreglerne for skrifttype, hover og aktive tilstande af links.
Hvordan fungerer styringen af under-menuer?
Et menupunkt med klassen has-submenu indeholder et dropdown. Med submenu-toggle (knap med pil-ikon) kan du folde det ud eller ind.
Hvad betyder utility-klasserne d-none og d-lg-inline?
Disse klasser styrer synligheden af enkelte elementer afhængigt af skærmstørrelse – ideelt til responsive navigationer.
Hvordan er et dropdown-menu opbygget?
Et dropdown består af bx-navbar-dropdown (container), deri bx-menu (liste) med bx-dropdown-item og bx-dropdown-link for de enkelte underpunkter.
Hvordan fungerer Mobile-Bar?
bx-mobile-bar åbner til højre som et Off-Canvas-menu på mobile enheder. Den fyldes med indhold fra #bxNavPoints via JS. Du kan tilføje flere blokke med bx-MobilHTML1 og bx-MobilHTML2.
Hvad er sidebaren?
bx-side-bar er et sidelæggende Off-Canvas-menu (som regel til venstre). Her kan du placere egne indhold eller navigationselementer, suppleret med bx-SideHTML1 og bx-SideHTML2.
Hvordan vises indkøbsvogns-tælleren?
Wrapperen WKGBAnzDiv indeholder WKGBAnzDivInner, som via JS (gennem #WKGBAnz) viser det aktuelle antal artikler – som regel som et badge i indkøbsvogns-ikonet.
Hvordan kan jeg vise enkelte knapper kun i bestemte områder?
Kombiner .bx-nav-item med . På denne måde kan du målrettet vise eller skjule knapper i #bxNavPoints (desktop), .bx-mobile-bar eller .bx-side-bar uden at ændre HTML-koden.