2013

9

16

jQuery使って色んなホバーエフェクトのメニュー作ってやんよ!!!

このエントリーをはてなブックマークに追加
Pocket
LINEで送る
Facebook にシェア
reddit にシェア
LinkedIn にシェア

jQueryで簡易版Flashの様なホバータイプのアニメーションメニューを作成してみます。

その①フェードイン型エフェクト

とりあえず基本的なフェードアニメーションタイプから デモページがこちら。

HTMLの記述

<ul id="yanyoMenu">
    <li id="menu01"><a href="#">メニュー01</a></li>
    <li id="menu02"><a href="#">メニュー02</a></li>
    <li id="menu03"><a href="#">メニュー03</a></li>
    <li id="menu04"><a href="#">メニュー04</a></li>
</ul>

CSSの記述

li {
	list-style: none;
}

ul#yanyoMenu {
	width: 500px;
	height: 60px;
	background:url(メニュ画像パス) no-repeat 0px -60px;
}

ul#yanyoMenu li a{
	display:block;
	float:left;
	width: 125px;
	height:60px;
	text-indent: -9999px;
}

ul li#menu01 a{background:url(メニュ画像パス) no-repeat 0px 0px;}
ul li#menu02 a{background:url(メニュ画像パス) no-repeat -125px 0px;}
ul li#menu03 a{background:url(メニュ画像パス) no-repeat -250px 0px;}
ul li#menu04 a{background:url(メニュ画像パス) no-repeat -375px 0px;}

JavaScriptの記述

$(function(){
	var menuBox = $("ul#yanyoMenu");
	var menuList = menuBox.children("li");
	
	menuList.hover(function(){ 
		$(this).stop().animate({'opacity' : '0'}, 300);  
	},function(){
		$(this).stop().animate({'opacity' : '1'}, 800);
	}
	);
});

その①解説

  • ①通常のメニューで使用するスプライト画像を用意します。ここで重要なのはCSSで通常の背景画像のスプライト記述と反対にホバー時の画像位置を初期配置に指定します。
  • ②メニューの各リスト要素にID（classでも可）を付け、CSSで背景画像位置の指定をします。（ここはホバー前の画像位置を指定）
  • ③グローバル変数にメニューコンテナ要素を変数menuBox、メニュー内の各リスト要素を変数menuListに代入。
  • ④リストがホバーされるとID要素の背景に指定していた画像をanimate関数でopacity:0指定（透過100%）し、そのリストの箇所だけメニューコンテナに指定していたul#yanyoMenuの背景画像が見える。またマウスが離れるとopacity:1指定になり、再びリストの背景画像が被さった様に見える
  • ⑤ホバーした分だけの回数の透過がされないようにstop関数をanimate関数の前に記述する事で他のリストが透過対象になった際に処理がキャンセルされる
  • ⑥フェードイン・アウトの速度は任意で指定できるがインは早め、アウトは2.5倍くらいで設定していると余韻が残ってイイ感じになります。

その②カットイン型エフェクト

ホバーしたらアニメーションをカットインさせるタイプ デモページがこちら。

HTMLの記述

<ul id="yanyoMenu">
	<li><a href="#">メニュー①</a></li>
	<li><a href="#">メニュー②</a></li>
	<li><a href="#">メニュー③</a></li>
	<li><a href="#">メニュー④</a></li>
	<li><a href="#">メニュー⑤</a></li>
</ul>

CSSの記述

ul#yanyoMenu {
    margin: 0px auto 500px;
	width: 500px;
	height: 50px;
	background-color: #666;
	cursor: pointer;
}
ul#yanyoMenu li {
	width: 100px;
	height: 50px;
	line-height: 50px;
	list-style: none;
	float:left;
	background: url(スライド画像パス) repeat 100px 0;  
}
ul#yanyoMenu li a {
	display: block;
	color: #FAFAFA;
	font-weight: 900;
	text-align:center;
}

JavaScriptの記述

$(function(){
	$('ul#yanyoMenu li')
		.css( {backgroundPosition: "100px center"} )
		.mouseover(function(){
			$(this).stop(true, true).animate({backgroundPosition: "310px" }, {duration:500})
		})
		.mouseout(function(){
			$(this).stop(true, true).animate({backgroundPosition: "500px"}, {duration:200, complete:function(){
				$(this).css({backgroundPosition: "100px center"})
			}})
		})
});

