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

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

Contents

hover()、show()、hide()を使って、簡単にプルダウンメニューを表示するliタグのCSS記述
hover()、show()、hide()を使ってプルダウンメニューを表示するJavaScript記述
hover()、show()、hide()を使って、簡単にプルダウンメニューを表示するHTML記述
プルダウンメニューを簡単な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.min.jsファイル（1.5系）を読み込みます。

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

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

※プルダウン表示エリア（id=”idMenu”）を用意します。必要に応じて変更して下さい。

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