FLASHぽいメニューを簡単導入「jQuery flashy navigation」
メニューにマウスオーバーした時にFLASHっぽくアニメーションさせられるjQuery flashy navigation with easing and hoverIntentを紹介します。
jQuery flashy navigation with easing and hoverIntentからファイルをダウンロード。
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script src="jquery.flashyNav.1.0.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.class名').flashyNav({
rolloverColor: '#FF0000', //マウスオーバー時の色
rolloverDuration: 1000, //速度
easingMethod: 'easeInOutQuint' //easing設定
});
});
</script>
メニューを普通に記述します。
<ul class="class名">
<li><a>メニュー1</a></li>
<li><a>メニュー2</a></li>
<!-- メニュー分 -->
</ul>
必要に応じて初期時のCSSを記述しましょう。FLASHぽいメニューを簡単導入「jQuery flashy navigation」サンプル
コメントする
記事作成:2011年4月22日 10:10