POPSブログ

jQueryアコーディオンHoverMenu/4

128

  Category:  jquery2012/06/29 pops 

jQueryアコーディオンMENU4、ホーバーすると上方に開く形の MENU です。jQueryアコーディオンHoverMenu1の「画像部分」と「メニュー部分」を構造的に分離したものです。
分離しているため設置位置に汎用性があります。またタイトル背景色を個別に変えることも可能です。


jQueryアコーディオンMENU4 (分離 hoverタイプ)

jQueryアコーディオンHoverMenu1 の画像部分とメニュー部分を構造的に分離したものです。


Accordion Menu サンプル

MENUタイトルをHOVERくだ下さい / Menuブロックが上下します。

下のボタンで「スケルトンの切替」「画像表示切替」「角丸処理切替」「タイトル色切替」「ブロック幅切替」ができます。



スケルトン切替
画像表示切替
角丸処理切替
タイトル色切替
ブロック幅切替



簡単な説明

簡易説明図


1. 背景画像とは分離されていますので、単独でメニューとしての使用も可能ですが上に画像が在った方がベター。
2. 事前にブロックの幅、タイトルの高さ、など算出しておきます。基本的に全体の高さは自由です。
3. 余り多くのリンクは書けませんし、文字の長さも限定されます。細部は使用者がCSSで変更できます。
4. スライドする高さを設定可能です。最大で全体の高さ(#accord-mn-wrapの高さ)になります。JSの上部で設定します。(JS参照)、開く高さは全て同じになります。(現在画像高さ+タイトルの高さを設定)
5. スケルトンにすることも可能ですが、透明度は 0.8-0.9 位で使用ください。その場合ブロック背景は「白」のほうがキレイです。黒の場合はグレーに塗ります(#AAAAAA-#CCCCCC)。透明度の設定が 0.8 前後であることを考慮ください。
6. 設置する位置などは自由ですからある程度の汎用性があります。
7. MENUブロック内部は、表示される大きさの範囲で、リンク以外の文字、画像挿入も可能です。
8. この状態で、オールブラウザ対応になります。(IE6-8、Chrome Firefox Safari Opera でOK、ほかも大丈夫と思う)
9. HoverMenu1、との違いは、「高さの設定」がJS CSSともに「タイトル高さ分」大きいだけです。


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


IE8 スケルトン処理をした場合に、Aリンクの擬似:hover が効かなくなる。(サンプルではバックグラウンドの色が変化しない)、さほど問題にはならない。


【追記】2012/06/30/
1. IE以外で下の「画像などにリンク」がある場合マスク層が邪魔をして反応しませんので、「リンク」があるところと重ねないでください。別途構造形式のものを考えていますが少し複雑ですので、、、。
2. jquery.corner.jsによる「角丸処理」を行った場合、IEで完全に除去できないことがあります。CSS3による「角丸処理」をお勧めします。


タイトル背景色をJSで制御する場合について(専用のJS)

タイトル背景色を簡単に変更出来る専用のJSを使用します。JS側で、タイトル背景色を個別に設定したり制御する場合は CSS 記述の active クラスで背景色が機能しません。
1. backcolor_use="use"、タイトル個別にタイトル背景色が配列の色に着色されます。
2. backcolor_use="set"、JS設定の標準タイトル背景色が使用されます。
3. backcolor_use=""、CSS記載の色が有効になります。下記の追加 CSS 参照。
以上のようになりますので、注意ください。


画像、メニューを分離していない、一体形式はこちらを参考にしてください。MENU部分は同じになります。

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


HTML JS CSS


HTML

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


<div id="photo-block"> </div>

<div id="menu-setbox">

<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>

画像の表示方法

現在は背景画像で挿入していますが、<img>画像として挿入してもかまいません。但し、jquery.corner.jsで角丸にする場合は背景画像で挿入したほうが良いでしょう。


<div id="photo-block"><img src="/main/images/toyota_car11.jpg" width="640" height="300" /></div>

JS

適当な名前で保存して使用します。accordion-v4.js
タイトル背景色を簡単に変更出来る専用のJSはこの下にあります。


//accordion-v4.js

//Accordion Menu Example分離形
(function($){

	$(function(){

		//MENUブロック幅
		var mn_block_w=212;
		//MENUベース高さ
		var mn_base_h=325;//タイトル高さ分大きい
		//MENUブロックの表示高さ(スライド量)
		var mn_view_h=225;//タイトル高さ分大きい
		//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);

JS タイトル個別に「タイトル背景色」を設定できるJS。適当な名前で保存して使用します。(accordion-v4b.js)


//AccordionMenuExample分離形
(function($){

	$(function(){

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

		//標準タイトル背景色 backcolor_use=setの場合使用される、自由色
		var ti_color="#48D1CC";
		//標準activeの色
		var activeti_color="#FF69B4";

		//個別にタイトル背景色を変える use set ""
		//設定されない場合はcss記述の色が有効
		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;
		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)});

			//タイトル背景色
			if (backcolor_use == 'use') {
				$(this).children('.accord-mn-title').css({'background-color':backcolors[i]});
			}
			if (backcolor_use == 'set') {
				$(this).children('.accord-mn-title').css({'background-color':ti_color});
			}
			//スケルトン処理 透明度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");

				//注意、JS設定の標準背景active色
				if (backcolor_use == 'set') {
					$(this).children('.accord-mn-title').css({'background-color':activeti_color});
				}
				//タイトル背景色active色にする
				if (backcolor_use == 'use') {
					$(this).children('.accord-mn-title').css({'background-color':activecolor});
				}
				//アニメ
				$(this).animate({'bottom':h_point},slide_speed,function(){
					//現在何もしていない
				});
			},
			function() {
				//DOWN
				$(this).children('.accord-mn-title').removeClass("active");
				//アニメ
				$(this).animate({'bottom':h},slide_speed,function(){

					//注意、JS設定の標準背景色
					if (backcolor_use == 'set') {
						$(this).children('.accord-mn-title').css({'background-color':ti_color});
					}
					//index取得
					var no=$(this).index();
					//タイトル背景色を戻す
					if (backcolor_use == 'use') {
						$(this).children('.accord-mn-title').css({'background-color':backcolors[no]});
					}
				});
			}
		);

	});
})(jQuery);

注意、こちらを使用の場合はCSSの設定が一部違う場合あり。説明参照。


CSS

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


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

/* photo-block */
#photo-block {
	width:640px;
	height:300px;
	background:url(/main/images/toyota_car11.jpg) no-repeat;
	background-color:#000000;
}

