ウェブ学のすすめ

Study of Web Design & Programing

jQuery でドロップダウンメニュー

jQuery

プレビュー

↓スマートフォンの方はこちらからプレビューできます。
jQuery でドロップダウンメニュー - js do it

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery でドロップダウンメニュー</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<ul class="menu">
<li><a href="#">HTML</a>
<ul class="sub">
<li><a href="#">head要素</a></li>
<li><a href="#">body要素</a></li>
<li><a href="#">h要素</a>
<ul class="sub">
<li><a href="#">h1</a></li>
<li><a href="#">h2</a></li>
<li><a href="#">h3</a></li>
<li><a href="#">h4</a></li>
<li><a href="#">h5</a></li>
<li><a href="#">h6</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">CSS</a>
<ul class="sub">
<li><a href="#">margin</a></li>
<li><a href="#">background</a>
<ul class="sub">
<li><a href="#">background-color</a></li>
<li><a href="#">background-image</a>
<ul class="sub">
  <li><a href="#">background-repeat</a></li>
  <li><a href="#">background-position</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">padding</a></li>
</ul>
</li>
<li><a href="#">JavaScript</a>
<ul class="sub">
<li><a href="#">Document</a>
<ul class="sub">
<li><a href="#">Form</a></li>
<li><a href="#">Image</a></li>
<li><a href="#">Anchor</a></li>
<li><a href="#">Area</a></li>  
<li><a href="#">Layer</a></li>    
<li><a href="#">Link</a></li>    
<li><a href="#">Applet</a></li>    
</ul>
</li>
<li><a href="#">History</a></li>
<li><a href="#">Location</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

CSS

@charset "utf-8";

*{
	margin:0;
	padding:0;
	list-style-type:none;
}
html {
    overflow-y:scroll; //常にスクロールバーを表示する
    }
#container{
	margin:100px auto;
	width:537px;
}
ul.menu li{
	float:left;
	width:179px;
	height:48px;
	background-image:url(http://jsrun.it/assets/3/X/Y/T/3XYTj.png);
	position:relative;
}
* html ul.menu li{
	display:inline;
	zoom:1;
}
*+html ul.menu li{
	display:inline;
	zoom:1;
}
ul.menu li a{
	display:block;
	width:100%;
	height:100%;
	line-height:48px;
	text-indent:30px;
	font-weight:bold;
	color:#CFDFB5;
	text-decoration:none;
	position:relative;
}
ul.menu li a:hover{
        background-image:url(http://jsrun.it/assets/q/1/x/t/q1xtJ.png);
}
ul.sub{
	display:none;
}
* html ul.sub{
	zoom:1;
	position:relative;
}
*+html ul.sub{
	zoom:1;
	position:relative;
}
ul.sub li{
	float:none;
}
ul.sub li ul.sub{
	position:absolute;
	left:179px;
	top:0;
}
ul.menu{
	zoom:1;
}
ul.menu:after {
	height:0;
	visibility:hidden;
	content:".";
	display:block;
	clear:both;
}

JavaScript

$(function(){
    $("ul.menu li").hover(function(){
	$(">ul:not(:animated)",this).slideDown("slow");
    },function(){
	$(">ul",this).slideUp("slow");
    });
});