以前jQueryを使って簡単プルダウンメニューと記事を書いたんですが、今回は以前と違ってもう少し活用性のあるように作ってみました。
以前と違う点は、プルダウンメニューが表示される時にも少し動きつけた点と画像やアイコンを使い見栄えも整えました。
概要としては大体一緒なんですが、以前仮説が少なすぎたので、今回は詳しく解説を入れていきたいと思います。
プルダウンのナビゲーションの解説
まず今回使用している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" height="40" /></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" height="40" /></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" height="40" /></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" height="40" /></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" height="40" /></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;
}
はじめまして。MAXと申します。
いつも、参考にさせて頂いております。
サンプルのプルダウンを使って、表示されているページが解るように、親メニュー（CSS、Web Disign、Javascript、Flash、Movable Type）を、それぞれ色もしくはボタン画像を変えることは可能でしょうか？
ご教授頂ければ幸いです。
宜しくお願い致します。
2010年06月30日 22:19