Editor navigace v bluetronix CMS – přizpůsobení menu

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

V tomto návodu se dozvíš, jak si individuálně přizpůsobit navigaci své webové stránky v bluetronix CMS. Od struktury navigační lišty až po mobilní menu – zde se naučíš krok za krokem, jak optimálně konfigurovat své menu.

Umístění & viditelnost Příklad kódu: <i>/bx_Header.html</i> Struktura navigační lišty Sekce: Horní navigační lišta Sekce: Dolní navigační lišta Mobilní menu Postranní lišta Tlačítka menu & podmenu Konfigurace SVG ikon Ovládání CSS & pořadí Tipy & triky Doplňkové tlačítko pro editor navigace Často kladené otázky

Editor navigace: vlastní přizpůsobení menu webových stránek

Tato dokumentace ti ukáže, jak je strukturována navigační lišta (navigace na webu) v bluetronix CMS a jak ji přizpůsobit. Budeš proveden strukturou, zástupnými značkami (Textovými značkami), mobilním a postranním menu a také editorem navigace.

Poznámka: Soubor /bx_Header.html je viditelný pouze v režimu vývojáře (přihlášení jako AAdmin).

Umístění & viditelnost

Standardně se navigační lišta nachází v hlavním adresáři pod Stránky → /bx_Header.html. Změny v navigaci provádíš v tomto souboru.

Pří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).

Porozumění zástupným značkám (Textovým značkám)

HTML zástupné značky jsou při ukládání v CMS automaticky nahrazeny:

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

Pokud nechceš využívat možnosti z hlavičky CMS, můžeš odstranit značky __DB_GB_xxx__ a __DB_GB_xxx_Display__ v HTML. Jsou volitelné.

Doplňková lišta nad menu se posouvá (telefon & desktop) vzhůru mimo viditelnost. Samotná navigační lišta zůstává „sticky“ viditelná na horním okraji. Tak mohou důležité informace (např. „Stáhnout aplikaci …“) objevovat nahoře, aniž by trvale blokovaly místo.

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

Doplňková lišta pod menu se také posouvá (telefon & desktop) vzhůru.

__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í lišta se v režimu telefonu objeví z pravé strany. Při načítání stránky převzme JavaScript (/bx_script/BxScript_own_min.js) obsah menu z bxNavPoints do mobilní lišty (BxMobileBar). Navíc můžeš nad a pod menu vložit vlastní HTML bloky (např. velké logo).


<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í lišta se v režimu telefonu zobrazuje z levé strany. I zde můžeš nad/pod menu umístit vlastní HTML bloky (např. pro velká loga). Volitelně lze navigační menu také zobrazit v postranní liště.


<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 k rozložení: Můžeš volitelně zobrazit mobilní menu nebo postranní lištu vpravo/vlevo a vyměnit ikony přes CMS → Webová stránka → Záhlaví.

Tlačítka 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>

Struktura menu se vytváří pomocí UL/LI a je naplněna z databázové tabulky 00_Menue. Pomocí značky  můžeš uvést i jinou tabulku.

Mezi  se nacházejí HTML šablony pro hlavní a podřízené položky. Značka  bude automaticky naplněna položkami podmenu.

Důležité: Spojení s CMS navigační funkcí vzniká prostřednictvím textových značek. Takto je možné plně připojit i Custom Templates. Navigaci upravíš v podmenu CMS (pod Okraj). Systém automaticky vytváří stránky a adresáře – ruční propojování odpadá.

Konfigurace SVG ikon

SVG kód ikon spravuješ v režimu vývojáře v CMS → Webová stránka → Záhlaví ve spodní části.

Ovládání CSS & pořadí

Pořadí ikon můžeš změnit pomocí CSS. Mobilní lišta se dá podle rozložení zobrazit vpravo nebo vlevo.

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.

Doplňkové tlačítko pro editor navigace

<!-- 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 se v editačním režimu zobrazuje další tlačítko pro úpravy. Pomocí nahrazení 00_Menue můžeš uvést jinou navigační tabulku. Standardní navigační editor vždy používá 00_Menue.

Nejlepší praxe: Udržuj všechny navigační prvky soustředěné v /bx_Header.html. Tím zůstávají mobilní lišta, postranní lišta a desktopová navigační lišta konzistentní a výměna datového zdroje (např. jiná tabulka než 00_Menue) je rychlá.

