Navigationseditor i bluetronix CMS – tilpas menuen individuelt

Name: Website builder App
Brand: bluetronix
Rating: 4.7 (831 reviews)

I denne vejledning finder du ud af, hvordan du tilpasser navigationen på din hjemmeside i bluetronix CMS. Fra navbar-strukturen til mobilmenuen – her lærer du trin for trin, hvordan du konfigurerer din menu optimalt.

Lagringssted & Synlighed Kodeeksempel: <i>/bx_Header.html</i> Navbar-opbygning Afsnit: Navbar-Top Afsnit: Navbar-Bottom Mobilmenu Sidebar Menu-knapper & Under-menu Konfigurere SVG-ikoner CSS-styring & Rækkefølge Tips & Tricks Ekstra-knap til navigations-editoren FAQ

Navigation-editor: Tilpasning af webside-menuen

Denne dokumentation viser dig, hvordan navbaren (websidenavigation) er opbygget i bluetronix CMS, og hvordan du tilpasser den. Du bliver ført gennem struktur, pladsholdere (tekstmærker), mobil- og sidepanel samt navigations-editoren.

Bemærk: Filen /bx_Header.html er kun synlig i udviklermode (log ind som AAdmin).

Lagringssted & Synlighed

Som standard ligger navbaren i hovedmappen under Sider → /bx_Header.html. Ændringer til navigationen foretager du i denne fil.

Kodeeksempel: /bx_Header.html



<div style="display:__DB_GB_DesktopHTML1_Display__" class="bx-DesktopHTML1"><!--bxEB_DSedit 00_Config DesktopHTML1 bxEB_DSedit-->
   __DB_GB_DesktopHTML1__     
</div>   


<div class="bx-nav-outer">
   <nav class="bx-nav">

      <!-- left Icon logo -->
      <div class="bx-navbar-left">
         <div style="display:__DB_GB_DesktopNavIcon_Display__">
			   <button class="bx-nav-icon" id="BxMobileBarToggle">__DB_GB_DesktopNavIcon_SVG__</button>    
         </div>

         <div style="display:__DB_GB_DesktopLogo_Display__;">
            <a href="/index.html"><img src="__DB_GB_DesktopLogo_Src__" class="bx-nav-brand"></a>                 
         </div>  
      </div>


      <!-- center buttons -->
      <div class="bx-navbar-center" id="bxNavPoints">

         <!-- zusatz icon Menue-Editor - display:none -->
         <div style="position:relative;display:none;"><div style="position:absolute;left:15px;top:-21px;width:35px;height:35px;z-index:100000;"><!--bxEB_Navi 00_Menue bxEB_Navi--></div></div>

         <ul style="display:__DB_GB_DesktopNav_Display__">
<!--bxNV_DB 00_Menue bxNV_DB-->

<!--bxNV_Navi-->
            <li class="bx-nav-item __DB_Nav_CSSclass__"><a class="bx-nav-link" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->

               <li class="bx-nav-item has-submenu">
                  <a class="bx-nav-link __DB_Nav_CSSclass__" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a>
                  <button class="bx-nav-icon submenu-toggle d-none d-lg-inline" type="button"><span>__DB_GB_NavIconChevron_SVG__</span></button>

                  <ul class="bx-menu bx-navbar-dropdown" role="menu">
<!--bxNV_Next_Sub_Button-->
                  </ul>
               </li>

<!--bxNV_Navi-->
                     <li class="bx-dropdown-item __DB_Nav_CSSclass__" role="none"><a class="bx-dropdown-link" role="menuitem" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
         </ul>
      </div>

      <!-- icons right -->
      <div class="bx-navbar-right">
         <div style="display:__DB_GB_DesktopIconSearch_Display__ ">    
         	<button class="bx-nav-icon" onclick="BlueSearchBar();">__DB_GB_DesktopIconSearch_SVG__</button>
         </div>         

         <div style="display:__DB_GB_DesktopIconLight_Display__">      
         	<button class="bx-nav-icon" onclick="BlueLightDdark();">__DB_GB_DesktopIconLight_SVG__</button>            
         </div>  

         <div style="display:__DB_GB_DesktopIconLogin_Display__">          
         	<button class="bx-nav-icon" onclick="BlueLoginBar();">__DB_GB_DesktopIconLogin_SVG__</button>                   
         </div>   

         <div style="display:__DB_GB_DesktopIconLang_Display__">                  
         	<button class="bx-nav-icon" onclick="BlueLangBar();">__DB_GB_DesktopIconLang_SVG__</button>                   
         </div>   

         <div style="display:__DB_GB_DesktopIconBasket_Display__">      
         	<button class="bx-nav-icon" onclick="BlueBasketBar();">__DB_GB_DesktopIconBasket_SVG__<div class="WKGBAnzDiv"><div class="WKGBAnzDivInner" id="WKGBAnz"></div></div></button>  
         </div>
                         
         <div style="display:__DB_GB_DesktopIconSide_Display__"> 
            <button class="bx-nav-icon" id="BxSideBarToggle">__DB_GB_DesktopIconSide_SVG__</button>               
         </div> 
      </div>

   </nav>
