POPSブログ

jQueryアコーディオンHoverMenu/2

126

  Category:  jquery2012/06/26 pops 

jQueryアコーディオンMENU 2、ホーバーすると上方に開く形の MENU です。前ページの画像を Fade および Slide でエフェクトするようにしたものです。反対方向に開くのが面白い。


jQueryアコーディオンMENU2 (hoverタイプ)


メニュー部分は前ページのものとほぼ同じになります。画像エフェクト部分を追加しました。


Accordion Menu2 サンプル

MENU タイトルを HOVER ください。/ 下のボタンでスケルトンの切り替えができます。


MENUサブタイトル1

MENUサブタイトル2

MENUサブタイトル3


スケルトン切替



簡単な説明

簡易説明図


1. 前ページ掲載の「jQueryアコーディオンHoverMenu」の画像を Fade および Slide でエフェクトするようにしたものです。
2. 前ページの画像は「背景」に設定しましたが、これは「IMG画像」の表示になります。メニュー部分は同じです。(前ページ参照)
3. 画像は1枚目をHTMLに書き込みます。さらに使用する画像をJSに登録します。
4. エフェクトの種類、表示のサイクル時間、アニメ時間など設定できます。JS上部設定説明をお読みください。
5. ページ表示初期段階で画像が動くのを防止するために、Preload してキャッシュしています。画像枚数は5枚前後が適正です。
6. この状態で、オールブラウザ対応になります。(IE6-8、Chrome Firefox Safari Opera でOK、ほかも大丈夫と思う)


● MENUブロック幅 = ( 全体の表示ブロック幅 - ( MENUブロック数 + 1 ) ) / MENUブロック数、...但し、整数値に切り捨てること。等分配置でない場合は適当な幅を設定する。
● MENUブロック高さ = 全体の表示ブロック高さ、...但し、全体の表示ブロック高さを超えないこと。


使用する画像のURLを確認ください。読み込みエラー処理はありませんので、画像を取得出来ない場合は表示が汚くなる場合があります。
IE8 スケルトン処理をした場合に、Aリンクの擬似:hover が効かなくなる。(サンプルではバックグラウンドの色が変化しない)、さほど問題にはならない。


画像が動かない形式の場合は次ぎを参照ください。MENU部分は同じになります。

【参照】当方の前ページ記事: jQueryアコーディオンHoverMenu1


HTML JS CSS


HTML

サンプルと同様に記述して使用します。
注意、最初の画像を、下の階層、.menu-photo-btm クラスに記載しています。


<div id="accord-mn-group">
	<div id="menu-photo-btm"><img src="/main/images/toyota_car10.jpg" /></div>
	<div id="menu-photo-top"><img /></div>

	<div id="accord-mn-wrap">

		<div class="accord-mn-box">
			<h3 class="accord-mn-title">MENUサブタイトル1</h3>
			<ul>
			<li><a href="javascript:void(0);">LINK-1</a></li>
			<li><a href="javascript:void(0);">LINK-2</a></li>
			<li><a href="javascript:void(0);">LINK-3</a></li>
			<li><a href="javascript:void(0);">LINK-4</a></li>
			<li><a href="javascript:void(0);">LINK-5</a></li>
			</ul>
		</div>
		<div class="accord-mn-box">
			<h3 class="accord-mn-title">MENUサブタイトル2</h3>
			<ul>
			<li><a href="javascript:void(0);">LINK-1</a></li>
			<li><a href="javascript:void(0);">LINK-2</a></li>
			<li><a href="javascript:void(0);">LINK-3</a></li>
			<li><a href="javascript:void(0);">LINK-4</a></li>
			<li><a href="javascript:void(0);">LINK-5</a></li>
			</ul>
		</div>
		<div class="accord-mn-box">
		<h3 class="accord-mn-title">MENUサブタイトル3</h3>
			<ul>
			<li><a href="javascript:void(0);">LINK-1</a></li>
			<li><a href="javascript:void(0);">LINK-2</a></li>
			<li><a href="javascript:void(0);">LINK-3</a></li>
			<li><a href="javascript:void(0);">LINK-4</a></li>
			<li><a href="javascript:void(0);">LINK-5</a></li>
			</ul>
		</div>
	</div>