/* menu-setbox */
#menu-setbox {
	position:relative;
	width:640px;
	height:25px;
	border-bottom:2px #000000 solid;
	background-color:#EEEEEE;
}
/* menu-base */
#menu-setbox #accord-mn-wrap {
	position:absolute;
	bottom:0;left:0;
	_bottom:-1px;/*必要ならIE6補正*/
	width:640px;
	height:325px;/*タイトル高さ分大きい*/
	background-color:none;/*色はなし重要*/
	overflow:hidden;
}

/* menu-block */
#menu-setbox #accord-mn-wrap .accord-mn-box {
	position: absolute;
	display:block;
	width:212px;
	height:325px;/*タイトル高さ分大きい*/
	background-color:#FFFFFF;
	overflow:hidden;
}
/* title-box */
#menu-setbox #accord-mn-wrap .accord-mn-box h3.accord-mn-title {
	width:auto;
	height:25px;
	margin:0;
	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 */
#menu-setbox #accord-mn-wrap .accord-mn-box h3.active {
	background-position:right -18px;
	background-color:#FF69B4;
}

#menu-setbox #accord-mn-wrap .accord-mn-box ul {
	list-style:none;
	width:auto;
	height:100%;
	margin-left:5px;
	padding:0;
}
#menu-setbox #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 */
#menu-setbox #accord-mn-wrap .accord-mn-box ul li a:hover {
	background-color:#F0F0F0;
}

IE6、外に出すとボトム設定で隙がでて狂うので #accord-mn-wrap の position bottom を 1px 補正している。補正しなくとも影響はないが、、。(実際は2px誤差が出ている)

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


タイトル背景色をJSで制御する場合のCSS

backcolor_use="use"、または、backcolor_use="set"


記載が無効、JSでの設定値が使用される
#menu-setbox #accord-mn-wrap .accord-mn-box h3.accord-mn-title {
	background-color:#48D1CC;
}
この部分色設定は削除ください
#menu-setbox #accord-mn-wrap .accord-mn-box h3.active {

}

backcolor_use=""、設定しない場合


記載が有効です

#menu-setbox #accord-mn-wrap .accord-mn-box h3.accord-mn-title {
	background-color:#48D1CC;
}
この部分色設定をしてください
#menu-setbox #accord-mn-wrap .accord-mn-box h3.active {
	background-color:#FF69B4;
}

jquery.corner.jsによる角丸処理

サンプルではjquery.corner.js を使用しましたが、CSS3の機能でも良いとおもいます。jquery.corner.js は別途、使用者が用意ください。これらは使用者が好みで行ってください。
jquery.corner.jsを事前に読み込んでおき、次ぎのコードを実行しました。但し画像は背景画像です。


$(function(){
	$("#photo-block").corner("10pxtop");
	$('.accord-mn-title,.accord-mn-box').corner("5pxtop");
});

画像

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

使用透過背景画像

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 ]


タグ:series , photo , Accordion , jquery

[ 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]