jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種

2012.03.29 jQuery1.7に対応

カラーをアニメーションさせるナビゲーションにはjquery.color.jsプラグインを使用しています。

ベースとなるhtml

今回はテキストタイプなので文字列をリストで並るだけですね。
一部spanを入れた方が動作が安定することがあったので入れてます。javascriptのコードにspanを指定していなかったら外してください。

html

	<ul id="nav1">
		<li><a href="#">HOME</a></li>
		<li><a href="#">ABOUT</a></li>
		<li><a href="#">GALLERY</a></li>
		<li><a href="#">LINK</a></li>
	</ul>

1.マウスオーバーでスライドするボタン

単純に横にスライドするアニメーションは「marginLeft」を変化させます。
テキストの色はcssで変えてます。

マウスオーバーでスライドするボタン

このナビゲーションに限ってはliにspanを入れると安定して動作するっぽいです。

html

	<li><a href="#"><span>HOME</span></a></li>

css

	#nav1 {
		margin-left: 20px;
		font-size: 100%;
		font-weight: bold;
		list-style: none;
	}
	#nav1 li {
		margin-bottom: 0.8em;
	}
	#nav1 li a {
		text-decoration: none;
		color: #333333;
	}
	#nav1 li a:hover {
		color: #FF9900;
	}

javascript

	$(function() {
		 $('#nav1 li a').hover(
			function(){
				$(this).find('span').stop().animate({'marginLeft':'25px'},100);
			},
			function () {
				$(this).find('span').stop().animate({'marginLeft':'0px'},300);
			}
		);
	});

2.滑らかにバックグラウンドカラーが変化するボタン

「backgroundColor」をアニメーションすることでバックグラウンドカラーが変化するボタンができます。

滑らかにバックグラウンドカラーが変化するボタン

css

	#nav2 {
		font-size: 85%;
		font-weight: bold;
		list-style: none;
	}
	#nav2 li a {
		text-decoration: none;
		display: block;
		color: #FFFFFF;
		background: #999999;
		width: 160px;
		padding: 5px 10px;
	}

javascript

	$(function() {
		 $('#nav2 li a').hover(
			function(){
				$(this).stop().animate({backgroundColor: '#FF9900'},200);
			},
			function () {
				$(this).stop().animate({backgroundColor: '#999999'},700);
			}
		);
	});

3.背景画像に指定したアイコンがアニメーションするボタン

リストに背景画像でアイコンを配置することは結構あるかと思います。
「backgroundPosition」を変化させればワンポイントになりそうです。

滑らかにバックグラウンドカラーが変化するボタン

css

	#nav3 {
		font-size: 85%;
		font-weight: bold;
		list-style: none;
	}
	#nav3 li {
		margin-bottom: 2px;
	}
	#nav3 li a {
		text-decoration: none;
		display: block;
		color: #FFFFFF;
		width: 160px;
		padding: 5px 10px 5px 35px;
		background: #999 url(img/allow.gif) no-repeat 3px center;
	}

javascript

$(function() {
	$('#nav3 li a').hover(
		function(){
			$(this).stop().animate({ 'backgroundPosition': '15px' }, 200);
		},
		function () {
			$(this).stop().animate({ 'backgroundPosition': '0px' }, 200);
		}
	);
});

4.ヒュンとバーが伸びてくるボタン

ヒュンとバーが伸びてくるナビゲーションです。Flashサイトでは結構見ますよね。
バーは単色なので画像を使用しないでもできそうですが、ここでは画像を使用しています。

ヒュンとバーが伸びてくるボタン

	#nav4 {
		font-size: 100%;
		font-weight: bold;
		list-style: none;
	}
	#nav4 li a {
		text-decoration: none;
		display: block;
		color: #333333;
		width: 160px;
		padding: 5px 10px 5px 25px;
		background: url(img/nav04.gif) repeat-y -300px 0;
	}

javascript

$(function() {
	 $('#nav4 li a').hover(
		function(){
			$(this).stop().animate({'backgroundPosition': '0px'},200);
		},
		function () {
			$(this).stop().animate({'backgroundPosition': '-300px'},300);
		}
	);
});

やってることは3とほとんど変わりませんが、cssで背景画像を画像サイズ分だけマイナスして隠し、アニメーションでは0に向かって動かします。

5.くるっと切り替わるボタン

下にあるマウスオーバーボタンにくるっと切り替わるようなアニメーションをします。

くるっと切り替わるボタン

	#nav5 {
		margin-left: 20px;
		font-size: 100%;
		font-weight: bold;
		list-style: none;
	}
	#nav5 li {
		margin-bottom: 0.8em;
		overflow: hidden;
		height: 1em;
		line-height: 1;
		position: relative;
		width: 6em;
	}
	#nav5 li a {
		text-decoration: none;
		color: #333333;
		position: absolute;
	}
	#nav5 li span {
		position: absolute;
		left: 0;
		top: 1.5em;
		white-space: nowrap;
	}
	#nav5 li span a {
		color: #FF9900;
	}

javascript

	$(function() {
		$('#nav5 li')
		.each(function(){
			$(this).append('<span>'+$(this).html()+'</span>')
		})
		 .hover(
			function(){
				$('a', this).stop().animate({
					marginTop:'-1.5em'
				},200);
			},
			function () {
				$('a', this).stop().animate({
					marginTop:'0em'
				},300);
			}
		);
	});

