‘Mootools HP’ Inspired Navigation


Description: MootoolsのサイトにあるようなメニューのエフェクトをjQueryで動かしたもの。アクセス時にアニメーションを掛け、マウスオーバー時にもアニメーションさせます。汎用的で使いやすいですね。IE6はliの関係で動きが良くないですが、cssで直せます。
Sample: demo
Tutorial: How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery
License: -

Sample

Note

$(document).ready(function()
{
	slide("#sliding-navigation", 25, 15, 150, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
	// creates the target paths
	var list_elements = navigation_id + " li.sliding-element";
	var link_elements = list_elements + " a";

	// initiates the timer used for the sliding animation
	var timer = 0;

	// creates the slide animation for all list elements
	$(list_elements).each(function(i)
	{
		// margin left = - ([width of element] + [total vertical padding of element])
		$(this).css("margin-left","-180px");
		// updates timer
		timer = (timer*multiplier + time);
		$(this).animate({ marginLeft: "0" }, timer);
		$(this).animate({ marginLeft: "15px" }, timer);
		$(this).animate({ marginLeft: "0" }, timer);
	});

	// creates the hover-slide effect for all link elements
	$(link_elements).each(function(i)
	{
		$(this).hover(
		function()
		{
			$(this).animate({ paddingLeft: pad_out }, 150);
		},
		function()
		{
			$(this).animate({ paddingLeft: pad_in }, 150);
		});
	});
}

軽量で使い勝手も良いのでは。

Related snippet :

  • Description: サイドからメニューがスムーズに飛び出すタブナビゲーションです。fixさせても面白いですね。デフォルトではIE6で表示できていません。開いたまま、他の ...
  • Description: Macライクなドックメニューを実装するプラグインです。爽快なアニメーションがかわいいですね。アイコンにはキャプションも表示してくれます。クロスブラウ ...
  • Description: マウスオーバーで隠れていた子リストが上から表示されます。消すには×を押す必要があります。クロスブラウザで動作してくれるので、少し変わったUIにしたい ...
  • Description: ツールチップがフェードインアウトします。ツールチップ内は画像やリンクを含めたり、テキストのドラッグも可能。非常に軽量なコードで実装できますので汎用性 ...
  • Description: 美しいサイドアウトナビゲーションです。マウスを乗せる事でアイコンがスライドインします。また、メニュー全体をposition: fixed;で固定させ ...
  • Description: オンマウスでフェードエフェクトをかけながら画像を切り替えます。cssスプライト使用。シンプルなエフェクトですが、クロスブラウザにも対応しており、目を ...
  • Description: フォームがアクティブの時にラベルを外にスライドさせます。通常はアクティブ時に消えますが、外にだすことで、入力補助になりそうです。クロスブラウザにも対 ...