【ｊQuery】ドロップダウンメニューについて

Ciel · #1

何度もすいません。Cielです。

コミュニティを完全に私用で使ってますが、申し訳ないです＞＜

下記のソースにあるドロップダウンメニューについて聞きたいことがあります。
http://gihyo.jp/assets/files/design/ser ... mo4-1.html
このソースはとりあえず解読して、理解したんですが、
ちょっと腑に落ちない点がありまして。

このドロップダウンメニューの
メニュー1-1～1-4、2-1～2-4、3-1～3-4の表示のされ方についてです。
これらの表示のされ方は、メニュー１、２、３の文字にカーソルを置くと「下｣にずらっと表示されますよね？

でも、さらにその下の階層のメニュー1-1にカーソルを置いたときのメニュー1-3-1～1-3-4などは、
メニュー1-1の「横」に表示されますよね？

この違いが分かりません。
どちらも同じ関数が適用されていると思うのですが、挙動が違います。
これは何故でしょうか？
恐らくどこかのCSSが絡んでいると思うのですが、自分では分かりませんでした。

分かる方、ご回答よろしくお願いします。

（本当に手が空いた暇なときに見てもらっていいです。私もゆっくり勉強してますので。。）

21:48追記：ソース貼り忘れてましたorz

コード:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<meta http-equiv="content-style-type" content="text/css; charset=utf-8" /> 
<link rel="stylesheet" href="css/import.css" type="text/css" /> 
<title>サンプルデモ４−１</title> 
<style type="text/css"> 
 
ul#menu {
	padding: 15px 0 0 15px;
}
 
	ul#menu li {
		float: left;
		position: relative;
	}
 
		ul#menu li a {
			border: solid #ccc 1px;
			border-right: none;
			padding: 10px;
			display: block;
			width:100px;
			background: #eee;
		}
		ul#menu li a.last-child {
			border-right: solid #ccc 1px;
		}
		ul#menu li a:hover,
		ul#menu li a.active {
			color: #fff;
			background: #666 !important;;
		}
 
		ul#menu li a.dropMenuPrev {
			background: #bbb;
		}
 
		ul#menu li ul {
			position: absolute;
			top:100%;
			left: 0;
		}
 
			ul#menu li ul li {
				float: none;
				*display: inline;
			}
				ul#menu li ul li a {
					border: solid #ccc 1px;
					border-bottom: none;
				}
				ul#menu li ul li a.last-child {
					border-bottom: solid #ccc 1px;
				}
 
					ul#menu li ul li ul {
						top: 0;
						left: 100%;
					}
					
</style> 
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 
jQuery(function($){
	// 最後のLI要素の子要素にあたるA要素のclassにはlast-childを振る
	$('#menu li:last-child > a').addClass('last-child');
 
	// #menu子要素のULは全てドロップダウンメニューなのでその親要素を取得しておく
	var dropMenuParent = $('ul','#menu').parent();
 
	// 全てのdropMenuParentで同じ関数を実行する
	dropMenuParent.each(function(){
 
		// 親の直下の子要素がドロップダウンメニューになるので取得する
		var dropMenu = $('>ul',this);
 
		// dropMenuを隠した上で、直前の要素（ここではアンカー要素）のclassにdropMenuPrevを振る
		dropMenu.hide().prev().addClass('dropMenuPrev');
 
		// thisはdropMenuParent[i]を指す
		// dropMenuParent[i]にhoverメソッドを利用して関数をbindする
		$(this).hover(function(){
 
			// mouseoverでdropMenuを表示する
			dropMenu.show().prev().addClass('active');
		},function(){
 
			// mouseoutでdropMenuを非表示にする
			dropMenu.hide().prev().removeClass('active');
		});
	});
});
</script> 
 
</head> 
<body> 
 
