Navigatie-editor in het bluetronix CMS - menu aanpassen naar wens

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

In deze handleiding leer je hoe je de navigatie van je website in het bluetronix CMS kunt aanpassen. Van de Navbar-structuur tot het mobiele menu – hier leer je stap voor stap hoe je je menu optimaal configureert.

Opslaglocatie & Zichtbaarheid Codevoorbeeld: <i>/bx_Header.html</i> Navbar-opbouw Sectie: Navbar-Boven Sectie: Navbar-Beneden Mobiel menu Zijbalk Menu-knoppen & Submenu SVG-iconen configureren CSS-beheer & Volgorde Tips & Tricks Extra knop voor de navigatie-editor FAQ

Navigatie-editor: Webseiten-menu aanpassen

Deze documentatie laat je zien hoe de Navbar (Website-navigatie) in het bluetronix CMS is opgebouwd en hoe je deze kunt aanpassen. Je wordt door structuur, plaatsaanduidingen (tekstmerken), mobiele en zijbalk, en de navigatie-editor geleid.

Opmerking: Het bestand /bx_Header.html is alleen zichtbaar in de ontwikkelaarsmodus (aanmelden als AAdmin).

Opslaglocatie & Zichtbaarheid

Standaard bevindt de Navbar zich in de hoofdmap onder Pagina's → /bx_Header.html. Wijzigingen aan de navigatie maak je in dit bestand.

Codevoorbeeld: /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).

Plaatsaanduidingen (tekstmerken) begrijpen

De HTML-plaatsaanduidingen worden automatisch vervangen bij het opslaan in het 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.

Als je de opties uit de CMS-koptekst niet wilt gebruiken, kun je de merknamen __DB_GB_xxx__ en __DB_GB_xxx_Display__ uit de HTML verwijderen. Ze zijn optioneel.

De extra balk boven het menu scrollt (telefoon & desktop) naar boven uit het zicht. De daadwerkelijke Navbar blijft aan de bovenrand "sticky" zichtbaar. Zo kunnen belangrijke info's (bijv. "Download App …") boven verschijnen zonder voortdurend ruimte te blokkeren.

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

De extra balk onder het menu scrollt (telefoon & desktop) ook naar boven weg.

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

Mobiel menu

