[JS]ナビゲーションにツールチップをスライド表示させるスクリプト
Post on:2009年3月11日
sponsors
ナビゲーションにツールチップをアニメーションでスライド表示させるスクリプトをSoh Tanakaから紹介します。
Side Navigation Tooltip / Popup Bubble
demo
ナビゲーションはリスト要素で実装されており、ツールチップの箇所は下記のようになっています。
|
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> <li> <a href="#">Home</a> <div><p>Go home!</p></div> </li> </textarea> |
スクリプトのベースにはjquery.jsが使用されており、表示位置や不透明度などを調整することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<textarea name="code" class="html" cols="60" rows="5"> <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> </textarea> |
sponsors
