[JS]ナビゲーションにツールチップをスライド表示させるスクリプト

ナビゲーションにツールチップをアニメーションでスライド表示させるスクリプトをSoh Tanakaから紹介します。

Side Navigation Tooltip / Popup Bubble
demo

ナビゲーションはリスト要素で実装されており、ツールチップの箇所は下記のようになっています。

<li>
	<a href="#">Home</a>
<div>

Go home!
</div>
</li>

スクリプトのベースにはjquery.jsが使用されており、表示位置や不透明度などを調整することができます。

<script type="text/javascript">
$(document).ready(function(){

	$("ul.sidenav li").hover(function() {
		$(this).find("div").stop()
		.animate({left: "210", opacity:1}, "fast")
		.css("display","block")

	}, function() {
		$(this).find("div").stop()
		.animate({left: "0", opacity: 0}, "fast")
	});

});
</script>

Post on:2009年3月11日