Navigationsredigerare i bluetronix CMS – anpassa menyn individuellt

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

I denna handledning får du veta hur du anpassar navigeringen på din webbplats i bluetronix CMS. Från navbar-strukturen till mobilmenyn – här lär du dig steg för steg hur du konfigurerar din meny optimalt.

Lagringsplats & synlighet Kodexempel: <i>/bx_Header.html</i> Navbar-struktur Avsnitt: Navbar-Topp Avsnitt: Navbar-Botten Mobilmeny Sidopanel Menyknappar & undermenyer Konfigurera SVG-ikoner CSS-styrning & ordning Tips & tricks Tilläggsknapp för navigeringsredigeraren FAQ

Navigeringsredigerare: Anpassning av webbplatsens meny

Denna dokumentation visar dig hur navbaren (webbplatsnavigering) i bluetronix CMS är uppbyggd och hur du anpassar den. Du kommer att guidas genom struktur, platshållare (textmärken), mobil- och sidopanel samt navigeringsredigeraren.

Notera: Filen /bx_Header.html är endast synlig i utvecklarläge (inloggning som AAdmin).

Lagringsplats & synlighet

Som standard ligger navbaren i huvudkatalogen under Sidor → /bx_Header.html. Ändringar i navigeringen görs i denna fil.

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

Förstå platshållare (textmärken)

HTML-platshållare ersätts automatiskt vid sparande 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.

Om du inte vill använda alternativen i CMS - rubriken kan du ta bort märkena __DB_GB_xxx__ och __DB_GB_xxx_Display__ i HTML. De är valfria.

Tilläggslisten ovanför menyn scrollar (telefon & desktop) uppåt ur synfältet. Den faktiska navbaren förblir "sticky" synlig i överkant. Så kan viktig information (t.ex. "Ladda ner appen ...") visas högst upp utan att permanent blockera utrymme.

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

Tilläggslisten under menyn scrollar (telefon & desktop) också uppåt 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 kommer in från höger sida i mobilläge. Vid inladdning av sidan tar JavaScript (/bx_script/BxScript_own_min.js) menyinnehållet från bxNavPoints till mobilbaren (BxMobileBar). Dessutom kan du infoga egna HTML-block över och under menyn (t.ex. stora logotyper).


<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-Baren kommer in från vänstra sidan i telefonläge. Här kan du också placera egna HTML-block ovanför/nedanför menyn (t.ex. för stora logotyper). Navigationsmenyn kan även visas i sidofältet som ett 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>

Layoutanvisning: Du kan välja att visa antingen mobilmenyn eller sidofältet till höger/vänster och byta ikoner via CMS → Webbplats → Huvudrubrik.

Menyknappar & undermenyer



         <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 byggs upp med UL/LI och fylls i från databastabellen 00_Menue. Genom märket  kan du också ange en annan tabell.

Mellan  finns HTML-mallar för huvud- och underrubriker. Märket  fylls automatiskt med undermenyinlägg.

Viktigt: Anslutningen till CMS-navigationsfunktionen sker via textmärken. På så sätt kan även anpassade mallar kopplas helt. Du redigerar navigeringen i CMS-undermenyn (under Rand). Sidor och kataloger skapas automatiskt av systemet – manuell länkning behövs inte.

Konfigurera SVG-ikoner

SVG-koden för ikonerna hanteras i utvecklarvyn av CMS → Webbplats → Huvudrubrik i den nedre delen.

CSS-styrning & ordning

Du kan ändra ordningen på ikonerna via CSS. Mobile-Baren kan visas till höger eller vänster beroende på layouten.

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.

Tilläggsknapp för navigeringsredigeraren

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

Genom att byta ut 00_Menue kan du ange en annan navigeringstabell. Standard navigationsredigeraren använder alltid 00_Menue.

Bästa praxis: Håll alla navigationselement samlade i /bx_Header.html. På så sätt förblir Mobile-Bar, Side-Bar och Desktop-Navbar konsekventa, och byte av datakälla (t.ex. annan tabell än 00_Menue) är snabbt utfört.

