メニューとナビゲーション

ユーザーが必要な情報を見つけるのに役立つように、ウェブサイトにナビゲーションメニューを含めます。ナビゲーションメニューが配置される場所としては、ウェブサイトのヘッダー、サイドバー、フッターなどがあります。HubSpotは、ユースケースに応じてページにメニューを追加するためのいくつかの組み込みソリューションを提供しますが、必要に応じて独自のメニューを作成することもできます。アカウントには、メニューを作成および管理するための設定ページも含まれており、さまざまなメニューメソッドが参照できます。

**既定のメニュー：**HubSpotには、必要に応じてすぐに使用できる2つの既定のメニュータイプがあります。これらのメニューは、ドラッグ＆ドロップエリアまたはテンプレートのページエディターでモジュールとして追加することも、HubLタグを使用してカスタムモジュールに追加することもできます。
- **メニュー：**ウェブサイトのヘッダーやフッターなど、グローバルナビゲーションで一般的に使用されるもので、既定の標準メニューでは、ナビゲーション設定で構成したメニューを選択し、最大レベル、表示設定、方向などのオプションを使用してさらに構成できます。
- **シンプルメニュー：**ピラーページなどのページ固有のナビゲーションで一般的に使用されるもので、シンプルメニューのモジュールを使用すると、ページレベルでメニューを作成できます。シンプルメニューの項目は、ナビゲーション設定で作成したメニューを参照するのではなく、コンテンツエディターで管理され、標準メニューよりも構成オプションが少なくなります。これにより、コンテンツ作成者はグローバルナビゲーションに影響を与えることなく、必要に応じて特定のページのメニューを更新できます。
**カスタムメニュー：**既定のメニューオプションがニーズに合わない場合は、独自のカスタムソリューションを作成できます。これには、標準メニューとsimple_menu HubLタグを使用して既定のメニューを含むカスタムモジュールを構築することから、menu() HubL関数を使用して、リピーターグループまたはHubDBで完全なカスタムソリューションを構築することまで含まれます。ただし、複雑なカスタムメニューを作成する場合は、エディターのエクスペリエンスを念頭に置く必要があります。多くの場合、カスタムソリューションと直感的な編集エクスペリエンスのバランスを取るために、menu()関数と並行してmenuフィールドとsimple_menuフィールドを使用する方が理にかなっています。

以下では、ページにメニューを含めるさまざまな方法と、HubSpotでナビゲーション設定を管理する方法について詳しく説明します。

ナビゲーション設定

各アカウントには、メニューモジュールとタグで参照するマルチレベルメニューを作成できるように、HubSpotにナビゲーション設定が含まれています。これにより、一連のメニュー商品の信頼できる唯一の情報源が作成されるため、メニューを1回更新するだけで、そのメニューを参照する全てのページを更新できます。必要に応じて多くのメニューを作成でき、各メニューには、クローン作成、削除、名前変更、および変更履歴の表示のオプションが付属しています。 HubSpotでメニューを作成および管理するには、［設定］>［ウェブサイト］>［ナビゲーションメニュー］に移動します。ナビゲーション設定の詳細については、HubSpotのナレッジベースをご覧ください。

HubLでメニューを操作する場合、メニューのIDを参照する必要がある場合があります。これは、メニュー項目がエディターで設定されているため、シンプルなメニューには適用されません。カスタムモジュールを作成する場合、メニューIDを取得する最も簡単な方法は、メニューフィールドを作成することです。このフィールドを使用すると、コンテンツ作成者はドロップダウンメニューからメニューを選択し、メニューIDを返すことができます。メニューIDをハードコードする必要がある場合は、ナビゲーション設定ページでメニューを表示するときにURLからメニューIDを取得できます。

最初にこのページにアクセスするときには、既定のメニューIDはURLに表示されないことに注意してください。既定のメニューのIDを取得するには、別のメニューを選択してから、既定のメニューを再度選択する必要があります。

サイトのヘッダーには長いメインナビゲーションが含まれることがよくありますが、“コンテンツへスキップ”するリンクを設置すると効果的です。これは長いメニューをキーボード操作でスキップする際に役立ちます。

HubLメニュータグ

