POPSブログ

jQueryアコーディオンHoverMenu/3

127

  Category:  jquery2012/06/28 pops 

jQueryアコーディオンMENU3、アクション形式などは前のものとほぼ同じですが、構造を少し変えてみました。大型の背景画像とともに使用します。反対方向に開くの所「面白い」が、使い道はない。サガシナハレヤ !


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


「jQueryアコーディオンHoverMenu」の構造を変えて、表示できる範囲を全体の幅まで広げて見ました。リンクなどに関する文字など多く記載できますし、画像などをも挿入可能です。ホーバーすると上方に開く形のため上に何らか必要です。やはり大型画像があいます。(請求書、督促状、逮捕状等もステキ)


Accordion Menu3 サンプル

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


MENUサブタイトル1

MENUサブタイトル2

MENUサブタイトル3


スケルトン切替



簡単な説明

簡易説明図


1. 背景画像の下部にセットする方式です。事前にブロックの幅、タイトルの高さ、など算出しておきます。
2. メニュータイトルが画像下部にきますので画像とのバランスは、全体の高さを広げたり、背景画像の background-position、などで調整可能です。
3. 細部は使用者がCSSで変更できます。前ページのものと構造がちがいます。MENUリンク以外にも使用できるカモ。
(インナー部「.accord-inner」クラス内部CSS変更自由。結構レイアウトのCSSが面倒だと思う。ガンバリナハレヤ !)
4. スライドする高さを設定可能です。最大で全体の高さになります。JSの上部で設定します。(JS参照)、開く高さは全て同じになります。ブロック内部記述の高さにより変動するものではありません。
5. スケルトンにすることも可能ですが、透明度は 0.8-0.9 位で使用ください。その場合ブロック背景は「白」のほうがキレイです。黒の場合はグレーに塗ります(#AAAAAA-#CCCCCC)。透明度の設定が 0.8 前後であることを考慮ください。
ブロック背景は構造の都合(IEの都合等)で「.accord-inner」クラスを使用しています。
6. MENUブロック内部のレイアウトおよび内部コンテンツは表示する大きさの範囲で自由です。リンク以外の文字、画像挿入も可能です。表示ブロック全体を使用できるよう z-index 操作しています。
7. この状態で、オールブラウザ対応になります。(IE6-8、Chrome Firefox Safari Opera でOK、ほかも大丈夫と思う)


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


このサンプルでは大丈夫ですが、構造次第では、IE8 スケルトン処理をした場合に、Aリンクの擬似:hover が効かなくなる。(バックグラウンドの色が変化しないなどの恐れがあります) IE8にはキヲツケナハレヤ !


標準の場合は次ぎを参照ください。MENU部分ブロック幅が狭くなります。

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


HTML JS CSS

タイトル部分背景色が同一(標準)の時と、タイトル個別に指定色で指定する方法(JSで処理)の2種類を掲載します。


HTML

サンプルと同様に記述して使用します。


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

	<div class="accord-mn-box">
		<div class="accord-mn-title"><h3 >MENUサブタイトル1</h3></div>
		<div class="accord-inner">
			<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 class="accord-mn-box">
		<div class="accord-mn-title"><h3 >MENUサブタイトル2</h3></div>
		<div class="accord-inner">
			<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 class="accord-mn-box">
		<div class="accord-mn-title"><h3 >MENUサブタイトル3</h3></div>
		<div class="accord-inner">
			<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-v3.js


//accordion-v3.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-mn_title_h;
		var h=mn_base_h*-1;
		var w=mn_block_w;

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

		var items=[];//hitItem保存配列/未使用
		//最上階のz-indexを決定
		var top_index=$('.accord-mn-box').length;
		//z-index保存
		var keep_index=0;

		//MENUブロックの配置など
		$('.accord-mn-box').each(function(i) {

			$(this).css({'bottom':h,'left':0});
			$(this).children('.accord-mn-title').css({'top':-25,'left':w*i+(i+1)});

			//スケルトン処理 透明度0.85-0.9で設定のこと
			if (skeleton_use == 'use') {
				$(this).children('.accord-inner').fadeTo('1','0.9');
			}
		});

		//BASE-hover-ACTION
		$('.accord-mn-box').hover(
			function() {
				//UP
				//index取得保存
				keep_index=$(this).index();
				//z-index最上階に移動
				$(this).css({'z-index':top_index});
				//active、アニメ処理
				$(this).children('.accord-mn-title').addClass("active");
				//アニメ
				$(this).animate({'bottom':h_point},slide_speed,function(){
					//現在何もしていない
				});
			},
			function() {
				//DOWN
				//active削除、アニメ処理
				$(this).children('.accord-mn-title').removeClass("active");
				$(this).animate({'bottom':h},slide_speed,function(){
					//z-indexを戻す
					$(this).css({'z-index':keep_index});
				});
			}
		);

	});

})(jQuery);

