コミュニティを完全に私用で使ってますが、申し訳ないです><
下記のソースにあるドロップダウンメニューについて聞きたいことがあります。
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>