ウェブ学のすすめ

Study of Web Design & Programing

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

jQuery

プレビュー


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

コード

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery でドロップダウンメニューver2</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.7.2.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]-->
<script>
$(function(){
	$("ul.main li").hover(function(){
		$(">ul:not(:animated)",this).slideDown("slow");
	},
	function(){
		$(">ul",this).slideUp("slow");
	})
});
</script>
</head>
<body>
<div id="container">
<ul class="main">
<li><a href="#">HTML</a>
<ul class="sub">
<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>	
<li><a href="#">head要素</a></li>
<li><a href="#">body要素</a></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="#">-color</a></li>	
<li><a href="#">-image</a>
<ul class="sub">
<li><a href="#">-repeat</a></li>
<li><a href="#">-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></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;
}

#container {
	width:600px;
	margin:10px auto;
}

ul {
	list-style-type:none;
}

ul.main li {
	background-image:url(http://jsrun.it/assets/q/t/P/W/qtPWL.png);
	background-repeat:no-repeat;
	height:38px;
	width:150px;
	float:left;
	position:relative;
}

ul.main li a {
	text-decoration:none;
	color:#fff;
	display:block;
	line-height:38px;
	height:38px;
	width:150px;
	font-weight:bold;
	text-indent:30px;
	position:relative;
}

ul.main li a:hover {
	background-image:url(http://jsrun.it/assets/s/r/0/k/sr0kj.png);
}

ul.sub li ul.sub{
    position:absolute;
    left:150px;
    top:0;
}
ul.sub {
	display:none;
}

ul.main:after {
    content:".";
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}

/* IE7 対策 */
ul.main{
	zoom:1;
}
*+html ul.main li{
    display:inline;
    zoom:1;
}
*+html ul.sub{
    zoom:1;
    position:relative;
}