その②解説

  • ①基本的なHTMLとCSSは割愛しますが、どう見せるかはアニメーションさせたいイメージ画像次第です。
  • ②mouseover関数とmouseout関数それぞれのホバー時の画像をanimate関数でbackground指定分移動させます。（数値は任意で）
  • ③animate関数時にマウスホバーが実行された回数分の背景が動いてしまい、現在ホバーしているリストがわからなくなってしまうので、他のリストのホバー処理が実行された際に他のリストのスライド処理をキャンセルさせるために、animate関数実行前にstop関数の指定は必須となります。

その③追従型エフェクト

指定したターゲット要素がメニュー領域内のマウスを追従してくるタイプ デモページがこちら。

※Easingプラグインの追加

このタイプのエフェクトを再現するにはjQueryライブラリーのCDNで使える関数にはない特定の記述が必要になるためEasing Pluginというプラグインの導入が別途必要になるので下記リンクページからダウンロードして下さい。

jQuery Easing Plugin

http://gsgd.co.uk/sandbox/jquery/easing/

HTMLの記述

<ul id="yanyoMenu">
	<li><a href="http://tokidoki-web.com/demo/130920/130920_03_a.html">メニュー①</a></li>
	<li><a href="http://tokidoki-web.com/demo/130920/130920_03_b.html">メニュー②</a></li>
	<li><a href="http://tokidoki-web.com/demo/130920/130920_03_c.html">メニュー③</a></li>
	<li><a href="http://tokidoki-web.com/demo/130920/130920_03_d.html">メニュー④</a></li>
	<li><a href="http://tokidoki-web.com/demo/130920/130920_03_e.html">メニュー⑤</a></li>
</ul>

CSSの記述

ul#yanyoMenu {
    margin: 500px auto 600px;
	position: relative;
	width: 500px;
	height: 50px;
	background-color: #666;
	cursor: pointer;
}
ul#yanyoMenu li {
	width: 100px;
	height: 50px;
	line-height: 50px;
	list-style: none;
	float:left;
}
ul#yanyoMenu li a {
	position: relative;
	z-index: 10;
	display: block;
	width: 100px;
	height: 50px;
	color: #FAFAFA;
	font-weight: 900;
	text-align:center;
}
#yanyoMenu #moveElement {
	position: absolute;
	width: 100px;
	height: 50px;
	background-color: #000;
}

JavaScriptの記述

$(function() {
	var menuBox = $("#yanyoMenu");
	var menuList = menuBox.children("li a");

	//メニューホバー処理
	var $moving = $('<div id="moveElement"></div>');
	menuBox.append($moving);
	$("#moveElement").css("left","0px");
	menuBox.find('li').bind('mouseenter',function(){
		$moving.stop(true).animate({
				left : $(this)[0].offsetLeft + 'px'
			}, 400, 'easeOutExpo');
		});
});

