Ultimenu
メニュー項目に基づいて動的リージョンを作成し、メニューのドロップダウン/フライアウト内にブロックを配置できるメガメニューモジュールです。
ultimenu
インストール
composer require 'drupal/ultimenu:^3.0'
概要
Ultimenuは、利用可能なメニューに基づいて動的なDrupalリージョンを作成する、究極にシンプルなメガメニューソリューションです。従来のメガメニューとは異なり、Ultimenuはユニークなアプローチを採用しています。Ultimenuブロックはメニューに基づき、Ultimenuリージョンはメニュー項目に基づいています。
その結果、「リージョンがブロックを含む」という従来の構造ではなく、「ブロックがリージョンを含み、そのリージョンがブロックを含む」という構造になります。このアーキテクチャにより、サイトビルダーはViews、Panels、ブロック、スライドショー、その他のブロック互換コンテンツなど、ほぼあらゆるものをメニューフライアウトに埋め込むことができます。
このモジュールはUltimenuブロック、リージョン、スキンライブラリの切り替えを管理し、ブロック、メニュー、リージョンの管理はDrupalコアに委ねます。これにより、最小限の複雑さで最大限の柔軟性を実現します。
主な機能には、複数のアニメーションスキンを備えたオフキャンバスモバイルメニュー、パフォーマンス最適化のためのAJAX読み込みフライアウトコンテンツ、テーマ自動検出機能付きのカスタマイズ可能なスキンシステム、アイコン付きメニュータイトルのサポート、折りたたみ可能なサブメニュー、スティッキーヘッダー、ハッシュベースのリージョンキーによる完全な多言語サポートが含まれます。
Features
- 利用可能なシステムメニューまたはカスタムメニューに基づく複数のUltimenuブロックインスタンス
- .info.ymlファイルを編集することなく切り替え可能な、メニュー項目に基づく動的リージョン
- 7種類のアニメーションスキン（bottomsheet、pushdown、scalein、slidein、slideover、zoomin）を備えたオフキャンバスメニュー
- 大量のメニューコンテンツでのパフォーマンス向上のためのAJAX読み込みフライアウトリージョン
- テーマのデフォルトcss/ultimenuディレクトリからの自動検出機能付きカスタマイズ可能なCSSスキン
- fa-*またはicon-*プレフィックスを使用したアイコン付きメニュータイトルと説明のサポート
- ネストされたメニュー構造のための折りたたみ可能なサブメニューサポート
- 複数のフライアウト方向：水平方向（下/上）、垂直方向（左/右）
- 多言語サイトの安定性のためのハッシュベースのリージョンキー
- ホバー状態の代替としてのキャレットベースのメニュー操作
- ホバー可能なメニュー用のスティッキー/固定ヘッダーサポート
- ブロック配置とリージョン表示のためのContextモジュールとの統合
- コアインタラクションにJavaScript依存なしのCSS3純粋アニメーション
- 設定可能な位置（タイトルの上または下）でのメニュー説明のレンダリング
- メニュー項目のCSSクラスオプション：タイトルクラス、mlidクラス、ハッシュクラス、カウンタークラス
Use Cases
企業サイトのメガメニュー
メインナビゲーションメニューをUltimenuブロックとして有効にすることで、企業サイト向けの洗練されたメガメニューを作成します。ヘッダーリージョンに配置し、各メニュー項目のフライアウトリージョンに注目商品、最新ニュース、サービスカテゴリを表示するViewsブロックを追加します。企業ブランディングに合わせたカスタムスキンで水平下方向のオリエンテーションを使用します。
ECサイトのカテゴリナビゲーション
各カテゴリのメニュー項目を作成し、それらのUltimenuリージョンを有効にすることで商品カテゴリナビゲーションを構築します。注目商品、ブランドロゴ、プロモーションバナーを表示するカテゴリ固有のブロックを追加します。大規模なカタログでの初期ページ読み込みパフォーマンスを向上させるため、フライアウトのAJAX読み込みを有効にします。
モバイルファーストのオフキャンバスナビゲーション
Ultimenuブロックでオフキャンバスオプションを有効にすることで、レスポンシブなオフキャンバスナビゲーションを実装します。canvas_offセレクタ（例：#header）とメインコンテンツエリア用のcanvas_onセレクタを設定します。スムーズなモバイルメニュートランジションのためにscaleinやslideoverなどのアニメーションスキンから選択します。モバイル/デスクトップで一貫した動作のためにhamburgerオプションを使用します。
多言語サイトのナビゲーション
便利機能で「Ultimenuリージョンキーに短縮HASHを使用」を有効にすることで、多言語サイト向けの安定したメガメニューリージョンを設定します。これにより、メニュータイトルが翻訳されてもリージョンが失われることを防ぎます。現在の言語でメニュー項目をフィルタリングするようMenu Manipulator統合を設定します。
サブメニュー付きサイドバーカテゴリメニュー
Ultimenuブロックをサイドバーリージョンに垂直右方向のオリエンテーションで配置することで、垂直サイドバーメガメニューを作成します。「サブメニューをレンダリング」オプションを有効にして、フライアウト内に子メニュー項目を自動的に表示します。モバイルでアコーディオンスタイルのナビゲーションのために「折りたたみ可能なサブメニュー」を有効にします。
連絡先情報付きフッターメガメニュー
水平上方向のオリエンテーションを使用して、情報豊富なフッターメガメニューを構築します。各メニュー項目のフライアウトリージョンに連絡先情報、ソーシャルメディアリンク、ニュースレター登録フォーム、サイトマップViewsを含むブロックを配置します。フッターデザインの慣例に合わせてダークスキンを使用します。
Tips
- 多言語化の可能性があるサイトや、編集者がメニュータイトルを変更する可能性があるサイトでは、最初からハッシュベースのリージョンキーを使用してください
- カスタムテーマに適用する前に、まずBartikまたはOliveroテーマでオフキャンバス機能をテストして、必要なHTML構造を理解してください
- FOUC（スタイルが適用されていないコンテンツの一瞬の表示）を避けるため、is-ultimenu__canvas-offとis-ultimenu__canvas-onクラスをテーマのTwigテンプレートに直接配置してください
- アイコン付きメニュータイトルには、管理インターフェースをクリーンに保ちながらフロントエンドでアイコンを表示するため、icon-*またはfa-*プレフィックス付きの説明フィールドを使用してください
- パフォーマンスとユーザー体験のバランスを取るため、Viewsや複雑なブロックなどの重いコンテンツを含むフライアウトにのみAJAX読み込みを有効にしてください
- Ultimenuリージョンを永続的に保存するため、便利機能セクションから生成されたリージョン定義をテーマの.info.ymlファイルにコピーしてください
- ブレークポイントやスペースを簡単にカスタマイズするため、ultimenu.cssとultimenu.media-query.cssで定義されているCSS変数を使用してください
Technical Details
Admin Pages 1
/admin/structure/ultimenu
Ultimenuブロック、リージョン、グローバル設定を管理するためのメイン設定ページです。既存のメニューに基づいてメガメニューブロックを作成し、メニュー項目に基づく動的リージョンの有効/無効を切り替えます。
権限 1
Hooks 2
hook_ultimenu_attach_alter
UltimenuブロックにアタッチされるライブラリとdrupalSettingsをモジュールが変更できるようにします
hook_ultimenu_build_alter
レンダリング前にUltimenuビルド配列をモジュールが変更できるようにします
Troubleshooting 7
/admin/config/development/performanceですべてのキャッシュをクリアしてください。リージョンは動的に登録されるため、テーマがそれらを認識するにはキャッシュのクリアが必要です。
便利機能設定で「Ultimenuリージョンキーに短縮HASHを使用」を有効にしてください。これにより、翻訳可能なタイトルの代わりにハッシュに基づく安定したリージョンキーが作成されます。
canvas_offとcanvas_onのCSSセレクタがお使いのテーマに対して正しいことを確認してください。オフキャンバス要素とオンキャンバス要素は、同じDOMレベルで兄弟要素である必要があります。まずデフォルト値でBartikテーマでテストしてください。
Ultimenuリージョンに少なくとも1つの表示可能なブロックが配置されていることを確認してください。ブロックの表示設定とユーザーロール権限を確認してください。パスベースの表示の場合は、現在のパスがブロックの表示ルールに一致することを確認してください。
便利機能で「テーマの.info.ymlに保存されたUltimenuリージョンを強制削除」を有効にすると、Ultimenu設定がテーマ定義のリージョンより優先されます。
「Ultimenuブロックの切り替え」でメニューを有効にして保存していることを確認してください。キャッシュをクリアし、ブロック配置のUltimenuカテゴリを確認してください。
Ultimenuブロック設定で「サブメニューをレンダリング」を有効にしてください。さらに、メニュー管理画面で親メニュー項目の「展開して表示」にチェックが入っていることを確認してください。
Security Notes 4
- 「administer ultimenu」権限は制限付きアクセスとしてマークされており、信頼できる管理者にのみ付与すべきです
- カスタムスキンパスは、保存前にディレクトリが存在することを確認するバリデーションが行われます
- 設定のユーザー入力（スキンパス、フォールバックテキスト、AJAX最大幅、アイコンクラス）はstrip_tagsとXss::filterでサニタイズされます
- AJAXエンドポイントへのアクセスは個々のブロック権限によって制御されます - コンテンツが返される前に各ブロックのアクセスがチェックされます