> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt > Use this file to discover all available pages before exploring further. # メニューとナビゲーション > HubSpotには、このようなメニューを簡単に作成して管理するためのツールが組み込まれています。また、コード面でもメニュー表示の方法が多数用意されているので、実際のウェブサイトに最も適したソリューションを選ぶことができます。 ユーザーが必要な情報を見つけるのに役立つように、ウェブサイトにナビゲーションメニューを含めます。ナビゲーションメニューが配置される場所としては、ウェブサイトのヘッダー、サイドバー、フッターなどがあります。HubSpotは、ユースケースに応じてページにメニューを追加するためのいくつかの組み込みソリューションを提供しますが、必要に応じて独自のメニューを作成することもできます。アカウントには、[メニューを作成および管理するための設定ページ](#navigation-settings)も含まれており、さまざまなメニューメソッドが参照できます。 * \*\*既定のメニュー：\*\*HubSpotには、必要に応じてすぐに使用できる2つの既定のメニュータイプがあります。これらのメニューは、[ドラッグ＆ドロップエリア](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview)またはテンプレートのページエディターでモジュールとして追加することも、[HubLタグ](#menu-hubl-tags)を使用してカスタムモジュールに追加することもできます。 * \*\*メニュー：\*\*ウェブサイトのヘッダーやフッターなど、グローバルナビゲーションで一般的に使用されるもので、既定の標準メニューでは、ナビゲーション設定で構成したメニューを選択し、最大レベル、表示設定、方向などのオプションを使用してさらに構成できます。 * \*\*シンプルメニュー：\*\*ピラーページなどのページ固有のナビゲーションで一般的に使用されるもので、シンプルメニューのモジュールを使用すると、ページレベルでメニューを作成できます。シンプルメニューの項目は、ナビゲーション設定で作成したメニューを参照するのではなく、コンテンツエディターで管理され、標準メニューよりも構成オプションが少なくなります。これにより、コンテンツ作成者はグローバルナビゲーションに影響を与えることなく、必要に応じて特定のページのメニューを更新できます。 * \*\*カスタムメニュー：\*\*既定のメニューオプションがニーズに合わない場合は、独自のカスタムソリューションを作成できます。これには、標準[メニューとsimple\_menu HubLタグ](#menu-hubl-tags)を使用して既定のメニューを含むカスタムモジュールを構築することから、[menu() HubL関数](#menu-hubl-function)を使用して、リピーターグループまたはHubDBで完全なカスタムソリューションを構築することまで含まれます。ただし、複雑なカスタムメニューを作成する場合は、エディターのエクスペリエンスを念頭に置く必要があります。多くの場合、カスタムソリューションと直感的な編集エクスペリエンスのバランスを取るために、`menu()`関数と並行して`menu`フィールドと`simple_menu`フィールドを使用する方が理にかなっています。 以下では、ページにメニューを含めるさまざまな方法と、HubSpotでナビゲーション設定を管理する方法について詳しく説明します。 ## ナビゲーション設定 各アカウントには、メニューモジュールとタグで参照するマルチレベルメニューを作成できるように、HubSpotに[ナビゲーション設定](https://knowledge.hubspot.com/cos-general/set-up-your-site-s-navigation-menus)が含まれています。これにより、一連のメニュー商品の信頼できる唯一の情報源が作成されるため、メニューを1回更新するだけで、そのメニューを参照する全てのページを更新できます。必要に応じて多くのメニューを作成でき、各メニューには、クローン作成、削除、名前変更、および変更履歴の表示のオプションが付属しています。 HubSpotでメニューを作成および管理するには、［設定］>［ウェブサイト］>［ナビゲーションメニュー］に移動します。ナビゲーション設定の詳細については、[HubSpotのナレッジベース](https://knowledge.hubspot.com/website-pages/set-up-your-site-s-navigation-menus)をご覧ください。 ナビゲーション設定エリア HubLでメニューを操作する場合、メニューのIDを参照する必要がある場合があります。これは、メニュー項目がエディターで設定されているため、シンプルなメニューには適用されません。 カスタムモジュールを作成する場合、メニューIDを取得する最も簡単な方法は、メニューフィールドを作成することです。このフィールドを使用すると、コンテンツ作成者はドロップダウンメニューからメニューを選択し、メニューIDを返すことができます。メニューIDをハードコードする必要がある場合は、ナビゲーション設定ページでメニューを表示するときにURLからメニューIDを取得できます。 menu-id-in-url 最初にこのページにアクセスするときには、既定のメニューIDはURLに表示されないことに注意してください。既定のメニューのIDを取得するには、別のメニューを選択してから、既定のメニューを再度選択する必要があります。 サイトのヘッダーには長いメインナビゲーションが含まれることがよくありますが、["コンテンツへスキップ"するリンク](/docs/cms/best-practices/improve-existing-sites/accessibility#adding-a-skip-to-content-link)を設置すると効果的です。これは長いメニューをキーボード操作でスキップする際に役立ちます。 ## HubLメニュータグ `menu`と`simple_menu` HubLタグを使用して、カスタムモジュールにメニュー機能を追加します。モジュールにタグを追加すると、ページ上のメニューがレンダリングされます。コンテンツ作成者がページエディターでメニューのオプションを設定できるようにするには、モジュールに[メニュー](/docs/cms/reference/fields/module-theme-fields#form)または[シンプル メニュー フィールド](/docs/cms/reference/fields/module-theme-fields#simple-menu)も含める必要があります。 以下では、メニュータグの各タイプについて詳しく説明します。 ### 標準メニュー [HubLメニュータグ](/docs/cms/reference/hubl/tags/standard-tags#menu)では標準的なメニューHTMLが生成され、深さ、アクティブ状態、子項目の有無に関するクラス名も定義されています。メニュータグは[カスタムモジュール](https://developers.hubspot.jp/docs/guides/cms/content/modules/overview)内で使用することが可能で、メインナビゲーションやサイドバーナビゲーションのナビゲーションメニューを簡単に作成できます。このタグには、[メニューID](#menu-id)を指定する必要があります。 ```hubl theme={null} {% 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' %} ``` ### シンプルメニュー [シンプル メニュー](/docs/cms/reference/hubl/tags/standard-tags#simple-menu) タグもメニュータグと同様に機能し、深さ、アクティブ状態、子項目の有無に関するクラス名を備えた[標準的なメニューHTML](https://developers.hubspot.jp/docs/guides/cms/content/default-menu-markup)が生成されます。相違点として、このタグにはメニューIDではなくメニュー構造のディクショナリー（辞書型）が渡されることを想定しています。これが有用なのは、ナビゲーション設定を使う代わりに、モジュールのフィールドによってメニュー構造を決める場合です。例えば、ピラーページの目次にこのタイプのモジュールを使用することができます。 ```hubl theme={null} {% 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には、コード化されたテンプレートに追加できる既定のモジュールが用意されています。また、テンプレートに[ドラッグ＆ドロップエリア](/docs/cms/reference/hubl/tags/dnd-areas)が含まれている場合は、ページエディターを介してページを追加できます。各モジュールには異なる編集エクスペリエンスがあり、標準メニューにはシンプルメニューよりも多くの設定オプションがあります。 モジュールをネストさせることはできないので、他のモジュール内にこれらのモジュールを入れることはできません。代わりに[メニュータグまたはシンプル メニュー タグ](#hubl-menu-tags)を使用してください。 ```hubl theme={null} {% 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`タグにより、コンテンツエディターでモジュールを編集できるようになります。メニューモジュールとシンプル メニュー モジュールのメニューマークアップは、ラッパーとメニューコンテナーに適用される一部のクラスを除いて同じです。 ```html theme={null}
``` 上記のように、実際のメニューは、`hs-menu-wrapper`クラスの`div`でラップされた`ul`としてレンダリングされます。このラッパーには、フライアウトの有効化など、ページエディターでのモジュールの構成方法に基づいて追加のクラスがあります。[これらの設定によって追加されるクラス](#classes-added-by-settings)の詳細については、以下をご覧ください。 `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でこれらのセレクターを対象にすることができます。 menu-options-in-editor 以下では、これらのフィールド設定に応じて、メニューラッパーの`div`に追加されるクラスの詳細について説明します。 | クラス | 説明 | | ------------------------- | -------------------------------------------- | | `hs-menu-flow-horizontal` | メニューが水平方向に設定されている場合、ラッパーの`div`に追加されます。 | | `hs-menu-flow-vertical` | メニューが垂直方向に設定されている場合、ラッパーの`div`に追加されます。 | | `flyouts` | ［フライアウトを有効にする］が選択されている場合、ラッパーの`div`に追加されます。 | | `no-flyouts` | ［フライアウトを有効にする］が選択されていない場合、ラッパーの`div`に追加されます。 | メニューのスタイリングを開始するために、メニュータグと既定のメニューモジュールのスタイルを設定するために使用できるCSSセレクターの例を以下に示します。 ```css theme={null} /* 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 */ } ``` ## HubL menu()関数 [menu()](/docs/cms/reference/hubl/functions#menu)関数を使用すると、完全にカスタマイズされたメニュー構造を作成できます。そこから返される1つのオブジェクトを反復処理するとメニューを生成できます。[メニュー項目用のプロパティー](/docs/cms/reference/hubl/variables#menu-node-variables)が多数提供されています。メニュー関数を使用する場合は、メニューの構造、スタイル設定、[メニューのアクセスに関する責任があります](/docs/cms/best-practices/improve-existing-sites/accessibility)。 ```hubl theme={null} {% set node = menu(987) %} {% for child in node.children %} {{ child.label }}
{% endfor %} {% set default_node = menu("default") %} {% for child in default_node.children %} {{ child.label }}
{% endfor %} ``` [HubSpot CMSテーマボイラープレート](https://github.com/HubSpot/cms-theme-boilerplate)には、[menu()関数を使って構築したサンプル メニュー モジュール](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/modules/menu.module/module.html)が含まれています。実際のニーズに合わせて変更することで、複雑なメニューを作成できます。