</div>

JS

適当な名前で保存して使用します。accordion-v2.js
2つのJSが書いてありますが1つの名前で保存しても良い。設定はJS上部をお読みください。


//accordion-v2.js

//Accordion Menu Example
(function($){

	$(function(){

		//MENUブロック幅
		var mn_block_w=212;
		//MENUベース高さ
		var mn_base_h=300;
		//MENUブロックの表示高さ(スライド量)
		var mn_view_h=200;
		//MENUタイトル高さ
		var mn_title_h=25;
		//速度
		var slide_speed=400;
		//スケルトン表示 use
		var skeleton_use="";

		//----------------------------------
		//計算
		var h_point=mn_view_h-mn_base_h;
		var h=(mn_base_h-mn_title_h)*-1;
		var w=mn_block_w;

		var items=[];//hitItem保存配列/未使用

		//MENUブロックの配置
		$('.accord-mn-box').each(function(i) {
			$(this).css({'bottom':h,'left':w*i+(i+1)});
			//スケルトン処理 透明度0.85-0.9で設定のこと
			if (skeleton_use == 'use') {
				$(this).fadeTo('1','0.9');
			}
		});

		//BASE-hover-ACTION
		$('.accord-mn-box').hover(
			function() {
				//UP
				$(this).children('.accord-mn-title').addClass("active");
				$(this).animate({'bottom':h_point},slide_speed,function(){
					//現在何もしていない
				});
			},
			function() {
				//DOWN
				$(this).children('.accord-mn-title').removeClass("active");
				$(this).animate({'bottom':h},slide_speed,function(){
					//現在何もしていない
				});
			}
		);

	});


})(jQuery);

