Navigasjonsredigerer i bluetronix CMS – tilpass menyen individuelt

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

I denne veiledningen lærer du hvordan du tilpasser navigasjonen på nettstedet ditt i bluetronix CMS. Fra navbar-strukturen til mobilmenyen – her får du trinn for trinn instruksjoner på hvordan du konfigurerer menyen optimalt.

Lagringssted & synlighet Kodeeksempel: <i>/bx_Header.html</i> Navbar-struktur Seksjon: Navbar-Top Seksjon: Navbar-Bottom Mobilmeny Sidebar Meny-knapper & submeny Konfigurer SVG-ikoner CSS-styring & rekkefølge Tips & triks Ekstra knapp for navigasjonseditoren FAQ

Navigasjonseditor: Tilpasning av nettstedets meny

Denne dokumentasjonen viser deg hvordan navbaren (nettsted-navigasjonen) i bluetronix CMS er bygd opp og hvordan du tilpasser den. Du vil bli guidet gjennom struktur, plassholdere (tekst-merker), mobil- og sidepanel samt navigasjonseditoren.

Merk: Filen /bx_Header.html er kun synlig i utviklermodus (innlogging som AAdmin).

Lagringssted & synlighet

Som standard ligger navbaren i hovedkatalogen under Side → /bx_Header.html. Endringer i navigasjonen gjøres i denne filen.

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å plassholdere (tekstmærker)

HTML-plassholderne blir automatisk erstattet ved lagring 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 å bruke alternativene fra CMS - topptekst, kan du fjerne merkene __DB_GB_xxx__ og __DB_GB_xxx_Display__ fra HTML. De er valgfrie.

Den ekstra linjen over menyen ruller (mobil & desktop) opp og ut av synsfeltet. Selve navbaren forblir synlig øverst som "sticky". Slik kan viktige informasjoner (f.eks. "Last ned app …") vises øverst uten å blokkere plassen hele tiden.

__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 linjen under menyen ruller (mobil & desktop) også opp og bort.

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

Mobilmeny

Mobilbaren ruller inn fra høyre side i telefonmodus. Når siden lastes, overtar JavaScript (/bx_script/BxScript_own_min.js) menyinnholdet fra bxNavPoints til Mobilbaren (BxMobileBar). I tillegg kan du legge inn egne HTML-blokker over og under menyen (f.eks. store logoer).


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

Side-bar kommer inn fra venstre side i telefonmodus. Her kan du også legge til egne HTML-blocker over/under menyen (f.eks. for store logoer). Navigasjonsmenyen kan også vises i sidebaren som et alternativ.


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

Layout-informasjon: Du kan velge å vise Mobile-meny eller Side-bar til høyre/venstre, og bytte ut ikonene via CMS → Nettsted → Hode.

Meny-knapper & submeny



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

Menystrukturen bygges opp med UL/LI og fylles fra databasen 00_Menue. Gjennom merket  kan du også spesifisere en annen tabell.

Mellom  finnes HTML-maler for hoved- og underpunkter. Merket  fylles automatisk med submeny-elementene.

Viktig: Tilkoblingen til CMS-navigasjonsfunksjonen skjer via tekstmerkene. Dette gjør det også mulig å fullt integrere Custom Templates. Du redigerer navigasjonen i CMS-undermenyen (under Rand). Systemet oppretter sider og kataloger automatisk - manuell lenking er ikke nødvendig.

Konfigurer SVG-ikoner

SVG-koden for ikonene administreres i utviklervisningen under CMS → Nettsted → Hode i bunnområdet.

CSS-styring & rekkefølge

Rekkefølgen på ikonene kan endres via CSS. Mobile-bar kan vises til høyre eller venstre avhengig av layout.

Tips & triks

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 knapp for navigasjonseditoren

<!-- 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 vil vise en ekstra redigeringsknapp i redigeringsmodus. Ved å erstatte 00_Menue kan du spesifisere en annen navigasjonstabell. Standard navigasjonsredigerer bruker alltid 00_Menue.

Best praksis: Hold alle navigasjonselementer samlet i /bx_Header.html. På den måten forblir Mobile-bar, Side-bar og Desktop-Navbar konsistente, og bytte av datakilde (f.eks. en annen tabell enn 00_Menue) er enkelt gjort.

