メニューバーにドロップダウンメニュー機能を加えたい

様々なソフトウェアでも使われる「ドロップダウンメニュー」

様々なソフトウェアでも使われる「ドロップダウンメニュー」

ウェブサイトにメニューバーを掲載する際、必要に応じてサブメニューが展開される「ドロップダウンメニュー」を作りたいと思ったことはありませんか?

ドロップダウンメニューは、右図のように様々なソフトウェアのメインメニューにも使われている一般的なインターフェイスです。ウェブサイトにも採用すれば、分かりやすくて扱いやすいナビゲーション機能になるでしょう。


 
多くのウェブサイト上でも活用されているドロップダウンメニュー
ドロップダウンメニューを採用している企業サイト例

ドロップダウンメニューを採用している企業サイト例

メニュー項目の上にマウスを載せるだけでサブメニューが現れるドロップダウンメニューがあると、ウェブサイト内のコーナーやページに効率良くアクセスできます。右図のように、企業サイトでもよく使われています。

ページ数の多いウェブサイトでは特に、サイト構造の把握や、必要な情報へのショートカット手段として、とても便利に活用できるでしょう。


 
ドロップダウンメニュー? プルダウンメニュー?
プルダウンメニュー

プルダウンメニューの表示例 (都道府県名の選択リスト)

ドロップダウンメニューは、プルダウンメニューと呼ばれることもあります。ただ、特にウェブ上でプルダウンメニューと言うと、右図のような[▼]部分をクリックすることで下方向に選択項目リストが展開するインターフェイスを指す場合が多そうです。このプルダウンメニューはセレクトボックスとも呼ばれます。

本記事では、このプルダウンメニューとは区別して「ドロップダウンメニュー」という名称で表記しています。


 

マウスの動きに合わせたドロップダウンメニューならHTML+CSSだけで作れるが、マウスが一瞬ズレただけでも閉じてしまう

スクリプトを使わずに、HTML+CSSだけでドロップダウンメニューを作る方法もあるが

スクリプトを使わずに、HTML+CSSだけでドロップダウンメニューを作る方法もあるが、操作を誤るとストレスになる

メニュー項目の上にマウスが載った際にサブメニューを展開し、メニュー項目の上からマウスが外れたらサブメニューを消す、という動作であれは、わざわざJavaScriptを使うまでもなくHTML+CSSだけで作れます。その方法は記事「ドロップダウンメニューをHTML+CSSだけで作る方法」で解説しました。

しかし、この方法だとメニュー項目からほんの一瞬マウスが外れてしまっただけでも、サブメニュー項目は自動で閉じられてしまいます。マウスの軽微な誤操作で意図せずサブメニューが消えてしまうと、利用者はストレスを感じるかもしれません。

勝手には消えない、使いやすいドロップダウンメニューを作る

そこでお勧めなのが、以下のような3つの動作で使えるドロップダウンメニューです。これなら、サブメニューが簡単に表示されるので使いやすさを維持したまま、マウス操作をミスしてもサブメニューが勝手に消えることはないために便利さを損なわずに済みます。

  • メニュー項目の上にマウスが載ると、サブメニューが自動で開く
  • メニュー項目の上からマウスが外れても、サブメニューはそのまま残る
  • ウェブ上のどこか(メニュー領域外など)がクリックされたらサブメニューが消える

上記のような動作は、HTML+CSSだけでは作れませんから、スクリプトを併用する必要があります。


 

jQueryで、使いやすい多段ドロップダウンメニューを簡単作成

jQueryで簡単に作成できる

jQueryで簡単に作成できる

上記のような動作のドロップダウンメニューは、JavaScriptを活用することで作れます。「メニュー項目にマウスが載ったら対応するサブメニューを表示」・「どこかがクリックされたらサブメニューを閉じる」という処理は、JavaScriptのライブラリであるjQueryを使うと短いソースで簡単に実現できます。

今回は、jQueryを活用してウェブ上のメニューバーに使いやすいドロップダウンメニュー機能を加える方法をご紹介いたします。


 
作成するドロップダウンメニューの表示例
jQueryを活用して作るドロップダウンメニューのサンプル(多階層)

jQueryを活用して作るドロップダウンメニューのサンプル(多階層)

今回作成するドロップダウンメニューの完成図は、右図のような感じです。サンプルページも用意していますので、お使いのブラウザで動作を試してみて下さい。

jQueryを使ったドロップダウンメニューのサンプルページ(多段)

メニューバー上の各項目にマウスを載せるだけで、自動的にサブメニューが開きます。2階層を超えるような大規模なメニュー構造でも動作します。

マウスをメニュー範囲外に移動させてもサブメニューが勝手に閉じてしまうことはなく、下図のように残り続けます。一度開いたサブメニューは、他のサブメニューが開かれるか、またはユーザがページ内のどこかをクリックした際に閉じられます。

メニュー項目が表示されている範囲からマウスが外れても、サブメニューは勝手には閉じないため使いやすい

メニュー項目が表示されている範囲からマウスが外れても、サブメニューは勝手には閉じないため使いやすい


このような使いやすいドロップダウンメニューも、jQueryを活用すれば簡単に作れます。記述する必要のあるJavaScriptソースは、わずか9行です。


 

今回作成するドロップダウンメニューの作り方の特徴

HTMLの「リスト」を、プルダウンメニューに見えるようCSSで装飾

HTMLの「リスト」を、プルダウンメニューに見えるようCSSで装飾

ドロップダウンメニューを構成するHTMLソースは、ul要素とli要素を使ったリストの形式で作ります。さらにCSSを使って装飾し、JavaScript(jQuery)を使って動作させます。

JavaScriptが機能しない環境では、単なる「シンプルなメニューバー」として見えます。その場合、サブメニューは表示できませんが、表示が崩れるようなことはありません。


 
それでは、ドロップダウンメニューの作り方を順に見ていきましょう。ベースのHTMLソースを書き、CSSで装飾し、ドロップダウンメニューとして機能するJavaScriptを記述するだけです。

【この記事の目次】
1. ドロップダウンメニュー用のHTMLソースを記述する (p.2)
2. ドロップダウンメニューらしく見せるCSSソースを記述する (p.3)
3. jQueryを使ってドロップダウンメニューとして機能するスクリプトを記述する (p.4)