レスポンシブメニューとオフキャンバスメニュー
mmenuライブラリを使用したオフキャンバスモバイルナビゲーションと、デスクトップ幅向けのオプションの水平メニューを備えたレスポンシブメニューシステムを提供します。
responsive_menu
インストール
composer require 'drupal/responsive_menu:^4.4'
概要
Responsive Menuモジュールは、mmenu JavaScriptライブラリをDrupalのメニューシステムと統合し、モダンでレスポンシブなナビゲーション体験を提供します。ブラウザ幅が狭い場合、トグルアイコン（ハンバーガーメニュー）またはスワイプジェスチャーで表示できるオフキャンバスモバイルメニューを表示します。画面幅が広い場合、Superfishライブラリによるオプションのドロップダウンサポート付きの水平メニューを表示できます。
このモジュールはテーマのブレークポイントと統合し、水平メニューがいつ表示されるかを正確に制御できます。複数のビジュアルテーマ（ライト、ダーク、ブラック、ホワイト）、RTL言語対応の左/右/コンテキスト配置、メニューが開いたときのページ暗転効果、Bootstrap 4テーマとの互換性をサポートしています。
2つのブロックが提供されます：デスクトップナビゲーション用の水平メニューブロックと、オフキャンバスメニューを開くためのモバイルトグルアイコンブロックです。水平メニューブロックはオプションです - オフキャンバスメニューのみを使用するか、Bootstrapのナビバーなど他のメニューソリューションと統合することもできます。
Features
- スムーズなスライドアウトアニメーションを備えたmmenu JavaScriptライブラリによるオフキャンバスモバイルメニュー
- 設定可能な最大深度とオプションのSuperfishドロップダウン拡張機能を備えた水平デスクトップメニュー
- 水平メニューとモバイルメニューの表示切り替えを制御するテーマブレークポイントとの統合
- 4つの組み込みビジュアルテーマ：ライト、ダーク、ブラック、ホワイト
- 設定可能なメニュー位置：左、右、またはコンテキスト（RTLサポートのため言語方向に基づいて自動切り替え）
- メニューが開いたときのページ暗転効果：なし、デフォルト色、白、または黒
- モバイルメニューを開くためのオプションのスワイプ/ドラッグジェスチャー
- Bootstrap 4テーマ互換モード - Bootstrapナビバートグラーを乗っ取りmmenuを開く
- 設定可能な遅延、速度、hoverIntentサポートを備えたSuperfishライブラリ統合による拡張ドロップダウン動作
- 複数のDrupalメニューを単一のオフキャンバスメニュー構造にマージする機能
- 画面外へのフライアウトを防ぐための3レベル以上のメニュー項目のフライレフトオプション
- IE11ポリフィルサポート
- ページラッパーdivがないテーマのための自動ページラッパーdiv挿入
- 適切なモバイルレンダリングのためのChromeビューポート修正
- オフキャンバスメニューでのキーボードナビゲーションサポート
- メニュー動作をカスタマイズするための豊富なalterフック
Use Cases
モバイルファーストのレスポンシブナビゲーション
モジュールを使用して一貫したモバイルファーストのナビゲーション体験を提供します。'Responsive menu mobile icon'ブロックをヘッダーリージョンに配置します。モバイル幅では、ユーザーはハンバーガーアイコンを見て、フル機能のオフキャンバスメニューを開きます。トグルアイコンが非表示になり、オプションでデスクトップユーザー用の水平メニューブロックを表示するブレークポイント（例：960px）を設定します。
オフキャンバスのみのナビゲーション
すべての画面サイズでオフキャンバスメニューのみを使用したい場合は、設定で'ブレークポイントを使用する'をオフにします。これにより、モバイルトグルアイコンがすべての幅で表示されたままになります。このアプローチは、画面サイズに関係なくオフキャンバス表示の恩恵を受ける複雑なナビゲーションを持つサイトに適しています。
モバイル用の複数メニューのマージ
多くのサイトでは、デスクトップ幅でメインナビゲーションとユーティリティメニュー（アカウント、言語セレクターなど）が別々に表示されます。'off_canvas_menus'設定を使用して複数のメニューマシン名（例：'main,utility'）を指定し、モバイルユーザー用に単一のオフキャンバスメニューにマージして、統一されたモバイルナビゲーション体験を提供します。
Bootstrap 4テーマ統合
bootstrap_barrioのようなBootstrap 4テーマを使用するサイトでは、'Bootstrap互換モード'を有効にします。Main navigationブロックを'Navigation (Collapsible)'リージョンに配置します。モジュールは自動的にBootstrapのナビバートグラーボタンを乗っ取り、Bootstrapのデフォルトのドロップダウンの代わりにmmenuオフキャンバスメニューを開き、より洗練されたモバイル体験を提供します。
RTL言語サポート
アラビア語やヘブライ語などのRTL言語をサポートする多言語サイトでは、オフキャンバス位置を'コンテキスト'に設定します。メニューはLTR言語では左から、RTL言語では右から自動的に開き、期待される読み取りパターンに従います。
Superfishによる拡張ドロップダウンメニュー
水平メニューのSuperfish統合を有効にして、設定可能な遅延、スムーズなアニメーション、より寛容なホバーインタラクションのためのオプションのhoverIntentサポートを含む拡張ドロップダウン動作を取得します。これは、複数レベルのドロップダウンを持つメニューに特に便利です。
タッチフレンドリーなモバイルナビゲーション
'ドラッグで開くジェスチャー'オプションを有効にして、モバイルユーザーがトグルアイコンをタップするだけでなく、画面の端からスワイプしてオフキャンバスメニューを開けるようにします。これにより、よりネイティブなモバイルアプリのような体験が提供されます。
フックによるページごとのカスタムメニュー
hook_responsive_menu_off_canvas_menu_names_alter()またはhook_responsive_menu_horizontal_menu_name_alter()を使用して、異なるページで異なるメニューを表示します。例えば、フロントページで特別なランディングページメニューを表示したり、特定のコンテンツエリア内でセクション固有のメニューを表示したりできます。
Tips
- モジュールのCSS（css/responsive_menu.css）をテーマにコピーし、'responsive_menuモジュールのCSSを読み込む'を無効にすると、カスタマイズが容易になります。
- テーマでhook_preprocess_page()を使用して、drupalSettings.responsive_menu.customを介してカスタムmmenu設定を追加し、ナビバータイトルやカスタムクラス名などの高度なオプションを設定できます。
- 選択された項目のデフォルト'menu-item--active-trail'クラスは、classyをベースとするテーマで機能します。テーマが異なるクラスを使用する場合は、カスタム設定でオーバーライドしてください。
- mmenuライブラリはCreative Commons Attribution-NonCommercialライセンスに変更されました - 商用利用には料金を支払う必要があります。ライセンスの詳細はhttps://mmenujs.comを確認してください。
- 最高のパフォーマンスのために、オフキャンバスメニューは一度レンダリングされてキャッシュされます。すぐに反映されるべき変更を行った場合は、'offcanvas_render'キャッシュタグをクリアしてください。
- 異なるブラウザとデバイスでメニュー機能をテストしてください。特に古いブラウザをサポートする場合は、必要に応じてIE11ポリフィルを有効にしてください。
- マージされたメニューを使用する場合、項目はメニューがリストされた順序で表示されます。期待される順序のために、プライマリナビゲーションメニューを最初に置いてください。
Technical Details
Admin Pages 1
/admin/config/user-interface/responsive-menu
表示するメニュー、ブレークポイント設定、ビジュアル外観、JavaScript拡張機能など、レスポンシブメニューのすべての側面を設定します。
Hooks 7
hook_responsive_menu_off_canvas_menu_names_alter
オフキャンバスレスポンシブメニューで使用されるメニュー名を変更します。条件に基づいてオフキャンバスモバイルメニューに表示するメニューを変更できます。
hook_responsive_menu_horizontal_menu_name_alter
水平レスポンシブメニューで使用されるメニュー名を変更します。異なるページで異なる水平メニューを表示できます。
hook_responsive_menu_off_canvas_tree_alter
ビルド後のオフキャンバスメニューツリーを変更します。メニュー項目のタイトル、属性、または構造を変更できます。
hook_responsive_menu_horizontal_tree_alter
ビルド後の水平メニューツリーを変更します。メニュー項目のタイトル、属性、または構造を変更できます。
hook_responsive_menu_off_canvas_manipulators_alter
オフキャンバスメニューツリーを変換する前にマニピュレーターを変更します。カスタムメニューツリーマニピュレーターを追加できます。
hook_responsive_menu_horizontal_manipulators_alter
水平メニューツリーを変換する前にマニピュレーターを変更します。カスタムメニューツリーマニピュレーターを追加できます。
hook_responsive_menu_off_canvas_output_alter
オフキャンバスメニューを表示するかどうかを変更します。特定のテーマ、ユーザーロール、またはページなどの特定の条件下でメニューを無効にするのに便利です。
Troubleshooting 8
mmenuライブラリが/libraries/mmenu/dist/mmenu.jsに正しくインストールされていることを確認してください。/admin/reports/statusのステータスレポートでライブラリ要件を確認してください。また、テーマにラッピングページdivがあることを確認してください - ない場合は、設定で'フロントエンドテーマにページラッパーdivを追加する'を有効にしてください。
'Horizontal menu'ブロックがリージョンに配置されていることを確認してください。'ブレークポイントを使用する'が有効で、有効なブレークポイントが選択されていることを確認してください。テーマの.breakpoints.ymlファイルにブレークポイントが定義されていることを確認してください。ブレークポイント設定を変更した後、キャッシュをクリアしてください。
'ビューポートmetaタグを動的に変更する'オプションを有効にしてください。Chromeは、mmenuがモバイルデバイスで正しくレンダリングするために特定のビューポート値を必要とします。
'Bootstrap互換モード'が有効であることを確認してください。BootstrapナビバートグラーがID #navbar-main を持つ要素内にあることを確認してください。メインナビゲーションブロックが正しいリージョンにあることを確認してください。
Superfishライブラリが/libraries/superfish/dist/js/superfish.min.jsにインストールされていることを確認してください。SuperfishはjQueryを必要とするため、テーマにjQueryが含まれている必要があることに注意してください。ライブラリ要件についてはステータスレポートを確認してください。
モジュールにはこれを処理するツールバー統合コードが含まれています。問題が続く場合は、responsive_menu.toolbarライブラリが読み込まれていることを確認してください。すべてのキャッシュをクリアしてみてください。
親メニュー項目を編集し、'Fly left'オプションをチェックしてください（深度3以上の項目で利用可能）。これにより、子項目が右ではなく左にフライアウトし、画面外レンダリングを防ぎます。
ブレークポイントCSSはpublic://cssディレクトリに生成されます。このディレクトリが書き込み可能であることを確認してください。キャッシュをクリアして再生成をトリガーしてください。テーマに有効なブレークポイントが定義されていることを確認してください。
Security Notes 2
- モジュールはDrupalのメニューアクセス制御を尊重します - 現在のユーザーがアクセス可能なメニュー項目のみが表示されます。
- mmenuライブラリはNonCommercial Creative Commonsライセンスを使用しています。商用プロジェクトではライセンス条項への準拠を確認してください。