Bluetronix CMS 中的导航编辑器 - 自定义菜单

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

在本指南中，你将了解如何在 bluetronix CMS 中自定义网站导航。从导航栏结构到移动菜单——这里一步一步教你如何优化菜单配置。

存储位置与可见性代码示例：<i>/bx_Header.html</i> 导航栏结构部分：顶部导航栏部分：底部导航栏移动菜单侧边栏菜单按钮和子菜单配置SVG图标 CSS控制和顺序提示和技巧导航编辑器的附加按钮常见问题

导航编辑器：网站菜单定制

本文件说明了如何在bluetronix CMS中构建和调整导航栏（网站导航）。你将会了解结构、占位符（文本标记）、移动和侧边栏，以及导航编辑器。

注意：文件/bx_Header.html仅在开发者模式下可见（以AAdmin身份登录）。

保存位置与可见性

默认情况下，导航栏位于主目录下的页面 → /bx_Header.html。关于导航的更改请在此文件中进行。

代码示例：/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).

了解占位符（文本标记）

在CMS中保存时，HTML占位符会自动替换：

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

如果您不想使用CMS头部中的选项，可以在HTML中删除品牌__DB_GB_xxx__和__DB_GB_xxx_Display__。它们是可选的。

菜单上方的附加栏（手机和桌面）会向上滚动出视图范围。真正的导航栏在顶部保持“粘性”可见。这样可以让重要信息（例如“下载应用...”）出现在顶部，而不必永久占用空间。

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

菜单下方的附加栏（手机和桌面）同样会向上滚动。

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

移动菜单

移动条在手机模式下从右侧进入。在加载页面时，JavaScript (/bx_script/BxScript_own_min.js) 会将菜单内容从 bxNavPoints 转移到移动条 (BxMobileBar)。此外，您可以在菜单的上方和下方插入自定义 HTML 块（例如，大型徽标）。


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

侧边栏在手机模式下从左侧滑入。同样在菜单的上方/下方可以设置自定义HTML块（例如，用于大徽标）。可选的，你也可以在侧边栏中显示导航菜单。


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

布局提示：你可以选择移动菜单或侧边栏显示在左右，并通过CMS → 网站 → 页眉更换图标。

菜单按钮和子菜单



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

菜单结构通过UL/LI构建，并从数据库表00_Menue中填充。通过标记，你也可以指定其他表。

在之间是主菜单和子菜单的HTML模板。标记会自动填充子菜单项。

重要：与CMS导航功能的连接通过文本标记建立。这样也可以完全绑定自定义模板。你可以在CMS子菜单中编辑导航（在边缘下）。系统会自动生成页面和目录——无需手动链接。

配置SVG图标

你可以在CMS → 网站 → 头部的开发者视图底部维护图标的SVG代码。

CSS控制和顺序

你可以通过CSS更改图标的顺序。移动条可以根据布局从右侧或左侧显示。

提示和技巧

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.

导航编辑器的附加按钮

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

这样你可以在编辑模式下显示额外的编辑按钮。通过替换00_Menue，可以指定其他导航表。标准导航编辑器总是使用00_Menue。

最佳实践：将所有导航元素集中在/bx_Header.html中。这样可以保持移动条、侧边栏和桌面导航条的一致性，更换数据源（例如其他表格而不是00_Menue）也很简单。

常见问题

客户常问我们的问题

我在哪里可以找到bluetronix CMS中的导航栏文件？

导航栏位于主目录下的页面 ⯈ /bx_Header.html。在这里你可以对网站导航进行所有更改。

为什么我看不到文件/bx_Header.html？

该文件仅在开发者模式下可见。请以AAdmin身份登录以获取访问权限。

导航栏是如何构成的？

导航栏由三个主要部分组成：– 左侧图标和徽标：菜单图标和徽标 – 中心按钮：主导航和子菜单 – 右侧图标：功能图标，如搜索、登录或购物车。

HTML代码中的占位符（文本标记）是什么意思？

占位符在CMS中保存时会自动替换。例如，none控制元素的可见性，而插入实际内容。你可以在CMS ⯈ 网站 ⯈ 头部中配置这些标记。

我可以删除文本标记吗？

可以，如果你不想使用CMS头部选项，可以简单删除像或这样的标记。它们是可选的。

我如何在导航栏上方和下方添加内容？

通过导航栏顶部和导航栏底部区域，你可以启用额外的横幅。这些由CMS ⯈ 网站 ⯈ 头部控制，并用HTML内容填充。

移动菜单是如何工作的？

在手机模式下，移动条从右侧滑入。菜单内容会自动从桌面菜单中继承。你可以在上方和下方插入额外的HTML块，如徽标。

我如何启用侧边栏？

在手机模式下，侧边栏从左侧打开。在这里你也可以添加自己的HTML块。显示方式由CMS ⯈ 网站 ⯈ 头部控制。

我可以决定导航是出现在侧边栏还是移动条吗？

可以，通过布局选项，你可以选择导航是在侧边栏还是移动条中显示。此外，你还可以通过图标设置它出现在页面的哪一侧（左/右）。

在CMS中如何管理菜单？

菜单结构从系统表00_Menue生成。您可以在CMS下的边栏 ⯈ 导航中进行编辑。页面和子页面将自动创建。

如何创建自定义菜单模板？

通过标记，您可以指定其他表作为数据源。这样可以创建与CMS导航关联的自定义导航或模板。

如何更改SVG图标？

您可以在CMS ⯈ 网站 ⯈ 页眉的开发者视图下方编辑图标的SVG代码。

如何更改导航栏中图标的顺序？

您可以通过CSS调整图标的顺序。移动条的位置（右侧或左侧）也可以通过CSS控制。

如何设置哪些按钮出现在桌面、移动或侧边栏？

通过表00_Menue，您可以为每个导航项指定CSS类名。使用这些类，您可以通过CSS控制按钮在哪里显示，例如在#bxNavPoints（桌面）、#BxMobileBar（移动）或#BxSideBar（侧边栏）中。

导航编辑器的附加按钮有什么作用？

此按钮在编辑模式下显示一个额外的导航元素编辑器。默认情况下，它使用表00_Menue，但您也可以定义其他表。

导航的推荐最佳实践是什么？

将所有导航元素保持在文件/bx_Header.html中。这样桌面、移动和侧边栏菜单保持同步，可以快速调整或替换。