bluetonix CMSのナビゲーションエディタ – メニューをカスタマイズ

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

このガイドでは、bluetronix CMSでウェブサイトのナビゲーションをどのようにカスタマイズするかを解説します。ナビゲーションバーの構造からモバイルメニューまで、メニューを最適に構成する方法をステップバイステップで学びます。

保存場所と可視性コード例: /bx_Header.html ナビゲーションバーの構造セクション: ナビバー-トップセクション: ナビバー-ボトムモバイルメニューサイドバーメニューボタンとサブメニュー SVGアイコンの設定 CSS制御と順序ヒントとコツナビゲーションエディター用の追加ボタン FAQ

ナビゲーションエディター: ウェブサイトメニューのカスタマイズ

このドキュメントでは、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).

プレースホルダー（テキストマーク）を理解する

HTMLプレースホルダーは、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.

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アイコンの設定

アイコンのSVGコードはCMS → ウェブサイト → ヘッダーの開発者ビューの下の部分で管理します。

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以外のテーブル）が迅速に処理されます。

FAQ

お客様からよくある質問

bluetronix CMSでNavbarファイルはどこにありますか？

Navbarはメインディレクトリのページ ⯈ /bx_Header.htmlにあります。ここでウェブサイトのナビゲーションに関するすべての変更を行えます。

なぜ/bx_Header.htmlが見えないのですか？

このファイルは開発者モードでのみ表示されます。アクセス権を得るにはAAdminとしてログインしてください。

Navbarの構成はどうなっていますか？

Navbarは3つの主要な領域から成り立っています： – 左のアイコンとロゴ: メニューアイコンとロゴ – 中央ボタン: メインナビゲーションとサブメニュー – 右のアイコン: 検索、ログイン、カートなどの機能アイコン

HTMLコード内のプレースホルダー（テキストマーク）は何を意味しますか？

プレースホルダーはCMSに保存すると自動的に置き換えられます。例えば、noneは要素の可視性を制御し、は実際の内容を挿入します。これらのマークはCMS ⯈ ウェブサイト ⯈ ヘッダーで設定できます。

テキストマークを削除できますか？

はい、CMSヘッダーオプションを使用しない場合は、やなどのマークを簡単に削除できます。これはオプションです。

Navbarの上と下に内容を追加するにはどうすればよいですか？

Navbar-TopとNavbar-Bottomの領域を使って追加のバーを有効にできます。これらはCMS ⯈ ウェブサイト ⯈ ヘッダーで制御され、HTMLコンテンツで埋められます。

モバイルメニューはどのように機能しますか？

電話モードでは、モバイルバーが右側から表示されます。メニュー内容は自動的にデスクトップメニューから引き継がれます。上と下にロゴなどの追加HTMLブロックを挿入できます。

サイドバーを有効にするにはどうしますか？

サイドバーは、電話モードでは左側から開きます。ここでも自分自身のHTMLブロックを追加できます。表示はCMS ⯈ ウェブサイト ⯈ ヘッダーから制御します。

サイドバーまたはモバイルバーにナビゲーションを表示するかどうかを決定できますか？

はい、レイアウトオプションを使用して、ナビゲーションがサイドバーまたはモバイルバーに表示されるかを選択できます。また、アイコンを通じて、どのページ（左/右）に表示されるかを設定できます。

CMSではメニューはどのように管理されていますか？

メニュー構造は、システムテーブル00_Menueから生成されます。このテーブルはサイド ⯈ ナビゲーションでCMS内で編集します。ページとサブページは自動的に作成されます。

自分のメニューテンプレートを作成するにはどうすればよいですか？

マークでを使用することで、別のテーブルをデータソースとして指定できます。これにより、CMSナビゲーションに関連付けられた独自のナビゲーションやテンプレートを作成できます。

SVGアイコンを変更するにはどうすればよいですか？

アイコンのSVGコードは、開発者ビューの下部でCMS ⯈ ウェブサイト ⯈ ヘッダーで編集できます。

Navbarのアイコンの順序をどう変更できますか？

アイコンの順序は、CSSを使って調整できます。モバイルバーの位置（右または左）もCSSで制御できます。

デスクトップ、モバイル、またはサイドバーにどのボタンを表示するかをどう設定しますか？

テーブル00_Menueを介して、各ナビゲーションにCSSクラス名を付けることができます。これらのクラスを使ってCSSでボタンの表示先を制御できます。例：#bxNavPoints（デスクトップ）、#BxMobileBar（モバイル）、または#BxSideBar（サイドバー）。

ナビゲーションエディタの追加ボタンは何をしますか？

このボタンは、編集モードでナビゲーション要素用の追加エディタを表示します。デフォルトで00_Menueを使用しますが、他のテーブルを定義することもできます。

ナビゲーションの推奨されるベストプラクティスは何ですか？

すべてのナビゲーション要素をファイル/bx_Header.htmlにまとめて保持してください。これにより、デスクトップ、モバイル、およびサイドバーのメニューが同期され、必要に応じて迅速に調整または交換が可能です。