De mobiele balk verschijnt in de telefoonmodus vanaf de rechterkant. Bij het laden van de pagina neemt JavaScript (/bx_script/BxScript_own_min.js) de menu-inhoud van bxNavPoints over in de mobiele balk (BxMobileBar). Daarnaast kun je boven en onder het menu eigen HTML-blokken invoegen (bijv. grote logo's).


<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>

De Side-Bar verschijnt in de telefoonmodus vanaf de linkerkant. Ook hier kun je boven/onder het menu eigen HTML-blokken plaatsen (bijv. voor grote logo's). Optioneel kan het navigatiemenu ook in de zijbalk worden weergegeven.


<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>

Lay-out opmerking: Je kunt kiezen of je het mobiele menu of de zijbalk rechts/links wilt weergeven en de iconen verwisselen via CMS → Website → Koptekst.

Menu-knoppen & Submenu



         <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>

De menustructuur wordt opgebouwd met UL/LI en wordt gevuld vanuit de databank tabel 00_Menue. Via het label  kun je ook een andere tabel opgeven.

Tussen  staan de HTML-sjablonen voor hoofd- en subpunten. Het label  wordt automatisch gevuld met de submenu-items.

Belangrijk: De verbinding met de CMS-navigatiefunctie ontstaat via de tekstlabels. Zo kunnen ook Custom Templates volledig worden gekoppeld. Je bewerkt de navigatie in het CMS-submenu (onder Rand). Pagina’s en mappen worden automatisch aangemaakt door het systeem – handmatig linken is niet nodig.

SVG-iconen configureren

De SVG-code van de iconen beheer je in de ontwikkelweergave van CMS → Website → Koptekst in het onderste gedeelte.

CSS-beheer & Volgorde

De volgorde van de iconen kun je met CSS wijzigen. De Mobile-Bar kan afhankelijk van de lay-out rechts of links worden weergegeven.

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.

Extra knop voor de navigatie-editor

<!-- 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>

Zo voeg je in de bewerkingsmodus een extra bewerkingsknop toe. Door 00_Menue te vervangen, kun je een andere navigatietabel opgeven. De standaard navigatie-editor gebruikt altijd 00_Menue.

Best Practice: Houd alle navigatie-elementen gebundeld in /bx_Header.html. Zo blijven de Mobile-Bar, Side-Bar en Desktop-Navbar consistent, en is het snel geregeld om de gegevensbron (bijv. een andere tabel dan 00_Menue) te vervangen.

FAQ

wat klanten ons vaak vragen

Waar vind ik het Navbar-bestand in het bluetronix CMS?

De Navbar bevindt zich in de hoofdmap onder Pagina's ⯈ /bx_Header.html. Daar kun je alle wijzigingen aan de website-navigatie aanbrengen.

Waarom zie ik het bestand /bx_Header.html niet?

Het bestand is alleen zichtbaar in de Ontwikkelaarsmodus. Meld je aan als AAdmin om toegang te krijgen.

Hoe is de Navbar opgebouwd?

De Navbar bestaat uit drie hoofdonderdelen: – Links Pictogram & Logo: Menu-pictogram en logo – Midden Knoppen: Hoofdnavigatie en submenu’s – Pictogrammen Rechts: Functie-pictogrammen zoals zoeken, inloggen of winkelwagentje

Wat betekenen de placeholders (tekstlabels) in de HTML-code?

De placeholders worden automatisch vervangen bij het opslaan in het CMS. Bijvoorbeeld, none stuurt de zichtbaarheid van een element, terwijl de daadwerkelijke inhoud invoegt. Deze labels kun je onder CMS ⯈ Website ⯈ Koptekst configureren.

Kan ik de tekstlabels verwijderen?

Ja, als je de CMS-koptekstopties niet wilt gebruiken, kun je de labels zoals of gewoon verwijderen. Ze zijn optioneel.

Hoe kan ik inhoud boven en onder de Navbar toevoegen?

Via de gebieden Navbar-Boven en Navbar-Onder kun je extra balken activeren. Deze worden bestuurd via CMS ⯈ Website ⯈ Koptekst en gevuld met HTML-inhoud.

Hoe werkt het mobiele menu?

In de telefoonmodus verschijnt de Mobile-Bar vanaf de rechterzijde. De menu-inhoud wordt automatisch overgenomen uit het desktopmenu. Je kunt boven en onder extra HTML-blokken zoals logo's toevoegen.

Hoe activeer ik de zijbalk?

De zijbalk opent aan de linkerkant in de telefoonmodus. Hier kun je ook eigen HTML-blokken toevoegen. De weergave regel je via CMS ⯈ Website ⯈ Koptekst.

Kan ik beslissen of de navigatie in de zijbalk of mobiele balk verschijnt?

Ja, via de layoutopties kun je kiezen of je navigatie in de zijbalk of mobiele balk wordt weergegeven. Daarnaast kun je via de iconen instellen op welke zijde (links/rechts) deze verschijnt.

Hoe wordt het menu in het CMS beheerd?

De menustructuur wordt gegenereerd uit de systeemtabel 00_Menue. Deze bewerk je in het CMS onder Rand ⯈ Navigatie. Pagina's en onderpagina's worden automatisch aangemaakt.

Hoe kan ik eigen menu-templates maken?

Via de regel  kun je een andere tabel als gegevensbron opgeven. Zo kun je eigen navigaties of templates maken die zijn verbonden met de CMS-navigatie.

Hoe wijzig ik de SVG-iconen?

De SVG-codes van de iconen kun je onder CMS ⯈ Website ⯈ Koptekst in het onderste gedeelte van de ontwikkelaarsweergave bewerken.

Hoe wijzig ik de volgorde van de iconen in de Navbar?

De volgorde van de iconen kun je via CSS aanpassen. Ook de positie van de mobiele balk (rechts of links) kan via CSS worden geregeld.

Hoe kan ik bepalen welke knoppen in de desktop-, mobiele of zijbalk verschijnen?

Via de tabel 00_Menue kun je elke navigatie een CSS-klassenaam geven. Met deze klassen regel je via CSS waar de knop wordt weergegeven – bijvoorbeeld in #bxNavPoints (Desktop), #BxMobileBar (Mobiel) of #BxSideBar (Sidebar).

Wat doet de extra knop voor de navigatie-editor?

Deze knop toont in de bewerkingsmodus een extra editor voor navigationselementen. Standaard maakt hij gebruik van de tabel 00_Menue, maar je kunt ook een andere tabel definiëren.

Wat is de aanbevolen best practice voor de navigatie?

Houd alle navigationselementen gebundeld in het bestand /bx_Header.html. Zo blijven de desktop-, mobiele- en zijbalkmenu's gesynchroniseerd en kunnen ze snel worden aangepast of vervangen indien nodig.