jQueryで簡単に作れるマウスオーバーでアニメーションするボタン5種」という記事を書きましたが、画像メニューでわりと横型に">

WEBOPIXEL

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

Posted: 2011.02.16 / Category: javascript / Tag: 

以前「jQueryで簡単に作れるマウスオーバーでアニメーションするボタン5種」という記事を書きましたが、画像メニューでわりと横型に並べたナビゲーションが多かったので、今回はテキストタイプの縦型ナビゲーションオンリーで作成してみました。
基本的にやってることは画像タイプのものとあまり変わらなかったりしますが……。

Sponsored Link
2012.03.29 jQuery1.7に対応

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

demo

ベースとなる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個というのがきりがよかったので最後の方は穴埋め感が高くなってますね。
面白いマウスオーバーアニメーションを見かけたらぜひ教えてください。

COMMENTS

ギズモ 2011-09-08 17:17 

こんにちわ

お世話様です

htmlとcssはわかりますが

javascriptはどこに入れるのですかそれと
そのままコピーしてheadに貼り付けると
そのままウェブに表示してしまいます
<java…等囲むのでしょうか

よろしくお願いいたします

webOpixel 2011-09-08 22:01 

そうです。head内にscriptで囲んでください。
デモページも用意していますので、こちらのソースを確認して頂ければと思います。
http://www.webopixel.net/lab/sample/11/0216/

ギズモ 2011-09-09 14:36 

ありがとうございました

tamami 2012-02-25 18:37 

ありがとうございました。設置できました。が、ひとつこまったことがあります。文字化けをおこし日本語がつかえません。もし対処法があれば教えていただけないでしょうか。
よろしくお願いいたします。

webOpixel 2012-02-27 09:38 

文字コードは設定してありますか?
このスクリプトを使用しなければ文字化けは起こりませんか?

tamami 2012-02-27 14:38 

さっそくのお手紙、ありがとうございました。他のスクリプトでは文字化けはしません。文字化けはいろんな要因があることがわかりましたので、ひとつ、ひとつつぶしてみようかと思ってます。お手数をかけてしまい申し訳ございませんでした。

wordpressをはじめて1年ちかくなりますが、まだまだわからないことばかりです。ほんとうにありがとうございました。

ヤスタカ44da 2012-03-27 01:48 

サンプル4を参考にwebページの製作をしてみたのですが
ボタンにポインタを合わしても、サンプルのように飛び出してくる表現が実装されません。

御指南よろしくおねがいします。

webOpixel 2012-03-28 08:26 

それだけの情報だとはっきりしたことはわからないのえすが、
画像は配置されていますか?
あとは画像のサイズによって数値も変更する必要がありますので、動かない状態で表示されるか一度ご確認ください。

ヤスタカ44da 2012-03-28 10:06 

ありがとうございます。

一応Webサイトのアドレスを入力してあるので
見ていただけると、どんな状態なのか分かってもらえると思います。

ポインタを合わせると、画像は表示されます。
しかし、動いているようには見えません。

画像のサイズについて、もう少し考えてみます。

webOpixel 2012-03-29 16:26 

jQuery1.7だと「backgroundPosition」という書き方ができなくなっているようです。
「’background-position-x’」としてください。
詳しくはサンプルを修正しましたのでご確認ください。
よろしくお願いします。

ヤスタカ44da 2012-03-29 18:18 

お返事ありがとうございます。

バージョンの違いが有るんですね。
全く考えていませんでした。以降気をつけます。

よし 2012-08-12 05:56 

Mac OS X 10.6/Firefox 3.6.28 で拝見したところ、sample3,4の動作が確認できませんでした。
Firefoxでも動かすようにするにはどのように改修すればよろしいでしょうか?

webOpixel 2012-08-13 11:02 

ご指摘ありがとうございます。
プロパティのところを以下のよにすると動くようです。
「 ‘backgroundPosition’: ’15px’ 」
サンプルを修正しましたのでご確認ください。

あかね 2013-09-13 20:08 

はじめまして。
とても良さそうなので是非利用させて頂きたいと考えているのですが、
できましたら下記の件ご教授いただければ幸いです。

デモの7番ですが、
「原点の位置」を今いるページにすることはできないでしょうか?
(マウスアウトした場合も、原点=今いるページに戻る。)
手動でclass名を付けるか、URL解析(※)するかになるんですかね。
※yuga.jsの「現在のページをハイライト表示」のイメージになります。

横版だと下記のイメージになります。
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

すみません。難しいですよね。。。
ご回答が無ければすぐに諦めます。

webOpixel 2013-09-19 16:32 

そのままではないのですが、下記のページが参考になるかもしれません。
http://www.webopixel.net/javascript/200.html

あとは
$(.active).offset().top
とかで初期値を最初に決める感じですかね、、

あかね 2013-10-01 18:11 

ごめんなさい!
ご回答頂いていたのですね。
頂いたURLを参考にチャレンジしてみます!
ありがとうございました♪

KAORI 2014-03-20 18:13 

こんにちは。
質問です。5番のくるっと切り替わるボタンをサイトに取り入れたいと考えているのですが、リストの内容を日本語にすると切り替わった後のテキストが縦書きになってしまうようです。
いろいろ試してみましたが原因がわからず質問させて頂きました。
お忙しいところ恐縮ですが教えて頂ければ幸いです。
どうぞよろしくお願いします。

webOpixel 2014-03-21 14:14 

ご指摘ありがとうございます。
cssで改行しないように設定してみてください。

#nav5 li span {
	......
	white-space: nowrap;
}

KAORI 2014-03-21 17:51 

有難うございました!解決しました!

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。