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

HTML/CSS/JavaScriptを扱っている方の為のコミュニティです。

色んな疑問や質問を皆で解決していきましょう!

※最初はjQuery限定のコミュでしたが、jQueryはJavaScriptのライブラリであり、
また、HTML/CSSも深く関わってくるので全部一つのコミュにまとめました。
フォーラム(掲示板)ルール
一般常識さえ守れば、どんなスレでも立てていただいて構いません。

常識外れの投稿やスレを見つけた場合は、私の判断で削除いたします。

スレ立てるまでもない、簡単な質問は、
「スレ立てるまでもない質問」のスレッドに投稿して下さい。

基本的には、一つの質問につき1つのスレッドを立てていただて構いません^^
返信
アバター
Ciel
記事: 252
登録日時: 9年前

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

#1

投稿記事 by Ciel » 8年前

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

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

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

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

でも、さらにその下の階層のメニュー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>サンプルデモ4−1</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>
最後に編集したユーザー Ciel on 2011年1月14日(金) 20:04 [ 編集 1 回目 ]
oui C'est la Vie♪

アバター
Justy
副管理人
記事: 122
登録日時: 9年前
住所: 神奈川県

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

#2

投稿記事 by Justy » 8年前

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

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

アバター
Ciel
記事: 252
登録日時: 9年前

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

#3

投稿記事 by Ciel » 8年前

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

なるほど!そこでしたか!
topとleftの使い方と、positionの配置も全て理解できました。
助かりました。
ありがとうございました!
oui C'est la Vie♪

アバター
Justy
副管理人
記事: 122
登録日時: 9年前
住所: 神奈川県

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

#4

投稿記事 by Justy » 8年前

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

アバター
Ciel
記事: 252
登録日時: 9年前

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

#5

投稿記事 by Ciel » 8年前

Justy さんが書きました: 余談ですが、この htmlだと Javascriptをオフにして表示すると、マウスを合わせなくても
位置が判るようになるんじゃないかと思います。
offにしてみたら展開されて、位置がわかりました。
offにしてみるとわかりやすいときもありますね。
ありがとうございます^^
oui C'est la Vie♪

返信

“HTML/CSS/JavaScript” へ戻る