最初にリストの数だけテキスト情報をコピーしています。別のスタイルを適用するために複製された要素にspanを追加しています。
「overflow: hidden」でリストの範囲を指定しておけば複製したテキストは隠れます。あとは上にスライドするだけですね。
※これはIE6だとおかしな動作をするっぽいです。

6.マウスオーバーすると文字が拡大する。

文字サイズ（fontSize）をアニメーションするだけですね。

マウスオーバーすると文字が拡大する

javascript

	$(function() {
		 $('#nav6 li a').hover(
			function(){
				$(this).stop().animate({fontSize : '260%'},200);
			},
			function () {
				$(this).stop().animate({fontSize: '100%'},300);
			}
		);
	});

7.マウスオーバーしたボタンに何かが追尾する。

マウスオーバーしたボタンに何かが追尾する。
ここでは何かはspanになっていますが画像とかの方がいいかもしれません。

マウスオーバーしたボタンに何かが追尾する

jQueryでspanを作成するのでこのナビゲーションではulをdivで囲んでいます。

html

	<div id="nav7">
		<ul>
			<li><a href="#">HOME</a></li>
			<li><a href="#">ABOUT</a></li>
			<li><a href="#">GALLERY</a></li>
			<li><a href="#">LINK</a></li>
		</ul>
	</div>

css

	#nav7 {
		position: relative;
		height: 100px;
	}
	#nav7 ul {
		margin-left: 20px;
		font-size: 100%;
		font-weight: bold;
		position: absolute;
		top: 20px;
		z-index: 2;
		list-style: none;
	}
	#nav7 ul li {
		margin-bottom: 0.8em;
		height: 1em;
	}
	#nav7 ul li a {
		text-decoration: none;
		color: #333333;
	}
	#nav7 span {
		width: 100%;
		height: 1em;
		display: block;
		background: #FFCC00;
		position: absolute;
		top: 20px;
	}

javascript

	$(function() {
		var nav = $('#nav7');
		nav.append('<span></span>');
		//原点の位置
		var contY = nav.offset().top;
		$('li a', nav).mouseover(function(){  
			//移動先の位置を取得
			var thisOffset = $(this).offset().top - contY;
			$('span', nav).stop().animate({
				top : thisOffset +'px'
			},200);
		});
	});

「nav.offset().top」ulのY座標がわかりますので、そこからマウスオーバーされたliのY座標の値を引けば移動する位置がわかりますね。
またマウスアウトの動作がない場合は「hover」ではなくて「mouseover」の方がいいようです。

8.マウスオーバー以外のボタンを薄くする。

マウスオーバーしたボタンを変化させるのが王道ですが、逆をついて他を目立たせなくすることでマースオーバーしたボタンを目立たせるナビゲーションです。

マウスオーバー以外のボタンを薄くする

javascript

	$(function() {
		var nav = $('#nav8 li a');
		nav.hover(
			function(){
				nav.not(this).stop().animate({color : '#D8D8D8'},700);
			},
			function () {
				nav.not(this).stop().animate({color : '#333333'},700);
			}
		);
	});

「not(this)」とすることでマウスオーバー以外にアニメーションをつけることができます。

9.スライドしてから戻ってくるボタン

1はマウスオーバーでスライドして、マウスアウトで戻ってきましたが、このナビゲーションではスライドしてから戻ってくるまでがマウスオーバーアクションになっています。

右にスライドしてから戻ってくるボタン

javascript

	$(function() {
		 $('#nav9 li a').mouseover(
			function(){
				$(this).stop()
					.animate({marginLeft:'20px'},{duration:150, queue: true})
					.animate({marginLeft:'0px'},{duration:150, queue: true});
			}
		);
	});

一つのアニメーションが終わってから、次のアニメーションを実行するような場合「queue: true」を指定します。

10.ピカッと光ってだんだん元の色に戻るボタン

9のものをcolorに指定することでピカッと光るようなボタンを作成できます。

ピカッと光ってだんだん元の色に戻るボタン

javascript

	$(function() {
		 $('#nav10 li a').mouseover(
			function(){
				$(this).stop()
					.animate({color : '#FF9900'},{duration:150, queue: true})
					.animate({color : '#333333'},{duration:1500, queue: true});
			}
		);
	});

なるべくシンプルなコードでいろいろなバリエーションを作成したつもりですが、10個というのがきりがよかったので最後の方は穴埋め感が高くなってますね。
面白いマウスオーバーアニメーションを見かけたらぜひ教えてください。

jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種

ベースとなるhtml

1.マウスオーバーでスライドするボタン

2.滑らかにバックグラウンドカラーが変化するボタン

3.背景画像に指定したアイコンがアニメーションするボタン

4.ヒュンとバーが伸びてくるボタン

5.くるっと切り替わるボタン

6.マウスオーバーすると文字が拡大する。

7.マウスオーバーしたボタンに何かが追尾する。

8.マウスオーバー以外のボタンを薄くする。

9.スライドしてから戻ってくるボタン

10.ピカッと光ってだんだん元の色に戻るボタン

関連記事

jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種

CoffeeScriptでjQuery使うときのメモ

jQueryでスクロールすると表示する系いろいろ

jQueryでクリックするとぶるんってする