(HTML,CSS,JavaScript)簡単なドロップダウンメニューの作り方(jQuery活用編)わずか9行のjQueryソースで、ウェブサイトのメニューバーにドロップダウンメニュー機能を加える方法を解説。ul+li要素で作るリスト形式のHTMLを、メニューらしく見えるようCSSで装飾し、JavaScript(jQuery)を使ってサブメニューの開閉を制御するだけで、簡単に「マウスに合わせて自動でサブメニューが展開、メニュー外のどこかをクリックすると消える」という使いやすいドロップダウンメニューが作れます。サブメニューが出るナビゲーションドロップダウンメニューとは、メインメニュー項目がクリックされた際に、その直下にサブメニュー項目が展開されるナビゲーション機能のことです。様々なソフトウェアのメインメニューとしても使われており、とても一般的なUI(ユーザ・インターフェイス)だと言えるでしょう。ドロップダウンメニューは、様々なソフトウェアのメインメニューとして使われる一般的な機能このようなサブメニューが展開されるドロップダウンメニューは、ウェブサイトにメニューバーを掲載する際にも採用すれば、分かりやすくて扱いやすいナビゲーションとして機能します。多くのウェブサイト上でも活用されているドロップダウンメニューメニュー項目の上にマウスを載せるだけでサブメニューが現れるドロップダウンメニューがあると、ウェブサイト内のコーナーやページに効率良くアクセスできます。ページ数の多いウェブサイトでは特に、サイト構造の把握や、必要な情報へのショートカット手段としても便利に活用できるでしょう。規模の大きなサイトでよく使われているドロップダウンメニューの例マウスの動きに連動するドロップダウンメニューには不便さもあるメニュー項目の上にマウスが載った際にサブメニューを展開し、メニュー項目の上からマウスが外れたらサブメニューを消す、というだけの動作なら、わざわざJavaScriptを使うまでもなくHTML+CSSだけで作れます。その方法は記事「ドロップダウンメニューをHTML+CSSだけで作る方法」で解説しました。スクリプトを使わずに、HTML+CSSだけでドロップダウンメニューを作る方法もあるしかしこの方法だと、メニュー項目からほんの一瞬でもマウスポインタが外れてしまうだけで、サブメニュー項目が自動で閉じてしまいます。マウスの軽微な誤操作で意図せずサブメニューが消えてしまうと、利用者はストレスを感じるかもしれません。勝手には消えない、使いやすいドロップダウンメニューを作るそこでお勧めなのが、以下のような3つの動作で使えるドロップダウンメニューです。メニュー項目の上にマウスが載ると、サブメニューが自動で開くメニュー項目の上からマウスが外れても、サブメニューはそのまま残るウェブ上のどこか(メニュー領域外など)がクリックされたらサブメニューが消えるこれなら、ユーザがマウス操作をミスしてもサブメニューが勝手に消えることはないため、使いやすさを損なわずに済みます。その上で、マウス操作に合わせてサブメニューがすぐに表示される便利さは維持できています。このような動作はHTML+CSSだけでは作れませんから、スクリプトを併用する必要があります。上記のような動作のドロップダウンメニューは、JavaScriptを活用することで作れます。メニュー項目にマウスが載ったら対応するサブメニューを表示ページ内のどこかがクリックされたらサブメニューを閉じるという処理は、JavaScriptの有名ライブラリであるjQueryを使うと、短いソースだけで簡単に実現できます。jQueryで簡単に作成できる今回は、jQueryを活用してウェブ上のメニューバーに使いやすいドロップダウンメニュー機能を加える方法をご紹介いたします。本記事で作成するドロップダウンメニューは下図のような感じです。サンプルページも用意していますので、お使いのブラウザで動作を試してみて下さい。→jQueryを使ったドロップダウンメニューのサンプルページ(多段)jQueryを活用して作るドロップダウンメニューのサンプル(多階層)メニューバー上の各項目にマウスを載せるだけで自動的にサブメニューが開きます。3階層以上の大規模なメニュー構造でも動作します。マウスをメニューの範囲外に移動させても、サブメニューが勝手に閉じてしまうことはなく、下図のように残り続けます。一度開いたサブメニューは、他のサブメニューが開かれるか、またはユーザがページ内のどこかをクリックした際に閉じられます。メニュー項目が表示されている範囲からマウスが外れても、サブメニューは勝手には閉じないため使いやすいこのような使いやすいドロップダウンメニューも、jQueryを活用すれば簡単に作れます。記述する必要のあるJavaScriptソースは、わずか9行です。今回作成するドロップダウンメニューの作り方の特徴HTMLの「リスト」を、プルダウンメニューに見えるようCSSで装飾ドロップダウンメニューを構成するHTMLソースは、ul要素とli要素を使ったリストの形式で作ります。CSSを使って装飾し、最後にJavaScript(jQuery)を使って動作させます。JavaScriptが機能しない環境では、サブメニューのないシンプルなメニューバーとして表示されます。サブメニューが現れないだけであり、表示が崩れるようなことはありませんから安心して活用できます。それともプルダウンメニュー?ドロップダウンメニューは、プルダウンメニューと呼ばれることもあります。ウェブ上でプルダウンメニューと言うと、下図のように矢印[▼]部分をクリックすることで下方向にリストが展開される、項目選択用のUIを指す場合が多そうです。このプルダウンメニューは、セレクトボックスとも呼ばれます。(都道府県名の選択リスト)本記事では、このプルダウンメニューとは区別して「ドロップダウンメニュー」という名称で表記しています。jQueryを使って、使いやすいドロップダウンメニューを作る方法それでは、ドロップダウンメニューの作り方を順に見ていきましょう。ベースのHTMLソースを書き、CSSで装飾し、ドロップダウンメニューとして機能するJavaScriptを記述するだけです。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。