POPSブログ

jQueryアコーディオンHoverMenu/6

130

  Category:  jquery2012/07/02 pops 

jQueryアコーディオンMENU6、ホーバーすると「上方に開く形」の MENU です。「画像部分」と「メニュー部分」を構造的に分離したものです。
分離しているため設置位置に汎用性があります。またタイトル背景色を個別に変えることも可能です。マスク用のラップを削除しましたので、ページ部分のリンクに影響がありません。


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

jQueryアコーディオンHoverMenu1、等の画像部分とメニュー部分を構造的に分離したものです。前ページのHoverMenu5とはHTML構造が違いますので移行する際はHTMLの書き換えが必要になります。上方に開くのが正常な方式です。


Accordion Menu サンプル

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

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



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

注意、IEはメニュー部分の角丸処理が不完全です(jquery.corner.js を使用)。停止状態では良いが、移動状態が不完全。



簡単な説明

簡易説明図


注意、他のHoverMenu1、HoverMenu4、等はマスク層である#accord-mn-wrapがあるため、IE以外では「その下に来るリンク」が効かなくなる。
マスク層を削除して、Menuブロックの高さを伸縮させる方法で「リンク」があっても機能するように改良しました。


1. 背景画像とは分離されていますので、単独でメニューとしての使用も可能ですが上に画像が在った方がベター。
2. 事前にブロックの幅、タイトルの高さ、など算出しておきます。基本的に全体の高さは自由です。
3. 余り多くのリンクは書けませんし、文字の長さも限定されます。細部は使用者がCSSで変更できます。
4. スライドする高さを設定可能です。最大で全体の高さ(タイトルの高さを含む)になります。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ともに「タイトル高さ分」大きいだけです。
【重要】HoverMenu5とほぼ同等なものですがHTML構造の違いがあります(.menu-boxinnerの位置が違う)。通常は余りないと思いますがページ構造次第では上のコンテンツに潜り込みますのでメニュー基盤となる、#menu-setbox に適正な z-index を与えてください。


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


そのほかの注意事項

IE8 スケルトン処理をした場合に構造次第で、Aリンクの擬似:hover が効かなくなる場合あり。このサンプルではOK。
注意、マスク層である#accord-mn-wrapがあるため、IE以外では「その下に来るリンク」が効かなくなる。そのためマスク層を削除して対応しました。
また jquery.corner.js による IEでの「角丸処理」は静止している部分は良いが、内部伸縮部分は全部崩れます。この HoverMenu では解決する方法はないようです。(元来IE対応として制作されたものではない)


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

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


画像、メニューを分離した形式はこちらも参考にしてください。MENU部分は「このHoverMenu6」とは逆です。

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


HTML JS CSS


HTML

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


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

<div id="menu-setbox">

	<div class="accord-mn-box">
		<div class="menu-boxinner">
			<div class="accord-mn-title"><h3>MENUサブタイトル1</h3></div>
			<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="menu-boxinner">
			<div class="accord-mn-title"><h3>MENUサブタイトル2</h3></div>
			<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>
			<li><a href="javascript:void(0);">LINK-6</a></li>
			<li><a href="javascript:void(0);">LINK-7</a></li>
			<li><a href="javascript:void(0);">LINK-8</a></li>
			</ul>
		</div>
	</div>
	<div class="accord-mn-box">
		<div class="menu-boxinner">
			<div class="accord-mn-title"><h3>MENUサブタイトル3</h3></div>
			<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-v6.js
タイトル個別に「タイトル背景色」を設定できます。(JS上部を読んでください)


//accordion-v6.js
//新分離形/マスク層#accord-mn-wrap削除形式

