skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

jQueryでメニューをわかりやすくする「Side Navigation Tooltip / Popup Bubble」

｜ ｜ ｜ ｜ ｜ ｜ ｜

メニューのテキストは可能な限り短くかつわかりやすくしますが、なかなか一発で伝えにくいものです。
そんな時、各メニューに対する説明を明示すると、ユーザーフレンドリーになり、クリック率も上がるかもしれません。
今回はJavaScriptライブラリのjQueryを使用して実現します。
via：Side Navigation Tooltip / Popup Bubble

使用方法
まずはメニューを普通に記述します。
<ul class="sidenav">
<li><a href="#">Home</a></li>
<li><a href="#">Portofolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>

また、CSSは以下のようなものが指定されていたとします。
ul.sidenav {
margin: 0;
padding: 0;
width: 200px;
list-style: none;
font-size: 1.2em;
}
ul.sidenav li {
margin: 0;
padding: 0;
}
ul.sidenav li a{
padding: 10px 10px 10px 25px;
display: block;
color: #fff;
text-decoration: none;
background: #005094;
}
ul.sidenav li a:hover {
background-color: #004c8d;
}

これに説明を加えるためには、まず各メニューに以下のように追記します。
<li>
<a href="#">Home</a>
<div><p>説明を書きます</p></div>
</li>

次にCSSにも以下のように追記します。
ul.sidenav li a{
padding: 10px 10px 10px 25px;
display: block;
color: #fff;
text-decoration: none;
width: 165px;
background: #005094;
position: relative;　/* 追記箇所 */
z-index: 2;　/* 追記箇所 */
}
/* ここから追記 */
ul.sidenav li div {
display: none;
position: absolute;
top: 2px;
left: 0;
width: 225px;
font-size: 0.9em;
background: url(/test/img/bubble_top.gif) no-repeat right top;
}
ul.sidenav li div p {
margin: 7px 0;
line-height: 1.6em;
padding: 0 5px 7px 30px;
background: url(bubble_btm.gif) no-repeat right bottom;
}

最後にJavaScriptを記述します。
jQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul.sidenav li").hover(function() {
//ul.sidenav liにマウスオーバーした時の処理
$(this).find("div").stop()
.animate({left: "210", opacity:1}, "fast") //左から210pxに移動させる
.css("display","block")　//display:none;を解除
}, function() {
//ul.sidenav liからマウスアウトした時の処理
$(this).find("div").stop()
.animate({left: "0", opacity: 0}, "fast") //左から0pxに戻す
});
});
</script>

これで完成です。
今回は縦型のメニューを例としてあげましたが、上記js内のleftをtopなどとすれば横型にも対応可能です。
jQueryでメニューをわかりやすくする「Side Navigation Tooltip / Popup Bubble」サンプル

記事作成：2009年06月24日

前の記事：入力を促す文字をフォームに表示するJavaScript「JQUERY.FIELDTAG.JS」
次の記事：div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」