menuとsimple_menu HubLタグを使用して、カスタムモジュールにメニュー機能を追加します。モジュールにタグを追加すると、ページ上のメニューがレンダリングされます。コンテンツ作成者がページエディターでメニューのオプションを設定できるようにするには、モジュールにメニューまたはシンプルメニューフィールドも含める必要があります。以下では、メニュータグの各タイプについて詳しく説明します。

標準メニュー

HubLメニュータグでは標準的なメニューHTMLが生成され、深さ、アクティブ状態、子項目の有無に関するクラス名も定義されています。メニュータグはカスタムモジュール内で使用することが可能で、メインナビゲーションやサイドバーナビゲーションのナビゲーションメニューを簡単に作成できます。このタグには、メニューIDを指定する必要があります。

{% menu "menu" %}
{% menu "my_menu" id=456, site_map_name='Default', overrideable=False, root_type='site_root', flyouts='true', max_levels='2', flow='horizontal', label='Advanced Menu' %}

シンプルメニュー

シンプルメニュータグもメニュータグと同様に機能し、深さ、アクティブ状態、子項目の有無に関するクラス名を備えた標準的なメニューHTMLが生成されます。相違点として、このタグにはメニューIDではなくメニュー構造のディクショナリー（辞書型）が渡されることを想定しています。これが有用なのは、ナビゲーション設定を使う代わりに、モジュールのフィールドによってメニュー構造を決める場合です。例えば、ピラーページの目次にこのタイプのモジュールを使用することができます。

{% simple_menu menu_tree=[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}] %}

既定のメニューモジュール

HubSpotには、コード化されたテンプレートに追加できる既定のモジュールが用意されています。また、テンプレートにドラッグ＆ドロップエリアが含まれている場合は、ページエディターを介してページを追加できます。各モジュールには異なる編集エクスペリエンスがあり、標準メニューにはシンプルメニューよりも多くの設定オプションがあります。モジュールをネストさせることはできないので、他のモジュール内にこれらのモジュールを入れることはできません。代わりにメニュータグまたはシンプルメニュータグを使用してください。

{% module "main_nav" path="@hubspot/menu", label="Menu" id="123456" %}

{% module "menu" path="@hubspot/simple_menu", label="Simple Menu" menu_tree=[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}] %}

標準メニューのマークアップ

既定のメニューモジュールは、それぞれのHubLメニュータグ（menuとsimple_menu）を使用して標準メニューHTMLを生成します。他のHubSpotモジュールと同様に、メニューモジュールはモジュールラッパーマークアップで囲まれています。これらのdivタグとspanタグにより、コンテンツエディターでモジュールを編集できるようになります。メニューモジュールとシンプルメニューモジュールのメニューマークアップは、ラッパーとメニューコンテナーに適用される一部のクラスを除いて同じです。

<div
  id="hs_cos_wrapper_widget_1711642118872"
  class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module widget-type-menu"
  style=""
  data-hs-cos-general-type="widget"
  data-hs-cos-type="module"
>
  <span
    id="hs_cos_wrapper_widget_1711642118872_"
    class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_menu"
    style=""
    data-hs-cos-general-type="widget"
    data-hs-cos-type="menu"
  >
    <div
      id="hs_menu_wrapper_widget_1711642118872_"
      class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal"
      role="navigation"
      data-sitemap-name="default"
      data-menu-id="162449947934"
      aria-label="Navigation Menu"
    >
      <ul role="menu">
        <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="none">
          <a
            href="https://developers.hubspot.jp/docsjavascript:;"
            aria-haspopup="true"
            aria-expanded="false"
            role="menuitem"
            >Menu item 1</a
          >
          <ul role="menu" class="hs-menu-children-wrapper">
            <li class="hs-menu-item hs-menu-depth-2" role="none">
              <a href="https://developers.hubspot.jp/docs//freecrmtest.hubspotpagebuilder.com/test" role="menuitem"
                >A</a
              >
            </li>
            <li class="hs-menu-item hs-menu-depth-2" role="none">
              <a href="https://www.wikipedia.org/" role="menuitem">B</a>
            </li>
          </ul>
        </li>
        <li class="hs-menu-item hs-menu-depth-1 hs-item-has-children" role="none">
          <a
            href="https://developers.hubspot.jp/docsjavascript:;"
            aria-haspopup="true"
            aria-expanded="false"
            role="menuitem"
            >Menu item 2</a
          >
          <ul role="menu" class="hs-menu-children-wrapper">
            <li class="hs-menu-item hs-menu-depth-2" role="none">
              <a href="https://developers.hubspot.jp/docs//freecrmtest.hubspotpagebuilder.com/test" role="menuitem"
                >A</a
              >
            </li>
            <li class="hs-menu-item hs-menu-depth-2" role="none">
              <a href="https://www.hubspot.com/new-page" role="menuitem">B</a>
            </li>
            <li class="hs-menu-item hs-menu-depth-2" role="none">
              <a href="https://www.hubspot.com/blah" role="menuitem">C</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </span>
