JavaScript

jQueryで簡単にプルダウンメニューを表示させる方法 – hover(), show(), hide()を使った解説

  /

この記事では、jQueryのhover()、show()、hide()を使って、簡単にプルダウンメニューを表示させる方法をご紹介します。
プルダウンメニューは、ユーザビリティを向上させ、ナビゲーションを簡単にするために非常に役立ちます。

Contents

CSSでの基本設定

まず、CSSを使ってプルダウンメニューのスタイルを設定します。※デフォルトでは#idMenu li ulを非表示にします。
以下のスタイルを使って、基本的なプルダウンメニューの見た目を整えます。

<style type="text/css">
<!--
ul{
	list-style:none;
}
#idMenu li {
  position: relative;
  float: left;
  margin: 0;
  padding: 5px;
  width: 150px;
  height: 20px;
  border: solid 1px #cccccc;
  line-height:1.4em
}
#idMenu li:hover {
  color: #ffffff;
  background-color:#CCCCCC;
}
#idMenu li ul {
  display: none;
  position: absolute;
  top: 30px;
  left: -1px;
  padding: 5px;
  width: 150px;
  background-color:#999999;
  border: solid 1px #cccccc;
}
#idMenu li ul li {
  margin: 0;
  padding: 0;
  width: 150px;
  border: none;
}
#idMenu li ul li a {
  display: inline-block;
  width: 150px;
  height: 20px;
  text-decoration:none;
  color:#FFFFFF;
  line-height:1.4em
}
#idMenu li ul li a:hover {
  background-color:#999999;
  color:#333333;
  text-decoration:underline;
}
-->
</style>

JavaScriptでのプルダウンメニューの実装

次に、JavaScript（jQuery）を使ってプルダウンメニューを動的に表示させます。jQueryのhover()メソッドを使って、メニュー項目にマウスオーバーした際にサブメニューを表示し、マウスが離れたときにサブメニューを非表示にします。

まず、jQueryライブラリ（1.5系）を読み込みます。以下のコードをHTMLファイルのheadセクションに追加してください。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

次に、プルダウンメニューの表示と非表示を制御するためのjQueryコードを追加します。
#idMenu liをhoverするとulタグをshow()で表示し、マウスアウトでulタグをhide()で非表示にします。

<script type="text/javascript">
$(function() {
	$("#idMenu li").hover(function() {
		$(this).children('ul').show();
	}, function() {
		$(this).children('ul').hide();
	});
});
</script>

HTMLの構造

最後に、プルダウンメニューを表示させるためのHTML構造を設定します。プルダウン表示エリア（id=”idMenu”）を用意します。
以下のHTMLコードを使って、メニューとサブメニューを定義します。

<div id="idWrap">
    <h1>下の「メニュー1」「メニュー2」をマウスオーバーすると、<br />プルダウンメニューが表示されます。</h1>
    
    <ul id="idMenu">
    <li>メニュー1
        <ul>
        <li><a href="#">プルダウン11</a></li>
        <li><a href="#">プルダウン12</a></li>
        <li><a href="#">プルダウン13</a></li>
        </ul>
    </li>
    <li>メニュー2
        <ul>
        <li><a href="#">プルダウン21</a></li>
        <li><a href="#">プルダウン22</a></li>
        <li><a href="#">プルダウン23</a></li>
        </ul>
    </li>
    </ul>
    
</div><!--/idWrap-->

プルダウンメニューを簡単なjQueryで表示させるデモページ

実際に動作するデモを確認したい方は、以下のリンクをクリックしてデモページをご覧ください。

プルダウンメニューを簡単なjQueryで表示させるデモページ

まとめ

以上の手順を踏むことで、jQueryを使った簡単なプルダウンメニューを作成することができます。この方法は、基本的なナビゲーションメニューを作成するのに非常に役立ちます。さらに高度な機能を追加したい場合は、jQueryの他のメソッドやプラグインを活用することも検討してください。

補足情報

プルダウンメニューを作成する際には、以下の点に注意してください。

  • ブラウザの互換性:
    jQueryは多くのブラウザで動作しますが、CSSやJavaScriptの特定の機能が古いブラウザで正しく表示されない場合があります。可能であれば、主要なブラウザで動作確認を行ってください。
  • レスポンシブデザイン:
    プルダウンメニューがモバイルデバイスでも正しく表示されるように、レスポンシブデザインを取り入れることを検討してください。メディアクエリを使用して、画面サイズに応じたスタイルを適用することができます。
  • アクセシビリティ:
    キーボードナビゲーションやスクリーンリーダーのユーザーにとっても使いやすいメニューを作成することが重要です。適切なARIA属性を追加することで、アクセシビリティを向上させることができます。

これで、簡単にプルダウンメニューを作成できるようになります。ぜひ、実際に試してみてください！

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

pulldown プルダウンメニュー
関連記事