</div>

<!-- Mobile Menü -->
<div class="bx-mobile-bar" id="BxMobileBar">
   <div style="display:__DB_GB_MobilHTML1_Display__" class="bx-MobilHTML1"><!--bxEB_DSedit 00_Config MobilHTML1 bxEB_DSedit-->__DB_GB_MobilHTML1__</div>  
   <div id="bxNavPointsMobile" style="display:__DB_GB_MobilNav_Display__"></div>
   <div style="display:__DB_GB_MobilHTML2_Display__" class="bx-MobilHTML2"><!--bxEB_DSedit 00_Config MobilHTML2 bxEB_DSedit-->__DB_GB_MobilHTML2__</div>  
</div>

<!-- Sidebar -->
<div class="bx-side-bar" id="BxSideBar">
   <div style="display:__DB_GB_SideHTML1_Display__" class="bx-SideHTML1"><!--bxEB_DSedit 00_Config SideHTML1 bxEB_DSedit-->__DB_GB_SideHTML1__</div>  
   <div id="bxNavPointsSide" style="display:__DB_GB_SideNav_Display__"></div>
   <div style="display:__DB_GB_SideHTML2_Display__" class="bx-SideHTML2"><!--bxEB_DSedit 00_Config SideHTML2 bxEB_DSedit-->__DB_GB_SideHTML2__</div>  
</div>


<div style="display:__DB_GB_DesktopHTML2_Display__" class="bx-DesktopHTML2"><!--bxEB_DSedit 00_Config DesktopHTML2 bxEB_DSedit-->
   __DB_GB_DesktopHTML2__       
</div>

Left Icon & Logo: Menü-Icon und Logo.
Center Buttons: Menü-Buttons und Untermenüs.
Icons Right: Funktions-Icons (z. B. Warenkorb, Suche, Sprache).

Forstå pladsholdere (tekstmærker)

HTML-pladsholdere bliver automatisk erstattet ved gemming i CMS:

__DB_GB_DesktopHTMLxxx_Display__: Steuert die Sichtbarkeit (Aktiv/Inaktiv) über CMS → Webseite → Kopfzeile.
__DB_GB_DesktopHTMLxxx__: Wird durch Inhalte (z. B. HTML, Bild-URL, SVG) ersetzt, die Du in Kopfzeile hinterlegst.
__DB_Nav_xxx__: Werte aus der Navigationstabelle (z. B. Link, Name, Ziel, CSS-Klasse).
__DB_GB_xxx_SVG__: SVG-Code des jeweiligen Icons.

Hvis du ikke ønsker at bruge indstillingerne fra CMS - overskriften, kan du fjerne mærkerne __DB_GB_xxx__ og __DB_GB_xxx_Display__ i HTML. De er valgfrie.

Den ekstra bjælke over menuen ruller (telefon & desktop) op fra synsfeltet. Den egentlige navbar forbliver synlig som "sticky" øverst. Således kan vigtige oplysninger (f.eks. "Download app ...") vises øverst uden at blokere pladsen permanent.

__DB_GB_DesktopHTML1_Display__: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.
__DB_GB_DesktopHTML1__: HTML-Inhalt aus Kopfzeile.
: Editier-Button für den HTML-Eintrag.

Den ekstra bjælke under menuen ruller (telefon & desktop) også op.

__DB_GB_DesktopHTML2_Display__: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.
__DB_GB_DesktopHTML2__: HTML-Inhalt aus Kopfzeile.
: Editier-Button für den HTML-Eintrag.

Mobilmenu

Mobile-baren bliver indlæst fra højre side i telefonmode. Når siden indlæses, håndterer JavaScript (/bx_script/BxScript_own_min.js) menuindholdet fra bxNavPoints til Mobile-baren (BxMobileBar). Derudover kan du indsætte dine egne HTML-blokke over og under menuen (f.eks. store logos).