</div>

上記のように、実際のメニューは、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`に追加されます。

メニューのスタイリングを開始するために、メニュータグと既定のメニューモジュールのスタイルを設定するために使用できるCSSセレクターの例を以下に示します。

/* Menus */
.hs-menu-wrapper ul {
  /* Targets all unordered lists within HubSpot menus */
}

/* Horizontal Menu
   ========================================================================== */

.hs-menu-wrapper.hs-menu-flow-horizontal ul {
  /* Targets all unordered lists within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul li {
  /* Targets all list items within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul li a {
  /* Targets all links within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul {
  /* Targets the top-level unordered list within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
  /* Targets top-level list items within the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
  /* Targets top-level list links within the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children {
  /* Targets list items with children with the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
  /* Targets second-level unordered lists when flyouts are enabled (for styling dropdowns) */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
  /* Targets links within second-level unordered lists  */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts
  > ul
  li.hs-item-has-children
  ul.hs-menu-children-wrapper
  li.hs-item-has-children
  ul.hs-menu-children-wrapper {
  /* Targets third-level unordered lists (for styling dropdowns)*/
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper {
  /* Targets second-level unordered list when top-level menu item is hovered (use to reveal dropdowns) */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children.active-branch {
  /* Targets top-level active branch unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper {
  /* Targets second-level unordered list within active branch */
}
.hs-menu-wrapper.hs-menu-flow-horizontal li.active a {
  /* Targets the link within the active list item */
}

/* Vertical Menu
   ========================================================================== */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  /* Targets all unordered lists within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical ul li a {
  /* Targets all list items within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical ul li a {
  /* Targets all links within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul {
  /* Targets the top-level unordered list within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-menu-depth-1 > a {
  /* Targets top-level links in vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children {
  /* Targets top-level list items with children */
}

/* No flyouts
   ========================================================================== */
.hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts .hs-menu-children-wrapper {
  /* Targets child menus when flyouts are disabled */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.no-flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
  /* Targets second-level child menus when flyouts are disabled */
}

menu()関数を使用すると、完全にカスタマイズされたメニュー構造を作成できます。そこから返される1つのオブジェクトを反復処理するとメニューを生成できます。メニュー項目用のプロパティーが多数提供されています。メニュー関数を使用する場合は、メニューの構造、スタイル設定、メニューのアクセスに関する責任があります。

{% set node = menu(987) %}
{% for child in node.children %}
	{{ child.label }}<br>
{% endfor %}

{% set default_node = menu("default") %}
{% for child in default_node.children %}
	{{ child.label }}<br>
{% endfor %}

HubSpot CMSテーマボイラープレートには、menu()関数を使って構築したサンプルメニューモジュールが含まれています。実際のニーズに合わせて変更することで、複雑なメニューを作成できます。

Start Building

Reference

Best Practices

Marketplace

Versions & Deprecations

メニューとナビゲーション

ナビゲーション設定

HubLメニュータグ

標準メニュー

シンプルメニュー

既定のメニューモジュール

標準メニューのマークアップ

標準メニューのスタイリング

HubL menu()関数

​ナビゲーション設定

​HubLメニュータグ

​標準メニュー

​シンプルメニュー

​既定のメニューモジュール

​標準メニューのマークアップ

​標準メニューのスタイリング

​HubL menu()関数

ナビゲーション設定

HubLメニュータグ

標準メニュー

シンプルメニュー

既定のメニューモジュール

標準メニューのマークアップ

標準メニューのスタイリング

HubL menu()関数