//画像処理
(function($){

	$(function(){

		//スタートまでの時間、5000以上 
		var cycle_time_main=12000;
		//サイクル 5000以上
		var cycle_time=10000;

		var fade_speed=600;//フェード時間 400-800
		var slide_speed=1000;//フェード時間 400-1200

		var item_W=640;//横幅
		var item_H=300;//高さ

		//エフェクトの種類
		var effect_type="random";// fade slide random
		//出現確率randomの場合
		var random_nm=['fade','slide','slide'];
		//slideエフェクトの種類を決める、randomのみ
		var slide_type="random";//random set
		//slideエフェクトの番号/ 0-9
		//エフェクトの種類slideの場合有効
		var set_no =1;

		//画像までのパス
		var path='/main/images/';
		//画像名を登録する
		var preloaddata=['toyota_car10.jpg','toyota_car11.jpg','toyota_car12.jpg','toyota_car13.jpg'];
		
		//--------------------------------------------

		//画像preload
		var preload=[];
		image_preload();
		//画像数
		var list_len=preloaddata.length;

		//jqueryオブジェクト変数
		var item_btm,item_top,item_back;
		//オブジェクト変数に代入
		item_btm=$('#menu-photo-btm');
		item_top=$('#menu-photo-top');
		item_back=$('#accord-mn-group');

		//初期アイテム右移動
		item_top.css({'top':item_W});

		//カウント他変数
		var count=0;
		var keep_url="";
		var cross_url="";

		//スライド用postion 10種、最後は原点
		var pos_x=item_W;
		var pos_y=0;
		var pos_Xs=[-item_W,0,item_W,item_W,item_W,0,-item_W,-item_W,0,item_W/2,0];
		var pos_Ys=[-item_H,-item_H,-item_H,0,item_H,item_H,item_H,0,item_H/2,0,0];

		//最初の画像を下層にセット
		keep_url=path+preloaddata[count];
		item_btm.children("img").attr({'src':keep_url});
		item_btm.css({'display':'block'});

		//次ぎの画像の番号セット
		count=1;

		//エフェクトの番号補正
		if (set_no < 0 || set_no > 9) {set_no = 1;}

		//--------------------------------------------

		//画像の表示/INタイプのみ
		function showImage () {

			//effectの決定
			var move_type="fade";
			if (effect_type == 'slide') {move_type=effect_type;}
			if (effect_type == 'random') {
				move_type=random_nm[Math.floor(Math.random() * random_nm.length)];
			}

			//WH大きさ、スライド番号、速度
			var slide_W=item_W;
			var slide_H=item_H;
			var slide_no=1;//上から
			var speed=fade_speed;

			//SLIDE初期値
			if (move_type == 'slide') {

				//スライド番号ランダム
				if (slide_type == 'random') {
					slide_no=Math.floor(Math.random() * 10);
				}
				//スライド番号SET
				if (slide_type == 'set') {
					slide_no=set_no;
				}

				//そのほかのスライド設定
				speed=slide_speed;
				//postion
				pos_x=pos_Xs[slide_no];
				pos_y=pos_Ys[slide_no];
				//WH
				if (slide_no == 8) {slide_H=0;}
				if (slide_no == 9) {slide_W=0;}
			}


			//imgタグに入れる、URL取得
			cross_url=path+preloaddata[count];
			var start_opacity=1;
			var end_opacity=1;

			//上層移動とURLの代入
			//アイテム右移動
			item_top.css({'left':item_W,'display':'block'});

			//画像読み込み
			item_top.children("img").empty().attr({'src':cross_url});

			//FADE/設定が悪い場合はFADE
			if (move_type != 'slide') {

				start_opacity=0;
				//アイテム左移動opacity設定
				item_top.css({'top':0,'left':0,'width':slide_W,'height':slide_H,'opacity':start_opacity});
			}
			//SLIDE
			if (move_type == 'slide') {

				//アイテムslide初期位置移動opacity設定
				item_top.css({'top':pos_y,'left':pos_x,'width':slide_W,'height':slide_H,'opacity':start_opacity});
			}

			//アニメ実行/大きさ位置透明度を戻す
			item_top.animate({'top':0,'left':0,'width':item_W,'height':item_H,'opacity':end_opacity},speed,function(){

				//下層、画像すり替え操作
				item_btm.children("img").attr({'src':cross_url});

				//上層をけす
				item_top.css({'display':'none'});

				//cycle-time
				setTimeout(nextImage,cycle_time);

			});

		}

		//NEXT
		function nextImage() {
			//カウントアップ
			count++;
			if (count > list_len-1) {count = 0;}
			//画像表示に進む
			showImage ();
		}

		//image-preload
		function image_preload() {
			//image
			for (var i = 0; i < preloaddata.length; i++) {
				preload[i] = new Image();
				preload[i].src = path + preloaddata[i];
			}
		}

		//START Main-timer-set
		window.setTimeout(showImage,cycle_time_main);

	});

})(jQuery);

CSS

適当な名前で保存して使用します。accordion-v2.css


/* accordion-v2.css 日本語 */

/* Accordion Menu Example */

#accord-mn-group {
	position:relative;
	top:0;left:0;
	width:640px;
	height:300px;
	text-align:left;
	background-color:#000000;
	overflow:hidden;
}

#accord-mn-group #menu-photo-btm {
	position:absolute;
	top:0;left:0;
	display:block;
	width:640px;
	height:300px;
	background-color:#000000;
}
#accord-mn-group #menu-photo-btm img {
	width:100%;
	height:100%;
	border-style:none;
}
#accord-mn-group #menu-photo-top {
	position:absolute;
	top:0;left:0;
	display:block;
	width:640px;
	height:300px;
	background-color:#000000;
}
#accord-mn-group #menu-photo-top img {
	width:100%;
	height:100%;
	border-style:none;
}