JS 個別にタイトル背景色を変える場合

こちらの方を使用します。適当な名前で保存して使用します。accordion-v3.js
JS上部の設定、backcolor_use は use です。必要に応じ色のデータを変更、追加してください。


//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="";

		//個別にタイトル背景色を変える use
		var backcolor_use="use";
		//activeの色
		var activecolor="#555555";
		//背景色データ
		backcolors=['#6496ED','#FFA500','#20B2AA','#B0C4DE','#FFEFD5','#DB7093','#BC8F8F','#00CED1','#CCCCCC',' #CCCCCC','#CCCCCC','#CCCCCC'];

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

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

		var items=[];//hitItem保存配列/未使用
		//最上階のz-indexを決定
		var top_index=$('.accord-mn-box').length;
		//z-index保存
		var keep_index=0;

		//MENUブロックの配置など
		$('.accord-mn-box').each(function(i) {

			$(this).css({'bottom':h,'left':0});
			$(this).children('.accord-mn-title').css({'top':-25,'left':w*i+(i+1)});

			//タイトル背景色
			if (backcolor_use == 'use') {
				$(this).children('.accord-mn-title').css({'background-color':backcolors[i]});
			}

			//スケルトン処理 透明度0.85-0.9で設定のこと
			if (skeleton_use == 'use') {
				$(this).children('.accord-inner').fadeTo('1','0.9');
			}
		});

		//BASE-hover-ACTION
		$('.accord-mn-box').hover(
			function() {
				//UP
				//index取得保存
				keep_index=$(this).index();
				//z-index最上階に移動
				$(this).css({'z-index':top_index});
				//active、アニメ処理
				$(this).children('.accord-mn-title').addClass("active");
				//タイトル背景色active色にする
				if (backcolor_use == 'use') {
					$(this).children('.accord-mn-title').css({'background-color':activecolor});
				}
				//アニメ
				$(this).animate({'bottom':h_point},slide_speed,function(){
					//現在何もしていない
				});
			},
			function() {
				//DOWN
				//active削除、アニメ処理
				$(this).children('.accord-mn-title').removeClass("active");
				$(this).animate({'bottom':h},slide_speed,function(){
					//z-indexを戻す
					$(this).css({'z-index':keep_index});
					//index取得
					var no=$(this).index();
					//タイトル背景色を戻す
					if (backcolor_use == 'use') {
						$(this).children('.accord-mn-title').css({'background-color':backcolors[no]});
					}
				});
			}
		);

	});

})(jQuery);

JS設定、backcolor_use を "use" にしなければ、標準のJSと同等です。「個別のタイトル色指定」はJSで処理した方が簡単なので掲載しているだけです。
時々条件を変更して使用したい場合は、CSSの該当部分2箇所(下記説明参照)を手ガキで変更すればよいだけです。


CSS 標準

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


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

/* Accordion Menu Example */
/* menu-base */
#accord-mn-wrap {
	position: relative;
	width:640px;
	height:300px;
	border-bottom:1px #000000 solid;
	background:url(/main/images/toyota_car11.jpg) no-repeat;
	background-position:left 0px;/*調整できる*/
	background-color:#EEEEEE;
	overflow:hidden;
}

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

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

#accord-mn-wrap .accord-mn-box .accord-inner {
	display:block;
	width:640px;
	height:100%;
	margin:0;
	background-color:#FFFFFF;
}
#accord-mn-wrap .accord-mn-box .accord-inner ul {
	display:block;
	width:auto;
	height:100%;
	margin:0;
	background-color:none;
	overflow:hidden;
}
#accord-mn-wrap .accord-mn-box .accord-inner 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 .accord-inner ul li a:hover {
	background-color:#F0F0F0;
}

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


CSS 個別にタイトル背景色を変える場合

下記部分、背景色の設定2箇所を変更します。特に .active の所を「削除」しないとJSで反応しません。


background-color色を変更(JSで塗りますので実際は、使用されません)

#accord-mn-wrap .accord-mn-box .accord-mn-title {
	position: absolute;
	top:0;left:0;
	width:212px;
	height:25px;
	background:url(/main/images/arrow_5b.gif) no-repeat;
	background-position:right 2px;
	background-color:#888888;
}

background-color削除(JSで変更します)

#accord-mn-wrap .accord-mn-box .active {
	background-position:right -18px;
}

画像

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

使用透過背景画像

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

以上ダス。アメダス、カゼダス、アラシダス、キヲツケナハレヤ !



[ この記事のURL ]


タグ:jquery , Accordion , photo , 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]