<div class="bx-mobile-bar" id="BxMobileBar">
   <div style="display:__DB_GB_MobilHTML1_Display__" class="bx-MobilHTML1"><!--bxEB_DSedit 00_Config MobilHTML1 bxEB_DSedit-->__DB_GB_MobilHTML1__</div>  
   <div id="bxNavPointsMobile" style="display:__DB_GB_MobilNav_Display__"></div>
   <div style="display:__DB_GB_MobilHTML2_Display__" class="bx-MobilHTML2"><!--bxEB_DSedit 00_Config MobilHTML2 bxEB_DSedit-->__DB_GB_MobilHTML2__</div>  
</div>

Sidebaren glider ind fra venstre side i telefonmode. Her kan du også tilføje egne HTML-blokke over/under menuen (f.eks. til store logoer). Det er valgfrit at vise navigationsmenuen i sidebar.


<div class="bx-side-bar" id="BxSideBar">
   <div style="display:__DB_GB_SideHTML1_Display__" class="bx-SideHTML1"><!--bxEB_DSedit 00_Config SideHTML1 bxEB_DSedit-->__DB_GB_SideHTML1__</div>  
   <div id="bxNavPointsSide" style="display:__DB_GB_SideNav_Display__"></div>
   <div style="display:__DB_GB_SideHTML2_Display__" class="bx-SideHTML2"><!--bxEB_DSedit 00_Config SideHTML2 bxEB_DSedit-->__DB_GB_SideHTML2__</div>  
</div>

Layoutnote: Du kan vælge at vise mobilmenu eller sidebar til højre/venstre og ændre ikonerne via CMS → Website → Header.

Menu-knapper & Under-menu



         <ul style="display:__DB_GB_DesktopNav_Display__">
<!--bxNV_DB 00_Menue bxNV_DB-->

<!--bxNV_Navi-->
            <li class="bx-nav-item __DB_Nav_CSSclass__"><a class="bx-nav-link" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->

               <li class="bx-nav-item has-submenu">
                  <a class="bx-nav-link __DB_Nav_CSSclass__" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a>
                  <button class="bx-nav-icon submenu-toggle d-none d-lg-inline" type="button"><span>__DB_GB_NavIconChevron_SVG__</span></button>

                  <ul class="bx-menu bx-navbar-dropdown" role="menu">
<!--bxNV_Next_Sub_Button-->
                  </ul>
               </li>

<!--bxNV_Navi-->
                     <li class="bx-dropdown-item __DB_Nav_CSSclass__" role="none"><a class="bx-dropdown-link" role="menuitem" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
         </ul>

Menu-strukturen opbygges med UL/LI og fyldes fra database-tabellen 00_Menue. Gennem markeringen  kan du også angive en anden tabel.

Mellem  findes HTML-skabelonerne til hoved- og underpunkter. Markeringen  fyldes automatisk med under-menu-poster.

Vigtigt: Forbindelsen til CMS-navigationsfunktionen opstår gennem tekstmarkeringerne. Dette gør det muligt at integrere Custom Templates fuldt ud. Du kan redigere navigationen i CMS-submenuen (under Rand). Systemet opretter automatisk sider og mapper – manuel linking er ikke nødvendigt.

Konfigurere SVG-ikoner

SVG-koden til ikonerne vedligeholder du i udviklervisningen under CMS → Website → Header i bunden.

CSS-styring & Rækkefølge

Du kan ændre rækkefølgen af ikonerne via CSS. Mobilbaren kan vises til højre eller venstre afhængigt af layoutet.

Tips & Tricks

In Kombination mit der Systemtabelle 00_Menue und CSS legst Du je Button fest, ob er in der Desktop-Navigation, der Mobile-Bar und/oder in der Side-Bar erscheint.
In 00_Menue kann jedem Button eine CSS-Klasse in der Spalte CSSclass zugewiesen werden.
Über CSS und die IDs bxNavPoints, BxMobileBar, BxSideBar bestimmst Du, welche Buttons wo gerendert werden. So baust Du auch komplexe Navbar-Strukturen, die der Endkunde später selbst mit der CMS-Navigation verändern kann.

Ekstra-knap til navigations-editoren

<!-- zusatz icon Menue-Editor - display:none -->
<div style="position:relative;display:none;"><div style="position:absolute;left:15px;top:-21px;width:35px;height:35px;z-index:100000;"><!--bxEB_Navi 00_Menue bxEB_Navi--></div></div>

