メニューを階層化して表示できる Superfish モジュール

SuperfishというjQueryのライブラリをご存知でしょうか。Superfishは階層のあるメニューをふんわり表示してくれるおしゃれなライブラリです。 サンプルがこちらのページでご覧いただけます。※ 青色メニューにマウスオーバーしてみてください。

通常はライブラリを使って数行のjQueryコードを記述しないと使えないのですが、今回はDrupal上でコードをひとつも書くことなくふんわり表示させるメニューを実装できるSuperfishモジュールの使い方をご紹介します。 ちなみにこの記事内ではデフォルトの Bartikテーマを使用しています。 同じように利用されたい方はテーマをBartikに変更してからお試しください。その他のテーマをお使いの方は情報を適宜読み替えてご利用くださいね。

インストール方法

まずは通常のモジュールのインストール方法でインストールします。 モジュールのインストール方法はこちらのコントリビュートモジュールセクションをどうぞ。

Superfishモジュールは通常のモジュールインストール方法に加えてjQueryのライブラリをインストールする必要があります。 手動で行う方法と、drushコマンドを使ってインストールする方法があります。

手動で行う場合

まずは以下からjQueryのプラグインデータをダウンロードしてください。※クリックすると直接ダウンロードが開始されます
https://github.com/mehrpadin/Superfish-for-Drupal/zipball/master

ダウンロードしたzipファイルを解凍して、出てきたフォルダの名前を「superfish」に変更します。

サイトフォルダ内の以下のフォルダの中にsuperfishフォルダを入れたら完了です。

sites/all/libraries

Superfishモジュールの場合、librariesフォルダ内にsuperfishフォルダとその中の必要なファイルがあればモジュール側で自動的に読み込んでくれます。

drushコマンドを使う場合

superfishモジュールが有効になっている場合、サイトディレクトリ内で以下の1行を記述すれば完了です。

drush superfish-plugin

Drush が入っているのにそんなコマンド無いよ！というようなエラーを吐かれたら以下のコマンドを実行してから再度 drush superfish-plugin を実行してください。

drush cc drush

jQueryのライブラリが読み込まれているかどうかを確認する方法

管理画面で以下の場所にアクセスします。

管理 » 環境設定 » ユーザーインターフェース » Superfish
パス：admin/config/user-interface/superfish

テキストエリアにファイルへのパスがいくつか書かれていればOK！ちゃんと読み込まれています。

Superfishモジュールで生成したメニューを画面上に表示させる

さて、インストールが完了したらあとは管理画面内の作業のみとなりました。

SuperfishモジュールはDrupalのメニューに働きかけるわけではなく、Drupalのメニューのデータを読み込んでブロックとして利用する 形を取っています。なのでまず先にメニューを作成しておきます。

Superfishで利用するメニューを作る

まずメニューの管理画面を開きます。

管理 » サイト構築 » メニュー
パス：admin/structure/menu

お好きなメニューを選ぶか作成して必ず 階層があるメニュー を作成しましょう。 この記事ではメインメニューを次のように編集して利用します。

• Home
• サービス
  • Drupalサイト開発
  • グラフィックデザイン制作
    • イラスト・キャラクターデザイン
    • オリジナルグッズ・周年記念グッズ
    • パッケージデザイン
    • パンフレット・チラシ・フライヤー
    • ポスター・店頭POP・メニュー
    • ロゴマーク・シンボルマーク
    • 会社案内
    • 名刺・ショップカード
  • サポートプラン
  • スマートフォンサイト制作
  • テンプレートサイト制作
  • ホームページ制作
  • 英語ホームページ制作
• 制作実績
• ウミについて
• お問い合わせ

ここで作った・編集したメニューのデータをSuperfishモジュールで利用します。

Superfishモジュールから生成されたメニュー(ブロック)の設定を変更する

ブロックの管理画面を開きます。 管理 » サイト構築 » ブロック
パス：admin/structure/block

「Superfish 1 (Superfish)」が無効のところに作成されているはずです。 このブロックの設定をクリックするとSuperfishの動きの調整やスタイルの選択などができる、たくさんの設定項目が出てきます。

手っ取り早くわかりやすい形で確認したいので必要最低限の設定だけ行いましょう。 以下の項目を変更します。

• ▾ メニュー
  • Menu parent: メインメニューを選択
• ▾ SUPERFISH SETTINGS
  • Menu type: 水平を選択
  • Style: Simple-centre-alignedを選択
• リージョンの設定
  • Bartik （デフォルトテーマ）: ヘッダーを選択

項目が設定できたら「ブロックを保存」ボタンをクリックし、TOPページを確認します。 生成されたメニュー内の下の階層を持つ項目を選ぶと・・・以下の画像のようなメニューができてますでしょうか？

下の階層を表示させるときにふんわりドロップダウンで出現してきたら完成です！Superfishモジュールで生成されたブロックの設定では速度の設定やメニューのスタイルの設定いろんな項目の設定ができますのでぜひご自身でさわって良い感じのSuperfishメニューをつくってください(^^)