…ここからが続き

プルダウンのナビゲーションの解説

まず今回使用しているjsは「jquery.js」ロールオーバー時に使っている「yuga.js」プルダウンのフワって感じの動きをつけている「menu.js」を使わさせて頂いております。

XHTML

<ul id="globalNavi">
<li><a href="#"><img src="image/css.gif" alt="CSS" class="btn" width="180" /></a>
	<ul>
    <li class="first"><a href="#">CSS テクニック</a></li>
    <li><a href="#">CSS ハック</a></li>
    <li><a href="#">CSS テンプレート</a></li>
    <li><a href="#">CSS レイアウト</a></li>
    </ul>
</li>
<li><a href="#"><img src="image/web_design.gif" alt="Web Design" class="btn" width="180" /></a>
	<ul>
    <li class="first"><a href="#">アイコン素材</a></li>
    </ul>
</li>
<li><a href="#"><img src="image/javascript.gif" alt="Javascript" class="btn" width="180" /></a>
	<ul>
    <li class="first"><a href="#">ロールオーバー</a></li>
    </ul>
</li>
<li><a href="#"><img src="image/flash.gif" alt="Flash" class="btn" width="180" /></a>
	<ul>
    <li class="first"><a href="#">Action Script </a></li>
    </ul>
</li>
<li><a href="#"><img src="image/mt.gif" alt="Movable Type" class="btn" width="180" /></a>
    <ul>
    <li class="first"><a href="#">プラグイン</a></li>
    <li><a href="#">テンプレート</a></li>
    </ul>
</li>
</ul>

CSS

1. ulのスタイルのリセット、liの横並びを行い、忘れずにposition:relative;をかけておきましょう。

#globalNavi, #globalNavi ul {
	margin:0;
	padding:0;
	list-style-type:none;
	position:relative;
}
#globalNavi li	{
	float:left;
	position:relative;
}

2. プルダウンで表示されるulの要素の全体の幅とpositionを決めておきます。（position: absolute;を忘れずに！）

#globalNavi ul {
	width: 175px;
	position: absolute;
	top: 40px;
	left: 3px;
	display: none;
}

3. プルダウンで表示されるulの要素の全体の幅とpositionを決めておきます。（position: absolute;を忘れずに！）

#globalNavi ul {
	width: 175px;
	position: absolute;
	top: 40px;
	left: 3px;
}

4. プルダウンで表示されるli要素の絶対の幅やpadding領域、iconの指定をしておきます。（display: block;を忘れずに！）

#globalNavi ul li a	{
	width: 143px;
	display: block;
	background: #BFC0C0 url(image/icon.gif) no-repeat;
	padding: 7px 5px 8px 27px;
	border-bottom: 1px dotted #909090;
	color: #000;
	text-decoration: none;
}

5. hoverの動き。liの一番最初の要素の指定です。（早くfirst-childが普通に使えるようになって欲しいです...）

#globalNavi ul li a:hover	{
	background: #000 url(image/icon_on.gif) no-repeat;
	color: #FFF;
}
#globalNavi ul li.first a	{
	background: #BFC0C0 url(image/bg_navi.gif) no-repeat;
	padding: 16px 5px 7px 27px;
}
#globalNavi ul li.first a:hover	{
	background: #000 url(image/bg_navi_on.gif) no-repeat;
}

menu.js

idの名前を変更したい方は「#globalNavi」の部分を変更。show(600)の数字を小さくすると動きが早くなるので、お好みの数字を入力下さい。

function mainmenu(){
$(" #globalNavi li").hover(function(){
		$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(600);
		},function(){
		$(this).find('ul:first').css({visibility: "hidden"});
		});
}

 
 
$(document).ready(function(){					
	mainmenu();
});

まとめ

もしプルダウンに表示される部分も画像にしたい場合は、4.と5.のCSSを消してXHTMLを画像に変更すれば大丈夫です。

最近プルダウンのナビゲーションを使っているサイトをよく見かけますし、仕事使う機会も少なくはないので、もし使う機会があったら是非参考にして下さい。



追加項目

dafonさんから多段式プルダウンにしたいと言うリクエストがありましたので、三段、四段式にしたい場合は下記CSSを追加して下さい。

サンプルページ2でご確認下さい。

#globalNavi ul li ul {
	width: 175px;
	position: absolute;
	top: 0px;
	left: 175px;
}