Lesson 04 ドロップダウンでメニューを一斉表示 - Webデザイン表現&技法の新・ナビゲーション編

Webデザイン 表現&技法の 新・スタンダード

Lesson04

ドロップダウンで メニューを一斉表示

制作・文

宮﨑優子（ビーズスタジオ）

ドロップダウン式のナビゲーションメニューを「jQuery Mega Menu 2」で実装する方法を紹介する。この形式は「メガメニュー」と呼ばれ、メニューの下層にあるメニュー内容を一度に表示することができる。

「jQuery Mega Menu 2」のサイトからzipファイルをダウンロードする【1-1】。ダウンロードしてきたファイルで使用するのは「jquery.megamenu.js」「jquery.megamenu.css」の2つ。


【1-1】http://www.geektantra.com/

必要な要素をXHTML でマークアップする。メニューのul のクラス名に「megamenu」を指定する（以下、メニューリスト）。liにhoverした時に表示するメニューはliのaの次にdiv（以下、メニューボックス）をネストする【2-1】。メニューボックスの内容はリストだけにとどまらず、formやtableなども実装できる【2-2】。


【2-1】


【2-2】デモサイト。上からテーブル、フォーム、リスト、テキストをネストされたdivに実装した様子

次にCSS とスクリプトを実装する。【01】でダウンロードしてきた「jquery.megamenu.css」と「jquery.megamenu.js」をhead内で読み込み、ulのクラス「megamenu」をトリガーにしてjsが作動するように実装する【3-1】。


【3-1】

CSSはデフォルトのままだとメニューリストのulに背景画像、liにborder、borderにはCSS3のradiusが指定されて角丸になっている【4-1】。「jQuery Mega Menu」を実装するとメニューリストのli、liにネストしたa、メニューボックスにクラス名が割り当てられるので、そのクラス名を参照してそれぞれスタイルの調整を行おう【4-2】。


【4-1】


【4-2】「jquery.megamenu.js」実装後動的に変更されたコード。サンプルで作成したサイトのメニューはCSSスプライトで組んだので、liにそれぞれ固有のクラス名を付け「mm-item」に対しては何も指定を行っていない

また、メニューボックスの後ろに影を付ける「mm-js-shadow」というクラス名のdivが挿入される。

影を消したい場合は【3-1】で実装したコードを【5-1】のように書き換えることで対応できる【5-2】。

変更するプロパティはハッシュ形式で渡している。ハッシュとはキーと値のペアで、カンマで区切って複数のペアを指定できる。jQueryでの書き方は「キー：値」、この場合は「enable_js_shadow:false」となっている。変更できるプロパティについては【5-3】を参照してほしい。


【5-1】変更するプロパティはハッシュ形式で渡している。ハッシュとはキーと値のペアで1つの要素で、カンマで区切って複数のペアを指定できる。jQueryでの書き方は「キー：値」、この場合は「enable_js_shadow:false」となっている


【5-2】firebugの画面。【4-2】と比較して「mm-content-base」の後ろに挿入されていた「mm-js-shadow」が消えていることがわかる


【5-3】【5-1】 で指定していたキーと値の種類

メニューボックスのアニメーションのスピードを変更したい場合は「jquery.megamenu.js」を編集する。

編集する箇所は「slideDown」の場合は97行目、「fadeIn」の場合は100行目、「slideUp」の場合は122行目、「fadeOut」の場合は127行目【6-1】。

アニメーションのスピードは「fadeIn/fadeOut」「slideDown/slideUp」両方とも「fast」「normal」「slow」または数値（1秒=1000）で指定できる。

「fadeIn」は到達する透明度を数値で指定できる。指定は1=100%。変更する必要はほとんどないだろう。


【6-1】①「slideDown」、③「slideUp」、④「fadeOut」はアニメーションのスピード、②「fadeIn」はアニメーションのスピードと透過度を指定できる