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



jQueryのhover・show・hideだけ使って、
プルダウンメニューを表示させます。

1.読み込むJs

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

2.CSSの記述例

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

3.JavaScriptの記述例

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

4.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で表示させるデモページ

プルダウンのやり方って色々方法がありますが、
私は結構これでやってたりします。