その③解説

  • ①グローバル変数としてメニューコンテンツ要素を変数menuBoxへ代入。 メニューリスト要素を変数menuListへ代入。
  • ②メニューリストのホバー時のターゲットとなる#moveElement要素を動的に生成させたものを変数$movingに代入
  • ③グローバル変数として指定した変数menuBox内に上記の変数$movingを生成
  • ④変数menuBox内のmouseenterされたリストにターゲット要素をそのリストの左位置までアニメーション移動させる(
  • ⑤アニメーションのエフェクトは上記にて導入したEasingプラグインの関数であるeaseOutExpo効果をデモでは0.4秒間で処理させている。

Easingプラグインのエフェクト効果

今回のデモ内ではEasing効果をeaseOutExpoと設定していますが、他にもeaseInOutBounceやeaseOutElasticといった特殊な動きをするものもあるので色々と試してみてはどうでしょうか？

その④おまけ（リンク後のターゲット要素配置）

上記で作成したその③タイプのメニューをカスタマイズしてみまっす。 メニュー内でクリックしたリンク先でのターゲット要素の初期位置を現在のページのリンク位置へ配置し、現在のページはメニュー内のどこのページを閲覧中か視覚的にわかりやすくします。 デモページがこちら。 ※その③タイプとの違いがわかりにくい場合はページ下までスクロール後、リンクした後のターゲット要素の位置を確認してみて下さい。

HTMLの記述

<ul id="yanyoMenu">
	<li><a href="http://tokidoki-web.com/demo/130920/130920_04_a.html">メニュー①</a></li>
	<li><a href="http://tokidoki-web.com/demo/130920/130920_04_b.html">メニュー②</a></li>
	<li><a href="http://tokidoki-web.com/demo/130920/130920_04_c.html">メニュー③</a></li>
	<li><a href="http://tokidoki-web.com/demo/130920/130920_04_d.html">メニュー④</a></li>
	<li><a href="http://tokidoki-web.com/demo/130920/130920_04_e.html">メニュー⑤</a></li>
</ul>

CSSの記述

ul#yanyoMenu {
    margin: 500px auto 600px;
	position: relative;
	width: 500px;
	height: 50px;
	background-color: #666;
	cursor: pointer;
}
ul#yanyoMenu li {
	width: 100px;
	height: 50px;
	line-height: 50px;
	list-style: none;
	float:left;
}
ul#yanyoMenu li a {
	position: relative;
	z-index: 10;
	display: block;
	width: 100px;
	height: 50px;
	color: #FAFAFA;
	font-weight: 900;
	text-align:center;
}
#yanyoMenu #moveElement {
	position: absolute;
	width: 100px;
	height: 50px;
	background-color: #000;
}

JavaScriptの記述

$(function() {
	var menuBox = $("ul#yanyoMenu");
	var menuList = $("ul#yanyoMenu li a");
	var cssPositionVal = 100;

    //ページURLハッシュNo.追加
	menuList.each(function(){
		var obj = $(this);
        var link = obj.attr("href");
		var index = menuList.index(this);
        obj.attr("href",link + "#" + index)
    });

	//メニューホバー処理
	var $moving = $('<div id="moveElement"></div>');
	menuBox.append($moving);
	menuBox.find('li').bind('mouseenter',function(){
		$moving.stop(true).animate({
				left : $(this)[0].offsetLeft + 'px'
			}, 400, 'easeOutExpo');
		});
		
	//ページ遷移後メニュー位置処理
	$(window).bind("load", function(){
		var hrafPath = window.location.hash;
		$("#moveElement").css("left","0px");
		if("#0" == hrafPath){
			$("#moveElement").css("left","0px");
		}else{
			var pathChenge = hrafPath.replace(/#/g,'');
			var moveVal = (pathChenge * cssPositionVal);
			$("#moveElement").css("left",moveVal + "px");
		}
	});
});

おまけ解説

  • ①HTMLとCSSの記述は上記その③タイプと同じなので割愛。
  • ②まずグローバル変数としてメニューのボックス要素を変数menuBoxへ代入 メニューのリスト要素を変数menuListへ代入。 ページ遷移後の移動値のベースとなるリスト１つ分の高さの値(height)を変数cssPositionValへ代入
  • ③ページ遷移後に現在のページがメニューのどこのコンテンツかを識別させるための手順として各リスト要素にindex()関数で取得した番号をリンクURLの最後にハッシュとして文字列を追加割り当てる
  • ④ページ遷移後メニュー位置処理としてページを読み込み直後にページURLのハッシュを変数hrafPathへ代入
  • ⑤現在のページURLについているハッシュが『#0』の場合は、ホバーターゲットの移動は必要ないのでCSSでleft：0px指定
  • ⑥その他のハッシュが付いている場合はその文字列を取得するために変数hrafPathから正規表現で取得した値を変数pathChengeへ代入
  • ⑦グローバル変数として指定していたメニューリスト１つ分の横幅のサイズを代入した変数cssPositionValと上記にて代入した変数pathChengeを乗算した値を変数moveValへ代入し、moveElement要素の移動値に置換する。
また気が向いたらまた作るとします。
このエントリーをはてなブックマークに追加
Pocket
LINEで送る
Facebook にシェア
reddit にシェア
LinkedIn にシェア

トップへ