Navigációs szerkesztő a bluetronix CMS-ben – menü egyéni testreszabása

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

Ebben az útmutatóban megtudhatod, hogyan állíthatod egyénileg a weboldalad navigációját a bluetronix CMS-ben. A Navbar szerkezetétől a mobil menüig – lépésről lépésre megtanulod, hogyan konfigurálhatod optimálisan a menüdet.

Mentési hely & láthatóság Kódpélda: <i>/bx_Header.html</i> Navbar felépítése Szóköz: Navbar-Top Szóköz: Navbar-Bottom Mobil menü Oldalsáv Menü-gombok & almennü SVG-ikonok konfigurálása CSS-vezérlés & sorrend Tippek & trükkök További gomb a navigációs szerkesztőhöz GYIK

Navigációs szerkesztő: Weboldal menü testreszabása

Ez a dokumentáció bemutatja, hogyan van felépítve a Navbar (weboldal navigáció) a bluetronix CMS-ben, és hogyan állíthatod azt be. Megismerkedsz a struktúrával, helyettesítőkkel (szövegjelölők), mobil- és oldalsávval, valamint a navigációs szerkesztővel.

Megjegyzés: A /bx_Header.html fájl csak fejlesztői módban látható (bejelentkezés AAdminként).

Mentési hely & láthatóság

Alapértelmezés szerint a Navbar a fő könyvtárban található Oldalak → /bx_Header.html alatt. A navigáción végzett módosításokat ebben a fájlban hajthatod végre.

Kódpélda: /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).

Helyettesítők (szövegjelölők) megértése

A HTML helyettesítők automatikusan betöltődnek a CMS-ben történő mentéskor:

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

Ha nem szeretnéd használni a CMS - fejléc opcióit, eltávolíthatod a __DB_GB_xxx__ és __DB_GB_xxx_Display__ márkákat a HTML-ből. Ezek opcionálisak.

A menü feletti kiegészítő sáv felfelé csúszik (telefon és asztali számítógép), így nem jelenik meg a látómezőben. A tényleges Navbar a felső szélen "sticky" módon látható marad. Így fontos információk (pl. "Alkalmazás letöltése …") jelenhetnek meg anélkül, hogy tartósan helyet foglalnának.

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

A menü alatti kiegészítő sáv is felfelé csúszik (telefon és asztali számítógép).

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

Mobil menü

A mobil bár a telefon módban a jobb oldalról érkezik. Az oldal betöltésekor a JavaScript (/bx_script/BxScript_own_min.js) a menü tartalmát átváltja a Mobile-Bar (BxMobileBar) számára a bxNavPoints segítségével. Továbbá, a menü fölött és alatt saját HTML-blokkokat is hozzáadhatsz (pl. nagy logókat).


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

A Side-bar a telefon módban a bal oldalról érkezik. Itt is saját HTML-blokkokat helyezhetsz el a menü fölött vagy alatt (pl. nagy logókhoz). Opcionálisan a navigációs menü a sidebáron is megjeleníthető.


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

Elrendezés-megjegyzés: Választhatsz, hogy a Mobil-menüt vagy a Side-bar-t jobbra/balra jelenítsd meg, és az ikonokat az CMS → Weboldal → Fejléc menüpont alatt cserélheted le.

Menü-gombok & almennü



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

A menüstruktúra UL/LI szerint épül fel, és az 00_Menue adatbázis-táblából töltődik be. A  jellel más táblát is megadhatsz.

A  között találhatók a fő- és alkategóriák HTML-sablonjai. A  jel automatikusan kitöltődik az almenü bejegyzéseivel.

Fontos: A CMS navigációs funkcióhoz való kapcsolat a szövegjeleken keresztül jön létre. Így a Custom Templates is teljesen integrálhatóak. A navigációt a CMS-almenüben szerkesztheted (a Margón belül). Az oldalakat és mappákat a rendszer automatikusan létrehozza – a manuális linkelés elmarad.

SVG-ikonok konfigurálása

Az ikonok SVG-kódját a CMS → Weboldal → Fejléc fejlesztői nézetének alsó részén rögzítheted.

CSS-vezérlés & sorrend

Az ikonok sorrendjét CSS-sel változtathatod meg. A Mobil bár a kiválasztott elrendezéstől függően jobbra vagy balra is megjeleníthető.

Tippek & trükkök

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.

További gomb a navigációs szerkesztőhöz

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

Ezzel a szerkesztési módban egy további szerkesztőgombot lehet megjeleníteni. A 00_Menue helyettesítésével más navigációs táblát adhatsz meg. A szabványos navigációs szerkesztő mindig 00_Menue-t használ.

Legjobb gyakorlat: Tartsd az összes navigációs elemet /bx_Header.html összesítve. Így a Mobil bár, Side-bar és asztali navbar konzisztens marad, és az adatforrás cseréje (pl. más táblázat, mint 00_Menue) gyorsan elvégezhető.

