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

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

sponsors

使用方法

まずはメニューを普通に記述します。

<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などとすれば横型にも対応可能です。

サンプル

topに戻る

sponsors

Javascriptサンプルページ一覧
skuare.net