Dette viser en ekstra redigeringsknap i redigeringstilstand. Ved at erstatte 00_Menue kan du angive en anden navigations-tabel. Den standard navigationseditor bruger altid 00_Menue.

Bedste praksis: Hold alle navigationselementer samlet i /bx_Header.html. Så forbliver mobilbaren, sidebar og desktop-navbar konsistente, og udskiftningen af datakilde (f.eks. en anden tabel end 00_Menue) er hurtigt overstået.

FAQ

hvad kunder ofte spørger os

Hvor finder jeg navbar-filen i bluetronix CMS?

Navbar'en findes i hovedmappen under Sider ⯈ /bx_Header.html. Her kan du foretage alle ændringer til websitens navigation.

Hvorfor kan jeg ikke se filen /bx_Header.html?

Filen vises kun i udviklertilstand. Log ind som AAdmin for at få adgang.

Hvordan er navbar'en opbygget?

Navbar'en består af tre hovedområder: – Venstre ikon & logo: Menu-ikon og logo – Centrer knapper: Hovednavigation og under-menuer – Ikoner til højre: Funktionsikoner som søg, login eller indkøbsvogn.

Hvad betyder pladsholderne (tekstmarkeringer) i HTML-koden?

Pladsholderne erstattes automatisk, når de gemmes i CMS. For eksempel styrer none synligheden af et element, mens indsætter det egentlige indhold. Disse markeringer kan du konfigurere under CMS ⯈ Website ⯈ Header.

Kan jeg fjerne tekstmarkeringerne?

Ja, hvis du ikke ønsker at bruge CMS-headerindstillingerne, kan du simpelthen slette markeringerne som eller . De er valgfri.

Hvordan kan jeg tilføje indhold over og under navbar'en?

Gennem områderne Navbar-Top og Navbar-Bottom kan du aktivere ekstra bjælker. Disse styres via CMS ⯈ Website ⯈ Header og fyldes med HTML-indhold.

Hvordan fungerer mobilmenuen?

I telefonmode glider mobilbaren ind fra højre side. Menuindholdet overføres automatisk fra desktop-menuen. Du kan indsætte ekstra HTML-blokke som logoer ovenfor og nedenfor.

Hvordan aktiverer jeg sidebar?

Sidebaren åbner i telefonmode fra venstre side. Her kan du også tilføje dine egne HTML-blokke. Du styrer visningen via CMS ⯈ Hjemmeside ⯈ Header.

Kan jeg beslutte, om navigeringen vises i sidebaren eller mobilbaren?

Ja, via layoutmulighederne kan du vælge, om din navigation vises i sidebaren eller mobilbaren. Derudover kan du angive, på hvilken side (venstre/højre) den vises via ikoner.

Hvordan administreres menuen i CMS?

Menuen genereres ud fra systemtabellen 00_Menue. Denne redigerer du i CMS under Rand ⯈ Navigation. Sider og undersider oprettes automatisk.

Hvordan kan jeg oprette egne menuskabeloner?

Ved hjælp af mærket  kan du angive en anden tabel som datakilde. På den måde kan du oprette dine egne navigeringer eller skabeloner, der er forbundet med CMS-navigationen.

Hvordan ændrer jeg SVG-ikonerne?

SVG-koderne for ikonerne kan du redigere under CMS ⯈ Hjemmeside ⯈ Header i bunden af udvikleroversigten.

Hvordan ændrer jeg rækkefølgen af ikonerne i navigationen?

Rækkefølgen af ikonerne kan du tilpasse via CSS. Også positionen af mobilbaren (højre eller venstre) kan styres via CSS.

Hvordan kan jeg bestemme, hvilke knapper der vises i desktop-, mobil- eller sidebaren?

Gennem tabellen 00_Menue kan du give hver navigation et CSS-klassens navn. Med disse klasser styrer du via CSS, hvor knappen vises – f.eks. i #bxNavPoints (desktop), #BxMobileBar (mobil) eller #BxSideBar (sidebar).

Hvad gør tillægsknappen til navigeringeditoren?

Denne knap viser en ekstra editor for navigationselementer i redigeringstilstand. Som standard bruger den tabellen 00_Menue, men du kan også definere en anden tabel.

Hvad er den anbefalede bedste praksis for navigation?

Hold alle navigationselementer samlet i filen /bx_Header.html. På den måde forbliver desktop-, mobil- og sidebar-menuen synkron og kan hurtigt tilpasses eller udskiftes efter behov.