A Stylish Navigation Menu by Tutorialzine


Description: マウスを乗せると縦スライドして色が切り替わるメニュー。テキストメニューをスタイリッシュに見せることができるのでSEOも考慮しているサイトにも使えそうです。
Sample: demo
Tutorial: A Stylish Navigation Menu by Tutorialzine
License: 商用可能 ※ただし、再配布、ソースの販売は不可

Sample

マウスを乗せて動作を確認できます

Note

$(document).ready(function(){

	$('#navigationMenu li .normalMenu').each(function(){

		$(this).before($(this).clone().removeClass().addClass('hoverMenu'));

	});

	$('#navigationMenu li').hover(function(){

		$(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200);

	},

	function(){

		$(this).find('.hoverMenu').stop().animate({marginTop:'-25px'},200);

	});

});

軽量なスクリプトです。

Related snippet :

  • Description: オンマウスでフェードエフェクトをかけながら画像を切り替えます。cssスプライト使用。シンプルなエフェクトですが、クロスブラウザにも対応しており、目を ...
  • Description: マウスオーバーで要素が滑らかにプルダウンするメニューです。軽量で動きも流動的でインパクトがあります。 Sample: demo ...
  • Description: マウスオーバーでストンとキャプションが落ちるメニューを実装するプラグインです。エフェクトが可愛いですね。実装にはjquery.easingが使われて ...
  • Description: マウスオーバーで可愛いアイコンが降り、離すと裏から戻る、というアニメーションのグローバルメニューです。ユニークでインパクト有ります。 Sa ...
  • Description: 画像にマウスオーバーするとアニメーションしながら拡大します。サムネイルにインパクトを与えたり、メニューとしても使えそうです。MacのDockライクな ...
  • Description: 美しいサイドアウトナビゲーションです。マウスを乗せる事でアイコンがスライドインします。また、メニュー全体をposition: fixed;で固定させ ...
  • Description: メニュー項目にマウスを合わせるとラインがアニメーションしながら付いてきます。ラインはテキストの長さに応じて自動で調節されますのでテキストメニューに色 ...