Často kladené otázky

co se nás zákazníci často ptají

Kde najdu soubor Navbar v bluetronix CMS?

Soubor Navbar se nachází v hlavním adresáři pod Stránky ⯈ /bx_Header.html. Zde můžeš provést všechny změny v navigaci webové stránky.

Proč nevidím soubor /bx_Header.html?

Soubor je viditelný pouze v režimu vývojáře. Přihlaš se jako AAdmin, aby sis získal přístup.

Jak je Navbar strukturovaný?

Navbar se skládá ze tří hlavních oblastí: – Levá ikona a logo: ikona menu a logo – Centrální tlačítka: hlavní navigace a podmenu – Ikony vpravo: funkční ikony jako hledání, přihlášení nebo košík

Co znamenají zástupné symboly (textové značky) v HTML kódu?

Zástupné symboly se při ukládání v CMS automaticky nahrazují. Například none řídí viditelnost prvku, zatímco vkládá skutečný obsah. Tyto značky můžeš konfigurovat pod CMS ⯈ Webová stránka ⯈ Záhlaví.

Mohu odstranit textové značky?

Ano, pokud nechceš používat možnosti CMS záhlaví, můžeš značky jako nebo jednoduše smazat. Jsou volitelné.

Jak mohu přidat obsah nad a pod Navbar?

Pomocí oblastí Navbar-Top a Navbar-Bottom můžeš aktivovat další lišty. Tyto se řídí přes CMS ⯈ Webová stránka ⯈ Záhlaví a jsou vyplněny HTML obsahem.

Jak funguje mobilní menu?

V režimu telefonu se mobilní lišta zobrazuje z pravé strany. Obsah menu se automaticky přebírá z desktopového menu. Můžeš nad a pod vložit další HTML bloky, jako jsou loga.

Jak aktivuji postranní lištu?

Postranní panel se v mobilním režimu otevírá z levé strany. Zde můžeš také přidávat vlastní HTML bloky. Zobrazení ovládáš přes CMS ⯈ Webová stránka ⯈ Záhlaví.

Mohu rozhodnout, zda se navigace zobrazí v postranním panelu nebo mobilním panelu?

Ano, pomocí možností rozložení si můžeš vybrat, zda se tvoje navigace zobrazí v postranním panelu nebo mobilním panelu. Také můžeš pomocí ikon určit, na které straně (levé/pravé) se zobrazí.

Jak se spravuje menu v CMS?

Struktura menu se generuje z systémové tabulky 00_Menue. Tu můžeš upravit v CMS pod Okraj ⯈ Navigace. Stránky a podstránky se automaticky vytvářejí.

Jak mohu vytvořit vlastní šablony menu?

Pomocí značky  můžeš uvést jinou tabulku jako zdroj dat. Tak můžeš vytvořit vlastní navigace nebo šablony, které jsou propojeny s navigací CMS.

Jak mohu změnit SVG ikony?

Kódy SVG ikon můžeš upravit v dolní části vývojářského pohledu pod CMS ⯈ Webová stránka ⯈ Záhlaví.

Jak mohu změnit pořadí ikon v navigačním panelu?

Pořadí ikon můžeš přizpůsobit pomocí CSS. Také pozici mobilního panelu (vpravo nebo vlevo) lze řídit pomocí CSS.

Jak mohu určit, které tlačítka se zobrazují na desktopu, mobilu nebo v postranním panelu?

Pomocí tabulky 00_Menue můžeš každé navigaci přiřadit jméno CSS třídy. S těmito třídami řídíš pomocí CSS, kde se tlačítko zobrazuje – např. v #bxNavPoints (desktopy), #BxMobileBar (mobilní) nebo #BxSideBar (postranní panel).

Co dělá doplňkové tlačítko pro editor navigace?

Toto tlačítko v režimu úprav zobrazuje další editor pro navigační prvky. Standardně používá tabulku 00_Menue, ale můžeš také definovat jinou tabulku.

Jaká je doporučená osvědčená praxe pro navigaci?

Udržuj všechny navigační prvky shromážděné v souboru /bx_Header.html. Tak zůstává desktopové, mobilní a postranní menu synchronizované a mohou být v případě potřeby rychle upraveny nebo vyměněny.