メニュー下のラインがマウスを追いかけるようにアニメーションするギミックをjQueryで実現する方法の紹介です。紹介するコードは、Snipplrで見つけたコードに少しアレンジを加えています。

メニューとかで、マウスオーバーすると下の線（アンダーライン）が付いてくる↓のような動きになります。

作り方

HTML

メニューの部分を以下のように記述します。アニメーションするバーの部分は、<span></span>タグが担当しています。そして、現在のページには、currentのクラスを設定しています。

<div id="nav">
	<a href="#">ホーム</a>
	<a href="#" class="current">お問い合わせ</a>
	<a href="#">サービス</a>
	<a href="#">ギャラリー</a>
	<a href="#">ブログ</a>
	<span></span>
</div>

CSS

CSS部分は、こんな感じです。

#nav { position: relative; }
#nav a {text-decoration:none; padding:10px; color:#333; }
#nav span {background:#000; height:5px; display:block; position:absolute; width:50px; left:0}

jQuery

ページ表示のタイミングで、クラスcurrentが設定されたメニューへラインを移動させます。その後マウスオーバー時に、mouseoverイベントを使って、該当のメニューへアニメーションさせます。とてもシンプルです。

$(function() {
	// 初期位置へ移動
	$('#nav span').css({ 
		width: $('#nav .current').outerWidth(),
		left: $('#nav .current').position().left 
	});
	// マウスオーバーでアニメーション
	$('#nav a').mouseover(function(){
		$('#nav span').stop().animate({
			width: $(this).outerWidth(),
			left: $(this).position().left}
		,'fast');
	});
});

うまく使えば、ちょっとしたサイトのアクセントになりそうですね。

今回使用したデモは、ダウンロードすることもできます。こちらは、完全なHTMLになっていますので、必要な方はダウンロードして使ってください。