※この記事は﹁Web制作の現場で使えるjQuery UIデザイン入門﹂の第19回です。過去の記事もご覧ください。
﹁ドロップダウン型メニューバー﹂は、メニューにマウスカーソルを重ねるとサブメニューが下または右方向に展開するUIです。グローバルメニューとして設置すれば、サイト内のどのページからでもサブカテゴリーや孫カテゴリーにワンクリックで直接移動できる、使い勝手のいいナビゲーションを実現できます。今回は、jQueryでドロップダウン型メニューバーを作成する方法を解説します。
今回制作するサンプル
|
|---|
| ドロップダウン型のメニューバーのサンプル。マウスカーソルを重ねるとサブメニューが展開する（画像クリックでサンプルページを表示します） |
基本のドロップダウンメニュー
メインメニューにマウスカーソルを重ねると、すぐ下にサブメニューを表示するドロップダウン型メニューから作りましょう。サブメニューの1回層目までの表示に対応したメニューです。
メインメニューのすぐ下にサブメニューを表示する
メニューバーのHTML／XHTML︵以下、HTML︶は以下のように記述します。メインメニューをul/li要素で記述し、メインメニューに対応するサブメニューをli要素の中にul/li要素で入れ子に記述していきます。メインメニューのul要素にはclass属性﹁menu﹂を、子カテゴリーのul要素にはclass属性﹁sub﹂を付けて親子関係を分かりやすくしておきます。
▼サンプル01︵HTML部分︶
<ulclass="menu">
<li><ahref="#">メニューA</a>
<ulclass="sub">
<li><ahref="#">サブメニューA</a></li>
<li><ahref="#">サブメニューA</a></li>
<li><ahref="#">サブメニューA</a></li>
</ul>
</li>
<li><ahref="#">メニューB</a>
<ulclass="sub">
<li><ahref="#">サブメニューB</a></li>
<li><ahref="#">サブメニューB</a></li>
<li><ahref="#">サブメニューB</a></li>
</ul>
</li>
<li><ahref="#">メニューC</a>
<ulclass="sub">
<li><ahref="#">サブメニューC</a></li>
<li><ahref="#">サブメニューC</a></li>
<li><ahref="#">サブメニューC</a></li>
</ul>
</li>
</ul>
CSSでは上記画面のようにレイアウトする
メインメニューのli要素︵ul.menu li︶はfloatプロパティで横並びにします。a要素はクリック領域をli要素と同じサイズに拡大するため、display:block;でブロックレベル要素に変換し、widthとheightに100%を指定します。a:hoverにはマウスオーバー時の背景を設定して簡単なロールオーバー効果を付けておきましょう。
サブメニューのli要素︵ul.menu li ul.sub︶にposition:absolute;を設定しているのは、サブメニューを開いた際にマウスイベントが動作しなくなる現象を防ぐためです。最後に、メインメニューの回り込み︵float:left;︶を解除するためclearfixを設定します。clearfixについてはコラムで詳しく解説していますので参照してください。
次ページ‥
▼サンプル01︵CSS部分︶
ul.menu li{
float:left;
width:179px;
height:48px;
background:url("images/btn.png");
}
ul.menu li a{
display:block;
width:100%;
height:100%;
line-height:48px;
text-indent:30px;
font-weight:bold;
color:#CFDFB5;
text-decoration:none;
}
ul.menu li a:hover{
background:url("images/btn_over.png");
}
ul.menu li ul.sub{
position:absolute;
}
ul.menu{
zoom:1;
}
ul.menu:after {
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;
}
▼サンプル01︵スクリプト部分︶
$(function(){
$("ul.sub").hide();
$("ul.menu li").hover(function(){
$("ul:not(:animated)",this).slideDown("fast")
},
function(){
$("ul",this).slideUp("fast");
})
})
$(セレクター).hover(function(){
マウスオーバー時のイベント
},function(){
マウスアウト時のイベント
})
floatによる回り込みを解除するclearfix
floatを利用して回り込みをする場合、後続する要素でclear:bothを指定すると回り込みを解除できます。ただし、サンプル1のように後続する要素が存在しない場合など、clear:bothで回り込みを解除できないこともあります。そんなときに役立つのが﹁clearfix﹂と呼ばれるCSSのテクニックです。
ul.menu:after {
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
}
ul.menu{
zoom:1;
}
ソーシャルリアクション
この連載の記事
一覧へ
WebPro
jQueryとAjaxで作るスムーズページング
WebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。