<ul id="menu"> 
	<li> 
		<a href="#">メニュー1</a> 
		<ul> 
			<li><a href="#">メニュー1-1</a> 
				<ul> 
					<li><a href="#">メニュー1-3-1</a></li> 
					<li><a href="#">メニュー1-3-2</a></li> 
					<li><a href="#">メニュー1-3-3</a></li> 
					<li><a href="#">メニュー1-3-4</a></li> 
				</ul> 
			</li> 
			<li><a href="#">メニュー1-2</a> 
				<ul> 
					<li><a href="#">メニュー1-2-1</a></li> 
					<li><a href="#">メニュー1-2-2</a></li> 
					<li><a href="#">メニュー1-2-3</a> 
						<ul> 
							<li><a href="#">メニュー1-2-3-1</a></li> 
							<li><a href="#">メニュー1-2-3-2</a></li> 
							<li><a href="#">メニュー1-2-3-3</a></li> 
							<li><a href="#">メニュー1-2-3-4</a></li> 
						</ul> 
					</li> 
					<li><a href="#">メニュー1-2-4</a></li> 
				</ul> 
			</li> 
			<li><a href="#">メニュー1-3</a> 
				<ul> 
					<li><a href="#">メニュー1-3-1</a></li> 
					<li><a href="#">メニュー1-3-2</a></li> 
					<li><a href="#">メニュー1-3-3</a></li> 
					<li><a href="#">メニュー1-3-4</a></li> 
				</ul> 
			</li> 
			<li><a href="#">メニュー1-4</a></li> 
		</ul> 
	</li> 
	<li> 
		<a href="#">メニュー2</a> 
		<ul> 
			<li><a href="#">メニュー2-1</a> 
				<ul> 
					<li><a href="#">メニュー2-1-1</a></li> 
					<li><a href="#">メニュー2-1-2</a></li> 
					<li><a href="#">メニュー2-1-3</a></li> 
					<li><a href="#">メニュー2-1-4</a> 
						<ul> 
							<li><a href="#">メニュー2-1-4-1</a></li> 
							<li><a href="#">メニュー2-1-4-2</a></li> 
							<li><a href="#">メニュー2-1-4-3</a></li> 
							<li><a href="#">メニュー2-1-4-4</a></li> 
						</ul> 
					</li>			
				</ul> 
			</li> 
			<li><a href="#">メニュー2-2</a></li> 
			<li><a href="#">メニュー2-3</a></li> 
			<li><a href="#">メニュー2-4</a></li> 
		</ul> 
	</li> 
	<li> 
		<a href="#">メニュー3</a> 
		<ul> 
			<li><a href="#">メニュー3-1</a></li> 
			<li><a href="#">メニュー3-2</a></li> 
			<li><a href="#">メニュー3-3</a></li> 
			<li><a href="#">メニュー3-4</a> 
				<ul> 
					<li><a href="#">メニュー3-4-1</a></li> 
					<li><a href="#">メニュー3-4-2</a></li> 
					<li><a href="#">メニュー3-4-3</a></li> 
					<li><a href="#">メニュー3-4-4</a></li> 
				</ul> 
			</li>			
		</ul> 
	</li> 
</ul> 
 
 
</body> 
</html>

Justy · #2

CSSですね。
ul#menu li ulが1つ目のサブメニュー、 ul#menu li ul li ulが2つ目のメニューの
位置を決めています。

topとかleftとかを変更してみると分かりやすいかと。

Ciel · #3

Justyさん、ありがとうございます！

なるほど！そこでしたか！
topとleftの使い方と、ｐositionの配置も全て理解できました。
助かりました。
ありがとうございました！

Justy · #4

　余談ですが、この htmlだと Javascriptをオフにして表示すると、マウスを合わせなくても
位置が判るようになるんじゃないかと思います。

Ciel · #5

Justy さんが書きました:　余談ですが、この htmlだと Javascriptをオフにして表示すると、マウスを合わせなくても
位置が判るようになるんじゃないかと思います。

offにしてみたら展開されて、位置がわかりました。
offにしてみるとわかりやすいときもありますね。
ありがとうございます＾＾

		4月 2024
日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

【ｊQuery】ドロップダウンメニューについて

【ｊQuery】ドロップダウンメニューについて

Re: 【質問】ドロップダウンメニューについて

Re: 【質問】ドロップダウンメニューについて

Re: 【質問】ドロップダウンメニューについて

Re: 【質問】ドロップダウンメニューについて