FAQ

vad kunder ofta frågar oss

Var hittar jag navbar-filen i bluetronix CMS?

Navbar finns i huvudkatalogen under Sidor ⯈ /bx_Header.html. Där kan du göra alla ändringar i webbplatsens navigering.

Varför ser jag inte filen /bx_Header.html?

Filen är endast synlig i Utvecklarläge. Logga in som AAdmin för att få åtkomst.

Hur är navbaren uppbyggd?

Navbaren består av tre huvudområden: – Vänster ikon & logotyp: menyikon och logotyp – Centrala knappar: huvudnavigering och undermenyer – Ikoner till höger: funktionsikoner som sök, inloggning eller varukorg

Vad betyder placholder (textmärken) i HTML-koden?

Placeholderna ersätts automatiskt vid sparande i CMS. Till exempel styr none synligheten av ett element, medan infogar det faktiska innehållet. Dessa märken kan du konfigurera under CMS ⯈ Webbplats ⯈ Huvudrubrik.

Kan jag ta bort textmärkena?

Ja, om du inte vill använda CMS-huvudalternativen kan du helt enkelt ta bort märken som eller . De är valfria.

Hur kan jag lägga till innehåll ovanför och nedanför navbaren?

Via områdena Navbar-Top och Navbar-Bottom kan du aktivera ytterligare block. Dessa styrs via CMS ⯈ Webbplats ⯈ Huvudrubrik och fylls med HTML-innehåll.

Hur fungerar mobilmenyn?

I telefonläge kommer Mobile-Baren in från högra sidan. Menyinnehållet hämtas automatiskt från skrivbordsmenyn. Du kan infoga ytterligare HTML-block som logotyper ovanför och nedanför.

Hur aktiverar jag sidofältet?

Sidopanelen öppnas i telefonläge från vänster sida. Här kan du även lägga till egna HTML-block. Du styr representationen via CMS ⯈ Webbplats ⯈ Huvudrubrik.

Kan jag bestämma om navigeringen visas i sidopanelen eller mobilmenyn?

Ja, genom layoutalternativen kan du välja om din navigering ska visas i sidopanelen eller mobilmenyn. Du kan dessutom bestämma på vilken sida (vänster/höger) den visas via ikoner.

Hur hanteras menyn i CMS?

Menystrukturen genereras från systemtabellen 00_Menue. Den redigerar du i CMS under Rörelse ⯈ Navigering. Sidor och undersidor skapas automatiskt.

Hur kan jag skapa egna menytillämpningar?

Genom märket  kan du ange en annan tabell som datakälla. Så kan du skapa egna navigeringar eller tillämpningar som kopplas till CMS-navigeringen.

Hur ändrar jag SVG-ikonerna?

SVG-koderna för ikonerna kan du redigera under CMS ⯈ Webbplats ⯈ Huvudrubrik i den nedre delen av utvecklarvyn.

Hur kan jag ändra ordningen på ikonerna i navigeringsfältet?

Ordningen på ikonerna kan du justera med CSS. Även positionen för mobilmenyn (höger eller vänster) kan styras via CSS.

Hur kan jag bestämma vilka knappar som visas i desktop-, mobil- eller sidopanelen?

Genom tabellen 00_Menue kan du ge varje navigering ett CSS-klassnamn. Med dessa klasser styr du via CSS var knappen visas – t.ex. i #bxNavPoints (desktop), #BxMobileBar (mobil) eller #BxSideBar (sidopanel).

Vad gör tilläggsknappen för redigeraren av navigeringen?

Denna knapp visar en ytterligare redigerare för navigationselement i redigeringsläget. Som standard använder den tabellen 00_Menue, men du kan även definiera en annan tabell.

Vilken är den rekommenderade bästa metoden för navigeringen?

Håll alla navigationselement samlade i filen /bx_Header.html. På så sätt förblir desktop-, mobil- och sidomeny synkroniserade och kan snabbt justeras eller bytas vid behov.