FAQ

hva kunder ofte spør oss om

Hvor finner jeg Navbar-filen i bluetronix CMS?

Navbaren finnes i hovedmappen under Sider ⯈ /bx_Header.html. Der kan du gjøre alle endringer i nettstedets navigasjon.

Hvorfor ser jeg ikke filen /bx_Header.html?

Filen er bare synlig i Utviklermodus. Logg inn som AAdmin for å få tilgang.

Hvordan er Navbaren bygd opp?

Navbaren består av tre hoveddeler: – Venstre ikon & logo: Meny-ikon og logo – Sentral knapper: Hovednavigasjon og undermenyer – Ikoner til høyre: Funksjonsikoner som søk, innlogging eller handlekurv

Hva betyr plassholderne (tekstmerker) i HTML-koden?

Plassholderne blir automatisk erstattet når du lagrer i CMS. For eksempel styrer none synligheten til et element, mens setter inn det faktiske innholdet. Du kan konfigurere disse merkene under CMS ⯈ Nettsted ⯈ Hode.

Kan jeg fjerne tekstmerkene?

Ja, hvis du ikke ønsker å bruke CMS-headere, kan du enkelt slette merkene som eller . De er valgfrie.

Hvordan kan jeg legge til innhold over og under Navbaren?

Gjennom områdene Navbar-Top og Navbar-Bottom kan du aktivere ekstra felt. Disse styres via CMS ⯈ Nettsted ⯈ Hode og fylles med HTML-innhold.

Hvordan fungerer Mobile-menyen?

I telefonmodus kommer Mobile-bar inn fra høyre side. Menyinformasjonen blir automatisk hentet fra desktop-menyen. Du kan legge til egne HTML-blocker som logoer over og under.

Hvordan aktiverer jeg sidebaren?

Sidepanelet åpner seg fra venstre side i telefonmodus. Her kan du også legge til egne HTML-blokker. Visningen kontrollerer du via CMS ⯈ Nettsted ⯈ Hode.

Kan jeg bestemme om navigasjonen skal vises i sidepanelet eller mobilmenyen?

Ja, via layoutalternativene kan du velge om navigasjonen din vises i sidepanelet eller mobilmenyen. I tillegg kan du via ikonene fastsette på hvilken side (venstre/høyre) den vises.

Hvordan blir menyen administrert i CMS?

Menystrukturen genereres fra systemtabellen 00_Menue. Denne redigerer du i CMS under Kant ⯈ Navigasjon. Sider og undersider blir automatisk opprettet.

Hvordan kan jeg lage egne meny-maler?

Via merket  kan du angi en annen tabell som datakilde. Slik kan du lage egne navigasjoner eller maler som er knyttet til CMS-navigasjonen.

Hvordan endrer jeg SVG-ikoner?

SVG-kodene til ikonene kan du redigere under CMS ⯈ Nettsted ⯈ Hode i den nederste delen av utviklervisningen.

Hvordan endrer jeg rekkefølgen på ikonene i navigasjonslinjen?

Rekkefølgen på ikonene kan du tilpasse via CSS. Også posisjonen til mobilmenyen (høyre eller venstre) kan styres via CSS.

Hvordan kan jeg fastsette hvilke knapper som skal vises i desktop-, mobil- eller sidepanelet?

Via tabellen 00_Menue kan du gi hver navigasjon et CSS-klassenavn. Med disse klassene styrer du via CSS hvor knappen skal vises – f.eks. i #bxNavPoints (Desktop), #BxMobileBar (Mobil) eller #BxSideBar (Sidepanel).

Hva gjør tilleggsknappen for navigasjonsredigereren?

Denne knappen viser en ekstra redigerer for navigasjonselementer i redigeringsmodus. Som standard bruker den tabellen 00_Menue, men du kan også definere en annen tabell.

Hva er anbefalt beste praksis for navigasjonen?

Hold alle navigasjonselementer samlet i filen /bx_Header.html. Slik forblir desktop-, mobil- og sidepanelmenyene synkroniserte og kan raskt tilpasses eller byttes ut ved behov.