ナビゲーション CSSクラス 説明
ここでは、あなたのHTMLスニペットにおいて、どのCSSクラスが何のために使われるかをコンパクトに紹介しています。これにより、レイアウトと動作を迅速に調整できます。
重要： はナビゲーションテーブルのプレースホルダー（例：00_Menue）であり、レンダリング時に独自のクラスに置き換えられます（例：可視性、強調、メニュー項目ごとのアイコン用）。
クラス概要
| クラス | 使用される場所 | 目的 / 意味 | 典型的なインタラクション |
|---|---|---|---|
bx-DesktopHTML1 |
div ナビバーの上 | メインメニューの上のトップバー（例：通知、プロモ、アプリバナー）。 | DBプレースホルダー(none)によって可視性を制御可能。 |
bx-DesktopHTML2 |
div ナビバーの下 | メインメニューの下のボトムバー（追加情報/バッジ）。 | noneによって可視性を制御可能。 |
bx-nav-outer |
nav.bx-navのラッパー |
位置決めのための外部コンテナ（例：スティッキー、影、幅）。 | ページ全体の幅に合ったレイアウトフレーム。 |
bx-nav |
nav メインナビゲーション | 基本のナビバー（グリッド/フレックス、背景、高さ）。 | グローバルナビバーのスタイルとレスポンシブ対応。 |
bx-navbar-left |
ナビバーの左側の列 | メニューアイコン（バーガー）とロゴのエリア。 | .bx-nav-iconと.bx-nav-brandを含む。 |
bx-navbar-center |
ナビバーの中央 | メニュー項目用のコンテナ（UL/LI）およびサブメニュー。 | JSを使用してモバイル/サイドバーを填充する（ソース: #bxNavPoints）。 |
bx-navbar-right |
ナビバーの右側の列 | アイコングループ（検索、ライト/ダーク、ログイン、言語、カート、サイドバー）。 | ボタンはJS関数を呼び出します（例：BlueSearchBar()）。 |
bx-nav-icon |
button / アイコンボタン | すべてのナビバーアイコンに統一されたスタイル。 | トグル用のクリックターゲット（モバイルバー、サイドバー、検索など）。 |
bx-nav-brand |
img ロゴ | ロゴの表示（サイズ、余白）。 | 多くの場合、リンクは/index.htmlに設定されています。 |
bx-nav-item |
li 主メニュー内の項目 | メニュー項目のリスト要素。 | .has-submenuと組み合わせることができます。 |
bx-nav-link |
a メニュー内 | メニューリンクのスタイル（フォント、ホバー、アクティブ状態）。 | DBプレースホルダーを介してターゲット/名前を取得します。 |
has-submenu |
li ドロップダウン付き | サブメニューを持つメニュー項目を示す; ドロップダウンスタイルを有効にします。 | 関連する.bx-navbar-dropdownを開閉します。 |
submenu-toggle |
リンクの横のボタン | サブメニューの折りたたみ/展開のためのコントロール（シェブロンアイコン）。 | 主に大きなスクリーンでのみ表示されます（ユーティリティクラスを参照）。 |
d-none, d-lg-inline |
ボタンのユーティリティクラス | 表示制御（例：非表示→lgでインライン表示）。 | トグルのレスポンシブ動作。 |
bx-menu |
ドロップダウン内のul | サブメニュー項目のリスト。 | ナビゲーションによってDBから提供されます。 |
bx-navbar-dropdown |
ul（ドロップダウンコンテナ） | ドロップダウンパネル（位置、影、アニメーション）。 | ホバー/クリックまたは.submenu-toggleで開きます。 |
bx-dropdown-item |
ドロップダウン内のli | 単一のサブメニュー項目。 | .bx-dropdown-linkを含みます。 |
bx-dropdown-link |
ドロップダウン内のa | ドロップダウン内のリンクスタイル。 | より良い使いやすさのためのホバー/フォーカス状態。 |
bx-mobile-bar |
モバイルメニュー（右側オフキャンバス） | モバイルナビゲーションとオプションのブロック用コンテナ（上/下）. | JSで読み込まれます（ソース：#bxNavPoints）。 |
bx-MobilHTML1, bx-MobilHTML2 |
モバイルバーのブロック | モバイルメニューの上/下にオプションのHTML領域（例：ロゴ）。 | |
bx-side-bar |
サイドナビゲーション（オフキャンバス左） | 代替/追加ナビゲーション用コンテナ. | メニューまたは独自のコンテンツを配置できます. |
bx-SideHTML1, bx-SideHTML2 |
サイドバーのブロック | サイドメニューの上/下にオプションのHTML領域（例：大きなロゴ）。 | |
WKGBAnzDiv |
カートアイコン内のバッジラッパー | 囲むカウンター領域（レイアウト/位置）。 | .WKGBAnzDivInner（数量）を含みます. |
WKGBAnzDivInner |
バッジ内部 | 現在のカート内の数量を表示します. | #WKGBAnz経由でJSで読み込まれます. |
DBからのプレースホルダークラス
| プレースホルダー | 説明 | 例 |
|---|---|---|
|
メニュー項目は、1つまたは複数の独自のクラス（例：only-desktop、highlight、icon-contact）で置き換えられます。 | デスクトップ、モバイル、またはサイドバーごとにボタンの表示/スタイルを制御します。 |
.bx-nav-itemをDB制御のクラスと組み合わせて、#bxNavPoints（デスクトップ）、.bx-mobile-bar、または.bx-side-barで個々のボタンの表示/非表示を調整できます。HTMLコードを変更する必要はありません。
FAQ
お客様からよくある質問
ここでは、ナビゲーションバーのHTML内でどのCSSクラスがレイアウト、動作、および表示に関与しているかを説明します。特定の調整をナビゲーションに行うことができます。
プレースホルダーの意味は何ですか？
このプレースホルダーは、ナビゲーションテーブル（例：00_Menue）で設定した独自のCSSクラスに自動的に置き換わります。これにより、各メニュー項目の表示、ハイライト、およびアイコンを制御します。
ナビバーの上または下にコンテンツを追加するにはどうすればよいですか？
それには、bx-DesktopHTML1（上）およびbx-DesktopHTML2（下）のクラスを使用します。CMS内で、CMS ⯈ ウェブサイト ⯈ ヘッダーから表示/非表示を切り替えることができます。
クラスbx-nav-outerの役割は何ですか？
これはナビゲーションの外部コンテナです。これにより、ナビバーの幅、影、またはスティッキービヘイビアを制御します。
bx-navは何を表していますか？
このクラスは主要なナビゲーション自体を定義します。つまり、ナビバーのレイアウト（例：フレックス/グリッド）、背景色、および高さを指定します。
ナビバーはどのように列に分かれていますか？
ナビバーは3つの領域で構成されています：bx-navbar-left（ロゴ＆メニューアイコン）、bx-navbar-center（メニュー項目）、bx-navbar-right（検索、ログイン、言語、カートなどのアイコン）。
クラスbx-nav-iconは何をしますか？
これはすべてのナビバーアイコンに統一されたスタイリングを提供します。これらのボタンは、Mobile-Bar、Side-Bar、または検索を開くなどの機能を制御します。
メニューリンクをどのようにスタイル設定できますか？
bx-nav-itemを使用してリストアイテムを定義し、bx-nav-linkでリンクのフォント、ホバー、アクティブ状態のスタイルルールを設定します。
サブメニューの制御はどう機能しますか？
クラスhas-submenuを持つメニュー項目にはドロップダウンが含まれています。submenu-toggle（矢印アイコンのボタン）を使用して、これを展開または折りたたむことができます。
ユーティリティクラスd-noneとd-lg-inlineは何を意味しますか？
これらのクラスは、画面サイズに応じて個々の要素の表示を制御します。レスポンシブナビゲーションに最適です。
ドロップダウンメニューはどのように構成されていますか？
ドロップダウンは、bx-navbar-dropdown（コンテナ）から構成され、内部にbx-menu（リスト）があり、各サブポイントのためにbx-dropdown-itemとbx-dropdown-linkが含まれています。
モバイルバーはどのように機能しますか？
bx-mobile-barは、モバイルデバイスで右側にオフキャンバスメニューとして開きます。これは、#bxNavPointsの内容でJSによって充填されます。追加のブロックはbx-MobilHTML1およびbx-MobilHTML2で追加できます。
サイドバーとは何ですか？
bx-side-barは、側面に配置されるオフキャンバスメニューです（通常は左側）。ここに独自のコンテンツやナビゲーション要素を配置し、bx-SideHTML1およびbx-SideHTML2で補完できます。
カートのカウンターはどのように表示されますか？
ラッパーWKGBAnzDivはWKGBAnzDivInnerを含み、これはJS（#WKGBAnz経由）で現在のアイテム数を表示します - 通常はカートアイコンのバッジとして表示されます。
特定の領域でのみボタンを表示するにはどうすればよいですか？
.bx-nav-itemをと組み合わせます。これにより、HTMLコードを変更することなく、#bxNavPoints（デスクトップ）、.bx-mobile-bar、または.bx-side-barにボタンを選択的に表示または非表示にできます。