FLASHぽいメニューを簡単導入「jQuery flashy navigation」

メニューにマウスオーバーした時にFLASHっぽくアニメーションさせられるjQuery flashy navigation with easing and hoverIntentを紹介します。
FLASHぽいメニューを簡単導入「jQuery flashy navigation」サンプル

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」サンプル

sponsors

「FLASHぽいメニューを簡単導入「jQuery flashy navigation」」をシェアする

記事作成:
記事URL:

TOP > > > FLASHぽいメニューを簡単導入「jQuery flashy navigation」