Superfish ドロップダウンメニュー
jQuery Superfishプラグインを Drupal メニューと統合し、美しくアクセシブルなドロップダウンナビゲーションメニューを作成します。
superfish
インストール
composer require 'drupal/superfish:8.x-1.13'
概要
Superfish モジュールは、人気のある jQuery Superfish プラグインを Drupal のメニューシステムと統合し、サイト構築者が洗練されたドロップダウンナビゲーションメニューを作成できるようにします。水平、垂直、ナビバーレイアウトをサポートする拡張メニューブロックを提供し、滑らかなアニメーション、ドロップシャドウ、矢印インジケーターを備えています。
このモジュールには、sf-Smallscreen および sf-Touchscreen プラグインによるレスポンシブデザインの広範なサポートが含まれており、ウィンドウ幅やユーザーエージェント検出に基づいてモバイルデバイス向けにメニューを自動的に適応させます。Smallscreen モードでは、メニューをアコーディオン形式のナビゲーションまたはドロップダウン選択要素に変換できます。
Superfish は、マルチカラムのメガメニュー、カスタムスタイリングオプション（black、blue、coffee、white、default スタイル用のプリビルトテーマ付き）、および垂直、水平、斜めのスライドインを含むさまざまなアニメーション効果もサポートしています。オプションの jQuery Easing ライブラリ統合により、追加のアニメーション効果が提供されます。
主な機能には、誤ったメニューの有効化を防ぐ hoverIntent、ビューポート内でのインテリジェントなサブメニュー配置のための Supposition、動的なサブメニュー幅計算のための Supersubs があります。このモジュールは ARIA 属性によって完全にアクセシブルであり、RTL 言語をサポートしています。
Features
- 複数のメニュータイプ：水平（単一行）、水平ダブル行（ナビバー）、垂直（スタック）レイアウト
- プリビルトビジュアルスタイル：Default、Black、Blue、Coffee、White、またはカスタムスタイリング用の None
- 垂直、水平、斜めのオプションを持つスライドインアニメーション効果
- 高度なアニメーション効果のための jQuery Easing ライブラリとの統合（easeInSine、easeOutBounce など）
- モバイルでメニューをアコーディオンまたは選択要素に変換する sf-Smallscreen プラグインによるレスポンシブデザイン
- 設定可能なタップ動作を持つタッチデバイス互換性のための sf-Touchscreen プラグイン
- コンテンツに基づいた自動サブメニュー幅計算のための Supersubs プラグイン
- ビューポート外へのオーバーフローを防ぐインテリジェントなサブメニュー配置のための Supposition プラグイン
- 素早いマウス移動中の誤ったメニュー発火を防ぐ jQuery hoverIntent 統合
- 設定可能な深さとレベルを持つマルチカラムメガメニューサポート
- UL、LI、ハイパーリンク要素のカスタム CSS クラス
- リンク説明の挿入または非表示（title 属性の処理）
- 高度なスタイリングのための深さベースの CSS クラス（sf-depth-1、sf-depth-2 など）
- より簡単なナビゲーションのためにサブメニューの先頭に親リンクを追加する親リンク複製オプション
- active-trail クラスを使用したパスレベルの復元
- 展開された親サブメニューのみを表示するメニュー展開オプションのサポート
- 設定可能なアニメーション速度（slow、normal、fast、またはミリ秒）
- サブメニューを閉じるまでの設定可能なマウス遅延
- 自動方向検出による RTL 言語サポート
- アクセシビリティのための ARIA 属性（role=menu、aria-haspopup、aria-expanded）
- ユーザーエージェント検出方法：クライアントサイド（JavaScript）またはサーバーサイド（PHP）
- レスポンシブ機能のためのウィンドウ幅ブレークポイント設定
- 多言語リンクオーバーライド用の translatable_menu_link_uri モジュールとの統合
- 言語ベースのメニューフィルタリング用の menu_manipulator モジュールとの統合
Use Cases
ドロップダウンメニュー付きのメインサイトナビゲーション
複数レベルのドロップダウンサブメニューを持つ水平ナビゲーションバーを作成します。ヘッダーリージョンに Superfish ブロックを配置し、メインナビゲーションメニューを選択し、デフォルトスタイルで水平メニュータイプを使用し、視覚的な仕上げのために矢印とシャドウを有効にし、誤ったサブメニューの有効化を防ぐために hoverIntent を有効にします。
レスポンシブモバイルファーストナビゲーション
モバイルデバイスに適応するナビゲーションを構築します。768px のブレークポイントでウィンドウ幅モードを使用して sf-Smallscreen を有効にした Superfish ブロックを構成します。モバイルメニューにはアコーディオンタイプを選択し、タッチフレンドリーな展開可能なナビゲーションを提供します。また、タブレットデバイス用に sf-Touchscreen を有効にして、最初のタップで展開し、2回目のタップでナビゲートすることを確認します。
マルチカラムレイアウトのメガメニュー
e コマースやコンテンツが多いサイト用のメガメニューを作成します。ブロック設定でマルチカラムサブメニューを有効にし、開始深度を 1 に設定し、2〜3 レベルを構成します。これにより、複数のカラムを持つ幅広いサブメニューが作成され、カテゴリ階層の表示に最適です。カスタム CSS クラスを使用して、カラムをさらにスタイリングします。
垂直サイドバーナビゲーション
サイドバーリージョンに垂直ナビゲーションメニューを追加します。垂直メニュータイプを選択すると、メニュー項目が垂直に積み重ねられ、サブメニューが横に表示されます。Supposition を有効にして、サブメニューがビューポート境界内に収まるようにします。これは管理インターフェースやセカンダリナビゲーションに最適です。
タッチ最適化ナビゲーション
タッチスクリーンデバイス専用にメニューを構成します。ユーザーエージェント検出で sf-Touchscreen を有効にし、最初のタップで子を表示し、2回目のタップでリンクを開く動作を選択します。clone_parent オプションを有効にして、サブメニューの先頭に親リンクを追加し、タッチユーザーが親ページに簡単にナビゲートできるようにします。
カスタムテーマのナビゲーション
完全にカスタムスタイリングのナビゲーションを作成します。Style オプションを「None」に設定し、ライブラリからサンプルスタイルシートの1つをテーマにコピーします。.sf-style-default セレクタの名前を変更または削除し、独自の CSS を適用します。高度な設定を使用してカスタムクラスを追加し、特定の要素をターゲットにします。
Tips
- カスタムテーマの開発中に Firefox デベロッパーツールなどの DOM インスペクタを使用して、メニュースタイルをリアルタイムで一時的に変更します
- 開発中は Mouse delay を非常に高い値（例：99999999）に設定して、検査のためにサブメニューをより長く開いたままにします
- スタイルをカスタマイズする際は、ライブラリファイルを直接変更するのではなく、ライブラリの style ディレクトリからサンプル CSS をテーマにコピーします
- モジュールは {menu_name}-{link_id} のパターンを使用してメニュー項目の一意の HTML ID を自動的に生成します
- ナビゲーション全体での素早いマウス移動中のメニューの有効化を防ぐことで、ユーザーエクスペリエンスを向上させるために hoverIntent を有効にします
- Supposition プラグインはデフォルトで有効になっており、ブラウザウィンドウの外に表示されるサブメニューをインテリジェントに再配置します
- メニューレベルが多いサイトでは、Path levels 設定を慎重に使用してください - デフォルトの 1 から変更すると、アクティブトレイルのハイライトで予期しない動作が発生する可能性があります
- マルチカラムメニューは、カラム間で一貫したコンテンツがある場合に最も効果的です。バランスの取れたレイアウトを確保するために、実際のコンテンツでテストしてください
- レスポンシブ機能にユーザーエージェント検出を使用する場合、サーバーサイド PHP 検出はより高速な初期レンダリングを提供しますが、クライアントサイド JavaScript はプロキシユーザーにとってより正確です
- このモジュールは、translatable_menu_link_uri および menu_manipulator モジュールがインストールされている場合、自動的に統合します
Technical Details
Hooks 1
hook_superfish_tree_manipulators_alter
Superfish メニューを構築する際に使用されるメニューツリーマニピュレーターのリストをモジュールが変更できるようにします。マニピュレーターは、レンダリング前にメニュー項目を変更、アクセスをフィルタリング、項目をソート、またはリンクを変換できます。
Troubleshooting 8
管理 > 環境設定 > 開発 > パフォーマンス で Drupal キャッシュをクリアします。ライブラリがインストールされていない場合は、警告メッセージも表示されます。
Superfish ライブラリが libraries/drupal-superfish/ ディレクトリにインストールされていることを確認します。ステータスレポート（管理 > レポート > ステータスレポート）でライブラリのステータスを確認します。ライブラリに superfish.js と css フォルダが含まれていることを確認します。
ブロック設定で jQuery Supposition プラグインを有効にすると、サブメニューがブラウザウィンドウ内に収まるように再配置されます。また、メニューが他の要素の後ろに表示される場合は、テーマ CSS の z-index 値を確認してください。
ブロック設定で sf-Touchscreen および/または sf-Smallscreen を有効にします。タッチデバイスの場合、ブレークポイント値（デフォルト 768px）を構成し、実際のデバイスでテストします。テーマに viewport メタタグが含まれていることを確認します：<meta name="viewport" content="width=device-width, initial-scale=1.0">
jquery.easing.js をダウンロードして libraries/easing/jquery.easing.js に配置し、jQuery Easing ライブラリをインストールします。インストール後、ブロック設定ページを更新すると、追加のイージングアニメーションオプションが表示されます。
メニューリンクが正しいパスで構成されていることを確認します。モジュールは、アクティブ状態を決定するためにルートマッチングと URL 比較の両方を使用します。アンカーリンク（#）の場合、ベースパスのみが比較されます。
sf-Smallscreen アコーディオンモードで Style: None を使用する場合、カスタムのアコーディオンメニュータイトルを設定するか、アコーディオントグルボタンをスタイリングするカスタム CSS を適用する必要があります。デフォルトスタイルは可視性を提供しますが、None スタイルにはカスタム実装が必要です。
Animation speed 設定（デフォルト：fast）と Mouse delay 設定（デフォルト：800ms）を調整します。値を低くすると、メニューの応答性が向上します。即座の応答が必要な場合は hoverIntent を無効にすることを検討してください。ただし、これにより誤ってアクティブになる可能性があります。