HubSpotには、このようなメニューを簡単に作成して管理するためのツールが組み込まれています。また、コード面でもメニュー表示の方法が多数用意されているので、実際のウェブサイトに最も適したソリューションを選ぶことができます。
menu()
関数と並行してmenu
フィールドとsimple_menu
フィールドを使用する方が理にかなっています。
menu
とsimple_menu
HubLタグを使用して、カスタムモジュールにメニュー機能を追加します。モジュールにタグを追加すると、ページ上のメニューがレンダリングされます。コンテンツ作成者がページエディターでメニューのオプションを設定できるようにするには、モジュールにメニューまたはシンプル メニュー フィールドも含める必要があります。
以下では、メニュータグの各タイプについて詳しく説明します。
menu
とsimple_menu
)を使用して標準メニューHTMLを生成します。他のHubSpotモジュールと同様に、メニューモジュールはモジュール ラッパー マークアップで囲まれています。これらのdiv
タグとspan
タグにより、コンテンツエディターでモジュールを編集できるようになります。メニューモジュールとシンプル メニュー モジュールのメニューマークアップは、ラッパーとメニューコンテナーに適用される一部のクラスを除いて同じです。
hs-menu-wrapper
クラスのdiv
でラップされたul
としてレンダリングされます。このラッパーには、フライアウトの有効化など、ページエディターでのモジュールの構成方法に基づいて追加のクラスがあります。これらの設定によって追加されるクラスの詳細については、以下をご覧ください。
ul
内の各メニュー項目は、li
でラップされたa
タグです。li
タグには、メニューツリー内の項目の深さを示すクラスがあります(例:hs-menu-depth-1
)。メニュー項目にネストされた子項目が含まれている場合、対応するli
はhs-item-has-children
の追加クラスを持ちます。子メニューは、クラスhs-menu-children-wrapper
を使用してネストされたul
としてレンダリングされます。
メニュー ツリーに含まれるページを訪問すると、クラスactive-branch
が親li
項目に追加され、クラス**active
**がそのページの特定のli
項目に追加されます。
li
としてレンダリングされるように制御できます。ただし、方向とフライアウトのオプションは、メニューラッパーのdiv
に追加されたCSSセレクターに影響します。CSSでこれらのセレクターを対象にすることができます。
div
に追加されるクラスの詳細について説明します。
クラス | 説明 |
---|---|
hs-menu-flow-horizontal | メニューが水平方向に設定されている場合、ラッパーのdiv に追加されます。 |
hs-menu-flow-vertical | メニューが垂直方向に設定されている場合、ラッパーのdiv に追加されます。 |
flyouts | [フライアウトを有効にする]が選択されている場合、ラッパーのdiv に追加されます。 |
no-flyouts | [フライアウトを有効にする]が選択されていない場合、ラッパーのdiv に追加されます。 |