GYIK

Miket kérdeznek tőlünk gyakran az ügyfelek?

Hol találom a Navbar fájlt a bluetronix CMS-ben?

A Navbar a fő könyvtárban található Oldalak ⯈ /bx_Header.html alatt. Itt végezheted el az összes változtatást a weboldal navigációján.

Miért nem látom a /bx_Header.html fájlt?

A fájl csak a Fejlesztői módban látható. Be kell jelentkezned AAdmin néven a hozzáféréshez.

Hogyan van felépítve a Navbar?

A Navbar három fő területből áll: – Bal Ikon & Logo: Menü-ikona és logó – Középső Gombok: Fő navigáció és almenük – Jobb Ikonok: Funkcióikonnak, mint keresés, bejelentkezés vagy bevásárlókosár.

Mit jelentenek a helyettesítők (szövegjelek) az HTML kódban?

A helyettesítők automatikusan helyettesítődnek elmentéskor a CMS-ben. Például a none a láthatóságot irányítja, míg a az aktuális tartalmat helyettesíti. Ezeket a jeleket a CMS ⯈ Weboldal ⯈ Fejléc alatt állíthatod be.

Eltávolíthatom a szövegjeleket?

Igen, ha nem szeretnéd használni a CMS fejléc opciókat, egyszerűen törölheted a jeleket, mint például vagy . Ezek opcionálisak.

Hogyan tudok tartalmat hozzáadni a Navbar fölé és alá?

A Navbar-Top és Navbar-Bottom területeken keresztül aktiválhatsz további sávokat. Ezeket a CMS ⯈ Weboldal ⯈ Fejléc alatt vezérelheted és HTML-tartalommal töltheted ki.

Hogyan működik a Mobil Menü?

A telefon módban a Mobil bár a jobb oldalról érkezik. A menü tartalma automatikusan átkerül az asztali menüből. A menü fölé és alá további HTML-blokkokat, például logókat is beilleszthetsz.

Hogyan aktiválom a Sidebar-t?

A sidebar a telefonos nézetben a bal oldalról nyílik meg. Itt saját HTML-blokkokat is hozzáadhatsz. A megjelenítést a CMS ⯈ Weboldal ⯈ Fejléc menüpont alatt vezérelheted.

Dönthetek arról, hogy a navigáció a sidebarban vagy a mobil sávban jelenik meg?

Igen, a elrendezési lehetőségeken keresztül választhatod ki, hogy a navigáció a sidebarban vagy a mobil sávban jelenjen meg. Emellett az ikonokon keresztül beállíthatod, hogy melyik oldalon (bal/jobb) jelenjen meg.

Hogyan kezelhető a menü a CMS-ben?

A menüstruktúra a 00_Menue rendszer táblázatból generálódik. Ezt a CMS-ben a Szél ⯈ Navigáció menüpont alatt szerkesztheted. Az oldalak és alsóoldalak automatikusan létrejönnek.

Hogyan készíthetek saját menüterveket?

A  jelölő segítségével megadhatsz más táblázatot adatforrásként. Így saját navigációkat vagy sablonokat hozhatsz létre, amelyek kapcsolódnak a CMS navigációhoz.

Hogyan változtathatom meg az SVG ikonokat?

Az ikonok SVG kódjait a CMS ⯈ Weboldal ⯈ Fejléc fejlesztői nézetének alsó részében szerkesztheted.

Hogyan változtathatom meg az ikonok sorrendjét a navigációs sávban?

Az ikonok sorrendjét CSS segítségével állíthatod be. A mobil sáv helyzete (jobb vagy bal) is CSS segítségével vezérelhető.

Hogyan állíthatom be, hogy mely gombok jelenjenek meg asztali-, mobil- vagy sidebar nézetben?

A 00_Menue táblázat segítségével a navigációdhoz CSS-osztálynevet adhatsz. Ezekkel az osztályokkal CSS-en keresztül irányíthatod, hol jelenik meg a gomb – például a #bxNavPoints-ban (asztali), a #BxMobileBar-ban (mobil) vagy a #BxSideBar-ban (sidebar).

Mit csinál a kiegészítő gomb a navigációs szerkesztőhöz?

Ez a gomb egy további szerkesztőt jelenít meg a navigációs elemekhez a szerkesztési módban. Alapértelmezés szerint a 00_Menue táblázatot használja, de megadhatsz más táblázatot is.

Mi a javasolt legjobb gyakorlat a navigációhoz?

Tartsd a navigációs elemeket egy fájlban, a /bx_Header.html fájlban. Így az asztali, mobil és sidebar menük szinkronban maradnak, és szükség esetén gyorsan módosíthatók vagy kicserélhetők.