Editor navigácie v bluetronix CMS – individuálne prispôsobenie menu

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

V tejto príručke sa dozvieš, ako si prispôsobiť navigáciu svojej webovej stránky v bluetronix CMS. Od štruktúry navbaru po mobilné menu – tu sa krok za krokom naučíš, ako optimálne nakonfigurovať svoje menu.

Umiestnenie & viditeľnosť Príklad kódu: <i>/bx_Header.html</i> Štruktúra navbaru Sekcia: Navbar-Hore Sekcia: Navbar-Dole Mobilné menu Bočný panel Tlačidlá menu & podmenu Konfigurácia SVG ikon Ovládanie CSS & Poradie Tipy & triky Doplnkové tlačidlo pre editor navigácie Často kladené otázky

Editor navigácie: Prispôsobenie menu webovej stránky

Táto dokumentácia ti ukáže, ako je navbar (navigácia webovej stránky) v bluetronix CMS postavená a ako si ju prispôsobiť. Budeš vedený cez štruktúru, miesto (textové značky), mobilnú a bočnú lištu, ako aj editor navigácie.

Upozornenie: Súbor /bx_Header.html je viditeľný iba v režime vývojára (prihlásenie ako Admin).

Umiestnenie & viditeľnosť

Predvolene sa navbar nachádza v hlavnom adresári pod Strany → /bx_Header.html. Zmeny v navigácii vykonáš v tomto súbore.

Príklad kódu: /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).

Pochopenie miestnych značiek (textových značiek)

HTML značky sa pri uložení v CMS automaticky nahrádzajú:

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

Ak ak nechceš využívať možnosti z hlavičky CMS, môžeš odstrániť značky __DB_GB_xxx__ a __DB_GB_xxx_Display__ v HTML. Sú voliteľné.

Doplnková lišta nad menu sa (mobilne aj na desktopu) posúva nahor z viditeľnej oblasti. Skutočný navbar zostáva na hornom okraji „sticky“ viditeľný. Tak môžu byť dôležité informácie (napr. „Stiahnuť aplikáciu …“) zobrazené hore bez trvalého zaberania priestoru.

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

Doplnková lišta pod menu sa (mobilne aj na desktopu) tiež posúva nahor preč.

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

Mobilné menu

Mobilný panel sa v režime telefónu vkladá z pravej strany. Pri načítaní stránky JavaScript (/bx_script/BxScript_own_min.js) preberá obsah menu z bxNavPoints do Mobilného panela (BxMobileBar). Okrem toho môžeš nad a pod menu pridať vlastné HTML bloky (napr. veľké logá).


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

Postranný bar sa v režime telefónu objaví z ľavej strany. Rovnako tu môžeš pridať vlastné HTML bloky nad/pod menu (napr. na veľké logá). Voliteľne je možné zobraziť navigačné menu aj v postrannom bare.


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

Poznámka o rozložení: Môžeš zobraziť buď mobilné menu alebo postranný bar vpravo/vľavo, a ikony vymeniť cez CMS → Webová stránka → Hlavička.

Tlačidlá menu & podmenu



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

Štruktúra menu je postavená pomocou UL/LI a naplnená z databázovej tabuľky 00_Menue. Pomocou značky  môžeš zadať aj inú tabuľku.

Medzi  sú HTML šablóny pre hlavné a podpredmety. Značka  sa automaticky naplní podmenu.

Dôležité: Spojenie s funkciou CMS navigácie sa vytvára cez textové značky. Takto je možné úplne prepojiť aj vlastné šablóny. Navigáciu upravuješ v sub-menu CMS (pod Okraj). Systém automaticky vytvorí stránky a adresáre – manuálne prepojenie odpadá.

Konfigurácia SVG ikon

SVG kód ikon spravuješ v developerskom zobrazení CMS → Webová stránka → Hlavička v dolnej časti.

Ovládanie CSS & Poradie

Poradie ikon môžeš zmeniť pomocou CSS. Mobilný bar sa môže zobraziť sprava alebo zľava v závislosti od rozloženia.

Tipy & triky

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.

Doplnkové tlačidlo pre editor navigácie

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

Týmto sa v editovacom režime zobrazuje ďalšie tlačidlo na úpravy. Nahradením 00_Menue môžeš zadať inú navigačnú tabulku. Štandardný editor navigácie vždy používa 00_Menue.

Najlepšia prax: Drž všetky navigačné prvky sústredené v /bx_Header.html. Tak zostanú mobilný bar, postranný bar a desktopová navigácia konzistentné a výmena zdroja dát (napr. iná tabuľka ako 00_Menue) je rýchla.