//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="";
		//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);
		var w=mn_block_w;

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

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

			//位置決定/X方向のみセット
			$(this).css({'left':w*i+(i+1)});

			//タイトル背景色
			if (backcolor_use == 'use') {
				$(this).find('.accord-mn-title').css({'background-color':backcolors[i]});
			}
			if (backcolor_use == 'set') {
				$(this).find('.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() {
				//DOWN
				$(this).find('.accord-mn-title').addClass("active");

				//注意、JS設定の標準背景active色
				if (backcolor_use == 'set') {
					$(this).find('.accord-mn-title').css({'background-color':activeti_color});
				}
				//タイトル背景色active色にする
				if (backcolor_use == 'use') {
					$(this).find('.accord-mn-title').css({'background-color':activecolor});
				}

				//アニメ
				$(this).animate({'height':mn_view_h},slide_speed,function(){
					//現在何もしていない
				});
			},
			function() {
				//UP
				$(this).find('.accord-mn-title').removeClass("active");
				//アニメ/タイトルの高さに戻す
				$(this).animate({'height':mn_title_h},slide_speed,function(){

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

				});
			}
		);

	});
})(jQuery);

注意、JSの設定条件によりCSSの設定が一部違う場合あり。下の説明参照。


CSS

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


/* accordion-v6.css 新分離日本語 */

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

/* menu-setbox */
/* 必要な場合はz-indexを設定する */
#menu-setbox {
	position:relative;
	width:640px;
	height:25px;
	border-bottom:1px #32ACA5 solid;
	background-color:#C2CFD7;
}

/* menu-block */
#menu-setbox .accord-mn-box {
	position:absolute;
	bottom:0;left:0;
	_bottom:-1px;/*IE6補正*/
	display:block;
	width:212px;
	height:25px;/*タイトル高さ分*/
	background-color:#E1E8ED;
	overflow:hidden;
}
#menu-setbox .accord-mn-box .menu-boxinner {
	position:absolute;
	top:0;left:0;
	display:block;
	width:100%;
	height:auto;
	margin:0;
}

/* title-box */
#menu-setbox .accord-mn-box .menu-boxinner .accord-mn-title {
	width:100%;
	height:25px;
	margin:0;
	padding:0;
	background:url(/main/images/arrow_5b.gif) no-repeat;
	background-position:right 2px;
	background-color:#48D1CC;
	cursor:default;
}
#menu-setbox .accord-mn-box .menu-boxinner .accord-mn-title h3 {
	width:auto;
	height:25px;
	margin:0;
	padding:0 15px 0 10px;
	font-size:13px;
	color:#FFFFFF;
	line-height:25px;
	cursor:default;
}

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

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

書き換えなどの際、IE6 position bottom 設定で隙がでて狂うので補正してください。補正しなくとも気になるほどのものではない。

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


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

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


記載が無効、JSでの設定値が使用される、書いてあっても問題なし
#menu-setbox .accord-mn-box .menu-boxinner .accord-mn-title {
	中略
	background-color:#48D1CC;
}

この部分色設定は削除ください、あると効率がわるい
#menu-setbox .accord-mn-box .menu-boxinner .accord-mn-title.active {
	background-position:right -18px;
	色削除
}

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


記載が有効です
#menu-setbox .accord-mn-box .menu-boxinner .accord-mn-title {
	中略
	background-color:#48D1CC;
}

この部分色設定をしてください
#menu-setbox .accord-mn-box .menu-boxinner .accord-mn-title.active {
	background-position:right -18px;
	background-color:#FF69B4;
}

CSS3用角丸コード

Chrome Firefox Safari Opera でOK。そのほかは未確認


/*css3 radius*/
#photo-block,.accord-mn-box,.accord-mn-title {
	border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	-webkit-border-bottom-left-radius:10px;
	-moz-border-radius-bottomright:10px;
	-moz-border-radius-bottomleft:10px;
}

HTCの使用に関して、ie-css3.htc、border-radius.htc、などは静止している画像などには使えるようだが、動く要素などでは正常になりません。


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("10pxtop");
});

------------------------------------------

IEの場合は処理しないようにする書き方

$(function(){
	var browserIE=0;//一応IE判定は出来る
	if (jQuery.browser.msie) {browserIE=1;}
	//IEの場合は処理しない
	if (!browserIE) {
		$("#photo-block").corner("10pxtop");
		$('.accord-mn-title',.accord-mn-box').corner("10pxtop");
	}
});

IEであっても角丸の径が小さい場合、また画像などの色あいにより不具合を余り感じないこともあります。


画像

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

使用透過背景画像

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 ]


タグ: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]