JavaScript

プルダウンメニューをjQueryのshow()・hide()を使って簡単に表示させる方法

jQueryのhover()、show()、hide()を使って、簡単にプルダウンメニューを表示させる方法をご紹介します。

プルダウンメニューを表示するliタグの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>

hover()、show()、hide()を使ってプルダウンメニューを表示するJavaScript記述

※jqueryファイルを読み込みます。

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

※#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記述

※必要に応じて変更して下さい。

<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>

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

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

プルダウンのやり方って色々方法がありますが、簡単に済ませたい時はこれでやりがちです。

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