Často kladené otázky

čo sa nás zákazníci často pýtajú

Kde nájdem súbor Navbar v bluetronix CMS?

Súbor Navbar sa nachádza v hlavnom adresári pod Strany ⯈ /bx_Header.html. Tam môžeš uskutočniť všetky zmeny v navigácii webovej stránky.

Prečo nevidím súbor /bx_Header.html?

Súbor je viditeľný iba v developerskom režime. Prihlás sa ako Admin, aby si získal prístup.

Ako je štruktúrovaná Navbar?

Navbar sa skladá z troch hlavných oblastí: – Ľavá ikona a logo: ikonka menu a logo – Stredné tlačidlá: hlavná navigácia a podmenu – Ikony vpravo: funkčné ikony ako vyhľadávanie, prihlásenie alebo nákupný košík

Čo znamenajú zástupné symboly (textové značky) v HTML kóde?

Zástupné symboly sa pri uložení v CMS automaticky nahradia. Napríklad none ovláda viditeľnosť prvku, zatiaľ čo vkladá skutočný obsah. Tieto značky môžeš konfigurovať pod CMS ⯈ Webová stránka ⯈ Hlavička.

Môžem odstrániť textové značky?

Áno, ak nechceš používať možnosti hlavičiek CMS, môžeš značky ako alebo jednoducho odstrániť. Sú voliteľné.

Ako môžem pridať obsah nad a pod Navbar?

Cez oblasti Navbar-Top a Navbar-Bottom môžeš aktivovať ďalšie paneli. Tieto sú riadené cez CMS ⯈ Webová stránka ⯈ Hlavička a naplnené HTML obsahom.

Ako funguje mobilné menu?

V režime telefónu sa mobilný bar objaví z pravej strany. Obsah menu sa automaticky preberá z desktopového menu. Môžeš pridať ďalšie HTML bloky ako logá nad a pod.

Ako aktivujem postranný bar?

Bočný panel sa otvára v režime telefónu z ľavej strany. Aj tu môžeš pridávať vlastné bloky HTML. Zobrazenie riadiš cez CMS ⯈ Webstránka ⯈ Hlavička.

Môžem sa rozhodnúť, či sa navigácia zobrazuje v bočnom paneli alebo mobilnej lište?

Áno, prostredníctvom možností rozloženia si môžeš vybrať, či sa tvoja navigácia zobrazuje v bočnom paneli alebo mobilnej lište. Okrem toho môžeš prostredníctvom ikon určiť, na ktorej strane (vľavo/vpravo) sa zobrazuje.

Ako sa spravuje menu v CMS?

Štruktúra menu sa generuje z systémovej tabuľky 00_Menue. Túto môžeš upravovať v CMS pod Okraj ⯈ Navigácia. Stránky a podstránky sa vytvárajú automaticky.

Ako môžem vytvoriť vlastné šablóny menu?

Pomerne cez značku  môžeš zadať inú tabuľku ako zdroj dát. Tak môžeš vytvárať vlastné navigácie alebo šablóny, ktoré sú prepojené s navigáciou v CMS.

Ako zmením SVG ikony?

SVG kódy ikon môžeš upravovať pod CMS ⯈ Webstránka ⯈ Hlavička v dolnej časti pohľadu pre vývojárov.

Ako zmením poradie ikon v navigačnej lište?

Poradie ikon si môžeš prispôsobiť pomocou CSS. Aj pozíciu mobilnej lišty (vpravo alebo vľavo) je možné riadiť pomocou CSS.

Ako môžem určiť, ktoré tlačidlá sa zobrazia na desktopoch, mobilných zariadeniach alebo v bočnom paneli?

Cez tabuľku 00_Menue môžeš každej navigácii priradiť názov CSS triedy. Tieto triedy riadia, kde sa tlačidlo zobrazí – napríklad v #bxNavPoints (desktop), #BxMobileBar (mobilné) alebo #BxSideBar (bočný panel).

Čo robí doplnkové tlačidlo pre editor navigácie?

Toto tlačidlo zobrazuje v režime úprav dodatočný editor pre navigačné prvky. Predvolene využíva tabuľku 00_Menue, ale môžeš tiež definovať inú tabuľku.

Aké sú odporúčané osvedčené postupy pre navigáciu?

Zachovaj všetky navigačné prvky zhromaždené v súbore /bx_Header.html. Tým zostanú desktopové, mobilné a bočné menu synchronizované a dajú sa rýchlo prispôsobiť alebo vymeniť podľa potreby.