/* menu-base */
#accord-mn-wrap {
	display:block;
	position:absolute;
	top:0;left:0;
	width:640px;
	height:300px;
	background-color:none;
	overflow:hidden;
}

/* menu-block */
#accord-mn-wrap .accord-mn-box {
	position:absolute;
	bottom:0;left:0;
	display:block;
	width:212px;
	height:300px;
	background-color:#FFFFFF;
	overflow:hidden;
}
/* title-box */
#accord-mn-wrap .accord-mn-box h3.accord-mn-title {
	width:auto;
	height:25px;
	padding:0 15px 0 10px;
	font-size:13px;
	color:#FFFFFF;
	line-height:25px;
	background:url(/main/images/arrow_5b.gif) no-repeat;
	background-position:right 2px;
	background-color:#48D1CC;
	cursor:default;
}

/* lightpink#FFB6C1.lightseagreen#20B2AA.hotpink#FF69B4 */
#accord-mn-wrap .accord-mn-box h3.active {
	background-position:right -18px;
	background-color:#FF69B4;
}

#accord-mn-wrap .accord-mn-box ul {
	list-style:none;
	width:auto;
	height:100%;
	margin-left:5px;
	padding:0;
}
#accord-mn-wrap .accord-mn-box ul li{
	list-style:none;
	width:auto;
	height:16px;
	margin:2px 5px 0 1px; 
	paddig:0;
	border-bottom:1px #EEEEEE solid;
	line-height:16px;
	font-size:12px;
	color:#555555;
}

/* aLink-hover */
#accord-mn-wrap .accord-mn-box ul li a:hover {
	background-color:#F0F0F0;
}

CSS記述、MENUブロックである、.accord-mn-boxクラスの高さは「全体の高さ」で記述します。
クラス名などは変更可能です。その場合はJSの該当部分のクラス名を変更しなければなりません。
上記CSSは、ページのCSSに影響される場合があります。使用者が適正に修正ください。上記CSSは単なる一例です。


IE8、fadeすべき層を認識しない時

上記サンプルでは正常ですが、HTML構造次第では「IE8でfade」させる場合に、fadeさせる「その箇所」を認識しない場合が発生します。「z-index」を付ければ認識します。「.menu-photo-top」層が対象ですが、他の層の重なりが合わなくなりますので「.menu-photo-btm」層 「.accord-mn-wrap」層にも処理します。
「IE8」だけですので、z-index:1¥9; のように「¥9」をつけてハックの形にしたほうが良いとおもいます。


IE8が層を認識しない時、z-index をつける

.menu-photo-btm {
	z-index:1\9;/* IE8 huck */
}

.menu-photo-top {
	z-index:2\9;
}
.accord-mn-wrap {
	z-index:3\9;
}

画像

サンプル画像 / 原則 使用者が用途に応じてご用意ください。

使用透過背景画像

arrow.gif / 使用画像以外の画像の場合は使用者がCSSを変更ください。


arrow_5.gif
19x40透過GIF
arrow_6.gif
19x40透過GIF
arrow_7.gif
19x40透過GIF
arrow_5b.gif
19x40透過GIF
arrow_6b.gif
19x40透過GIF
arrow_7b.gif
19x40透過GIF

【画像引用】トヨタ自動車(株)壁紙: TOYOTA


以上です。



[ この記事のURL ]


タグ:photo , Accordion , jquery , series

[ jQueryアコーディオンHoverMenu シリーズ記事 ]

jQueryアコーディオンHoverMenu/62012.07.02
jQueryアコーディオンHoverMenu/52012.07.01
jQueryアコーディオンHoverMenu/42012.06.29
jQueryアコーディオンHoverMenu/32012.06.28
jQueryアコーディオンHoverMenu/22012.06.26
jQueryアコーディオンHoverMenu/12012.06.25

 

ブログ記事一覧



[1]