戻る

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

次へ 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> 
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("ul.sub").hide();
	
	/*************************************************************************************
	hoverはmouseover/mouseoutと違いマウスが子要素を含んでいなくても要素内であれば有効
	逆にmouseover/mouseoutは要素内であっても子要素の位置にマウスが移動したら無効になる
	**************************************************************************************/
	$("ul.menu li").hover(function(){
		$("ul:not(:animated)",this).slideDown("fast");
	},function(){
		$("ul",this).slideUp("fast");
	});
});
</script>
<style type="text/css">
body,ul{
	margin:0;
	padding:0;
}
li{
	list-style-type:none;
}
#container{
	margin:0 auto;
	width:537px;/*ボタンの幅（179px） x 3*/
}

/***************************************************************
子孫セレクターなのでsubクラスのli要素にも影響する
子セレクター（ul.menu > li） だとsubクラスのli要素には影響しない
*****************************************************************/
ul.menu li{
	float:left;
	width:179px;/*ボタンの幅*/
	height:48px;/*ボタンの高さ*/
	background-image:url("image_dropdown/btn.png");
	
	/***************************************************************
	floatをかけていることにより、メニュー1つ分だけスライドして、d
	width指定により強制的に上下にリストが並ぶが、position:relative
	をしていすると、強制的に上下に並べたその配置が存在位置となり、
	そこに向かってスライドするのでなめらかに動く
	*****************************************************************/
	position:relative;
}
ul.menu li a{
	display:block;
	width:100%;/*liタグのwidth:179pxに対して100%*/
	height:100%;/*liタグのheight:48pxに対して100%*/
	line-height:48px;/*ボタンの高さに一致->メニュ文字の中間寄せ*/
	text-indent:30px;/*メニュー文字のインデント*/
	font-weight:bold;
	color:#CFDFB5;
	text-decoration:none;/*a要素の下線を削除*/
}
ul.menu li a:hover{
	background:url("image_dropdown/btn_over.png");
}

/****************************************
「clearfix」と呼ばれるテクニック
空divを追加せずにfloatをクリアする
IE6～7の場合は:after疑似クラスに対応していないため
clearfixが動かないが、IE独自プロパティの
zoom:1とすることででfloatを解除できる
********************************************/
ul.menu:after {
	height:0;/*高さを0にして追加する文字を見えなくする*/
	visibility:hidden;/*透明度を0にしてみえなくする（display:noneでは要素ごと消えるのでNG）*/
	content:".";/*menuクラスのul要素の後に文字「.」を追加*/
	display:block;/*追加する文字をブロックレベル要素扱いにする*/
	clear:both;/*floatをリセットする*/
}
ul.menu{
	zoom:1;
}
</style>
<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="#">サブメニューB</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="#">サブメニューB</a></li>
				<li><a href="#">サブメニューB</a></li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>
inserted by FC2 system