アットウィキロゴ
mnk375 @ ウィキ
アットウィキロゴ
mnk375 @ ウィキ
ページ一覧

ドロップダウンメニュー多階層 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<title>sample2</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript">
$(function(){
	$("ul.menu li").hover(function(){
		$(">ul:not(:animated)",this).slideDown("fast");
	},
	function(){
		$(">ul",this).slideUp("fast");
	});
});
		</script>
		<style type="text/css">
*{
	margin:0;
	padding:0;
	list-style-type:none;
}
#container{
	margin:100px auto;
	width:537px;
}
ul.menu li{
	float:left;
	width:179px;
	height:48px;
	background:url("images/btn.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:url("images/btn_over.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;
}
		</style>
	</head>
	<body>
		<div id="container">
		<ul class="menu">
			<li><a href="#">メニューA</a>
				<ul class="sub">
					<li><a href="#">サブメニューA</a></li>
					<li><a href="#">サブメニューA</a></li>
					<li><a href="#">サブメニューA</a><!--
						--><ul class="sub">
							<li><a href="#">サブメニューA2</a></li>
							<li><a href="#">サブメニューA2</a></li>
							<li><a href="#">サブメニューA2</a></li>
						</ul><!--
					--></li>
				</ul>
			</li>
			<li><a href="#">メニューB</a>
				<ul class="sub">
					<li><a href="#">サブメニューB</a></li>
					<li><a href="#">サブメニューB</a>
						<ul class="sub">
							<li><a href="#">サブメニューB2</a></li>
							<li><a href="#">サブメニューB2</a></li>
							<li><a href="#">サブメニューB2</a>
								<ul class="sub">
									<li><a href="#">サブメニューB3</a></li>
									<li><a href="#">サブメニューB3</a></li>
									<li><a href="#">サブメニューB3</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">サブメニューB</a></li>
				</ul>
			</li>
			<li><a href="#">メニューC</a>
				<ul class="sub">
					<li><a href="#">サブメニューC</a>
						<ul class="sub">
							<li><a href="#">サブメニューC2</a></li>
							<li><a href="#">サブメニューC2</a></li>
							<li><a href="#">サブメニューC2</a></li>
						</ul>
					</li>
					<li><a href="#">サブメニューC</a></li>
					<li><a href="#">サブメニューC</a></li>
				</ul>
			</li>
		</ul>
		</div>
 
	</body>
</html>
「ドロップダウンメニュー多階層」をウィキ内検索
最終更新：2012年05月24日 10:39