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

ほぼ全てのウェブサイトには、ユーザーが情報を素早く簡単に見つけられるように、何らかのナビゲーションメニューが用意されています。ナビゲーションメニューが配置される場所としては、ウェブサイトのヘッダー、サイドバー、フッターなどがあります。HubSpotには、このような一般的なメニューを簡単に作成して管理するためのツールが組み込まれています。また、コード面でもメニュー表示の方法が多数用意されているので、実際のウェブサイトに最も適したソリューションを選ぶことができます。

サイトのヘッダーやフッターのメニューなど、サイト全体で使用されるメニュー向けに、ナビゲーション設定ページがあります。この画面では、ご使用のアカウント内のテンプレートやモジュールで使用できるメニューの作成、更新、および削除ができます。HubSpotのメニューモジュールとタグを使用すると、簡単にサイトにメニューを表示できます。

ピラーページの目次など、単一のページに使用するメニューには、シンプルメニューを使用します。シンプルメニューは全体で使用されるものではなく、表示されるページ専用です(グローバルコンテンツに含まれない限り)。シンプルメニューはコンテンツ編集者はページレベルで編集でき、一貫したUIで作成および管理ができます。HubSpotのシンプルメニューのモジュールとタグを使用すると、シンプルなメニューを簡単にサイトに表示できます。

カスタムモジュールには、シンプルメニューおよびメニューフィールドの両方を含めることができます。開発者にとっては出力コードをより詳細に制御できることから、カスタムモジュールは多くの開発者が使用しています。実際のワークフローやビジネスニーズ、またはデザインに合わせて、サイドバーモジュール、フッター ナビゲーション モジュール、ヘッダー ナビゲーション モジュールなどを作成できます。メニューフィールドを使用すると、コンテンツ編集者がグローバル アカウント ナビゲーション メニューの中からメニューを選べるようになります。シンプル メニュー フィールドでは、他の場所で再利用しないメニューを作成できます。

特に入り組んだメニューの場合は、メニューの構造と表示の管理に、リピーターグループを含むモジュールまたはHubDBを使用する方が適切なこともあります。とはいえ、この方法には、コンテンツ編集者が簡単なUIを使えなくなるデメリットがあります。こうした状況では、メニュー関数をメニューフィールドまたはシンプル メニュー フィールドと組み合わせることで、高度な構造や機能を実現すると同時に、メニューの利便性も高めることができます。

カスタム メニュー オプション

ナビゲーション設定

多くのウェブサイトメニューで似た形式が採用されているため、CMS Hubは親子形式のメニューを作成できる便利なエディターUIを備えています。このユーザーインターフェイス(UI)では、ページのリンクをネストさせて階層状のメニューを作成できます。ここで作成したメニューは、どのようなテンプレートまたはモジュール上でも表示できます。アカウント全体のメニューを設定するには、[設定]>[ページ]>[ナビゲーション]の順に進みます。

ナビゲーション設定エリア

1つのHubSpotアカウント上に複数のメニューを設定して、メインナビゲーション、サイドバー、メガメニュー、フッターナビゲーションなどに使用することができます。ナビゲーション設定で定義したメニューは、1つのウェブサイト全体で再利用可能です。

メニューの表示

メニューにはさまざまな表示方法があります。実際の状況に応じて、以下のどれが最も適しているかを判断してください。

それぞれに利点と欠点がありますので、十分に理解した上で決定してください。

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

メニューIDを取得する

HubLによってメニューを扱う場合は、メニューのIDを使って参照する必要があります。これはシンプルメニューには当てはまりません。

カスタムモジュールを作成する場合にメニューIDを取得する最適な方法は、実際にメニューフィールドを作成することです。モジュール内のメニューフィールドからメニューのIDが返されるため、コンテンツ編集者はこのIDを使ってメニューを指定できます。何らかの理由でメニューIDをハードコードする必要がある場合、ナビゲーション設定ページを表示した際のURLからメニューIDを取得できます。

https://app.hubspot.com/menus/<portal id>/edit/<menu id>

既定のメニューでは常にIDが明示されるとは限らないので、メニューを変更してから既定に変更すると、IDがURLに表示されます。

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

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

HubLメニュータグ

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

{% 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' %}

HubLシンプル メニュー タグ

HubLシンプル メニュー タグもHubLメニュータグと同様に機能し、深さ、アクティブ状態、子項目の有無に関するクラス名を備えた標準的なメニューHTMLが生成されます。相違点として、このタグにはメニューIDではなくメニュー構造のディクショナリー(辞書型)が渡されることを想定しています。これが適しているのは、ナビゲーション設定を使う代わりに、モジュールのフィールドによってメニュー構造を決める場合です。シンプル メニュー フィールドでは、制作担当者がメニューを作成でき、そのフィールドから変数をこのタグに提供できます。これが適していると思われる状況は、長いページのための目次タイプのメニューです。そのメニューは他のページで繰り返される可能性が低いので、ナビゲーション設定に含まれなくても差し支えありません。これはモジュールではなくHubLタグなので、カスタムモジュール内部でこれを使用できます。

{% 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}] %}

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

HTML+HubLとドラッグ&ドロップテンプレートの両方で使用できる既定のモジュールがあります。既定のメニューモジュールの内部では、HubLメニュータグが使用されます。既定のシンプル メニュー モジュールの内部では、HubL simple_menuタグが使用されます。HubLメニュータグを使用しているので、標準的なメニューHTMLが生成されます。これらは実際のモジュールなので、dnd_areaタグ、フレキシブルカラムドラッグ&ドロップテンプレートの中でこれらを使用できます。モジュールをネストさせることはできないので、他のモジュール内にこれらのモジュールを入れることはできません。代わりにメニュータグまたはシンプル メニュー タグを使用してください。

{% 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}] %}

参考になりましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。