POPSブログ

jQuery DIV構成のアコーディオンを横に並べたMENU

353

  Category:  jquery2015/04/10 pops 

以前のHOVERタイプの「アコーディオンを横に並べたMENU」を「タイトルクリックタイプ」にして、中をDIV構成にしました。リスト以外の要素も組み込めるのが特徴です。また反対方向に開閉するタイプも掲載します。
toggle()を使用していませんので、jquery-1.9系、jquery-2.0系でも動作します。

 

jQuery DIV構成のアコーディオンを横に並べたMENUテスト


今までのものは、アコーディオンの中をリスト形式で利用するものでしたが、リストでも、その他の構成でも使用できる様にしたものです。アコーディオンの内部は狭いので、自由構成といっても限定はされますが........

jquery-1.9系より toggle() が削除されましたので使用しない siblings() 形式で組んでいますから簡素なスクリプト記述が特徴です。

 

zu

 

共に、基本的には以下のページの「アコーディオンHoverMenu」JSを修正したものです。

【参照】当方の記事: jQueryアコーディオンHoverMenu/1

 

 

DIV構成 クリック開閉連動形 DEMO (基本形、accordion-cv4.js)

アコーディオンブロックの中は自由構成です。(IE9-11、Chrome Firefox Safari Opera でOK、Mac未確認)

IE7.8でも正常に動作しますが、昨今の事情により、今後は除外します。

使用する状況により、ID、クラス名など変更して使用します。変更に伴いJS、CSSもそれに合わせます。


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


MENUサブタイトル1

自由記載可能

MENUサブタイトル2

MENUサブタイトル3


スケルトン切替



上記が基本形ですが、アレンジすることが可能ですので、その例などを下記デモに掲載します。


 

幅広画像の場合とHOVER形のデモ


幅広画像に改良したものと、同じ構成でHOVER形式に修正したものです。JS、CSSはデモページに掲載しています。

zu3



逆開閉形のデモ


開き方が逆、上方より下方に開閉する形式です。JS、CSSはデモページに掲載しています。

zu4



HTML JS CSS

開閉連動クリック基本形、標準640x300 (accordion-cv4.js)

上記デモのJSは、全てこの基本形をアレンジしたものです。


HTML

全ての、accord-blockクラス(DIV)の中は自由構成です。基本的にはリストを使用する事が多いと思います。




<div id="accord-menu4">
	<div class="accord-menubox">
		<h3 class="accord-mn-title">MENUサブタイトル1</h3>
		<div class="accord-block">
		<div>

		自由構成

		</div>
		</div>
	</div>
	<div class="accord-menubox">
		<h3 class="accord-mn-title">MENUサブタイトル2</h3>
		<div class="accord-block">
		<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-menubox">
	<h3 class="accord-mn-title">MENUサブタイトル3</h3>
		<div class="accord-block">
		<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>


CSS

accordion-cv4.css




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

/* menu-base */
#accord-menu4 {
position: relative;
width:640px;
height:300px;
background:url(/main/images/toyota_car11.jpg) no-repeat;
background-color:#EEEEEE;
overflow:hidden;
}

/* menu-block */
#accord-menu4 .accord-menubox {
position: absolute;
bottom:0;left:0;
display:block;
width:212px;
height:auto;
background-color:#FFFFFF;
overflow:hidden;
}

/* title-box */
#accord-menu4 .accord-menubox 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:pointer;
}
#accord-menu4 .accord-menubox .accord-block{
display:block;
width:auto;
height:100%;
padding:0 2px 0 2px;
background-color:#FFFFFF;
}

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

#accord-menu4 .accord-menubox ul {
display:inline-block;
list-style:none;
width:auto;
margin-left:5px;
padding:0;
}
#accord-menu4 .accord-menubox ul li{
list-style:none;
width:auto;
height:16px;
margin:2px 5px 0 1px; 
padding:0;
border-bottom:1px #EEEEEE solid;
line-height:16px;
font-size:12px;
color:#555555;
}

/* aLink-hover */
#accord-menu4 .accord-menubox ul li a:hover {
background-color:#F0F0F0;
}


JS

accordion-cv4.js




//accordion-cv4.js
//title-click-type Toggle-Anime
//Accordion Menu 4

(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_view_h;
		var w=mn_block_w;

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

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

		//DIV全てを閉じる
		$('.accord-menubox').find('.accord-block').hide();

		//BASE-click-ACTION/.accord-mn-box
		$('.accord-menubox').find('h3').click(function() {

			//hit判定クラス
			$(this).toggleClass("active");
			var slideItem=$(this).next('div');

			//hit分岐処理
			if ($(this).hasClass('active')) {

				//UP
				slideItem.slideToggle(slide_speed,function() {
					//hitクラス切り替、開いている要素を閉じる
					var siblingsItem=$(this).parent('div').siblings('div:visible');
					siblingsItem.find('div.accord-block').slideUp(slide_speed,function() {
						//activeクラス切り替
						siblingsItem.find('h3').removeClass("active");
					});
				});

			} else {

				//DOWN
				slideItem.slideToggle(slide_speed);
			}

		});

	});

})(jQuery);


 

簡単な説明

簡易説明図

zuzu

1. 背景画像の下部にセットする方式ですのでメニューの大きさが限定されます。事前にブロックの幅、タイトルの高さ、など算出しておきます。
2. 余り多くのリンクは書けませんし、文字の長さも限定されます。細部は使用者がCSSで変更できます。
3. スライドする高さを設定可能です。最大で全体の高さになります。JSの上部で設定します。(JS参照)、開く高さは全て同じになります。ブロック内部記述の高により変動するものではありません。
4. スケルトンにすることも可能ですが、透明度は 0.8-0.9 位で使用ください。その場合ブロック背景は「白」のほうがキレイです。黒の場合はグレーに塗ります(#AAAAAA-#CCCCCC)。透明度の設定が 0.8 前後であることを考慮ください。
5. 上に開く方式の方がなんとなく「面白み」がありますが、大きさが全体の画像の大きさに制約されます。
6. MENUブロック内部は、表示する大きさの範囲で、リンク以外の文字、画像挿入も可能です。
7. この状態で、オールブラウザ対応になります。(IE8-11、Chrome Firefox Opera でOK、Macは未確認)


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


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


 

JS処理の注意点

DIV構成で、siblings()処理する場合に、中の全てのDIV要素がslideUp()して消えてしまいますので、下記の様にクラス名を付けて判別しています。
つまり、同じDIV要素の中で「指定したクラス」のみ開閉させます。


● accord-blockクラスの中の「DIV」が消えてしまう。


siblingsItem.find('div').slideUp(slide_speed,function() {
	//activeクラス切り替
	siblingsItem.find('h3').removeClass("active");
});

● accord-blockクラスの中の「DIV」が消えない。


siblingsItem.find('div.accord-block').slideUp(slide_speed,function() {
	//activeクラス切り替
	siblingsItem.find('h3').removeClass("active");
});

その他の変更

アイデア次第で色々と操作が可能と思います。
ここでは、「各ブロックの幅を指定」「各ブロック毎に背景色を指定」をJSで行ってみます。


zu5

● 各ブロックの幅を指定できる様にする

各ブロックの幅を配列で指定してレイアウト処理すれば、幾分便利になるかも知れません。
デモページの「開閉連動CLICK形、新規幅広、ブロック幅可変」の様に成ります。

この例ではwide-menubox-bクラスの処理をしている。処理するクラス名を変更すれば、他のJSでも可能です。




//MENUブロック幅設定保存
var blockwidths=[150,215,200,150,120,120,120,120,120,120];
//ブロック幅を可変にする/true false
var variable=true;

//MENUブロックの配置変更
$('.wide-menubox-b').each(function(i) {
	//ブロック幅可変
	if(variable){
		$(this).css({'bottom':0,'left':pos_x,'width':blockwidths[i]});
		//更新
		pos_x=pos_x+blockwidths[i]+1;

	} else {
		//かえない
		$(this).css({'bottom':0,'left':w*i+(i+1)});
	}

	略す

});

● 各ブロック毎に背景色を指定して変更する

CSSの記述でま可能ですが、ブロックが多いと結構面倒に成ります。
JS処理すれば簡単になります。但し、active時の色変化が出来ませんのであしからず。

この例ではwide-menubox-bクラスの処理をしている。処理するクラス名を変更すれば、他のJSでも可能です。




//背景色データ
var backcolors=['#6496ED','#FFA500','#20B2AA','#B0C4DE','#FFA07A','#DB7093','#BC8F8F','#00CED1','#CCCCCC',' #CCCCCC','#CCCCCC','#CCCCCC'];
//背景色を変更する/true false
var backcolorUse=false;

//MENUブロックの配置変更
$('.wide-menubox-b').each(function(i) {

	略す

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

	略す

});

逆開閉CLICK形、HOVER形

原則的には、上方に開閉するのが基本ですが、下方に逆開閉するCLICK形、HOVER形を新規に作りました。
タイトル部分の配置位置が特殊なので注意ください。(タイトルも一緒にスライドするのが特徴)


下記は、accordion-cv6.js の例で、伸縮する .accord-blockの下に配置します。

CSS設定の一部に微妙な違いがあります。透過矢印画像は逆向きのものを使用します。



	<div class="accord-menubox-c">
		<div class="accord-block">
			<div>
			自由構成
			</div>
		</div>
		<h3 class="accord-mn-title">MENUサブタイトル1</h3>
	</div>

タイトル部分の配置を他のタイプと同じにして、タイトル部分を移動(position)させる方法もありますが、ブラウザにより振る舞いが違い大変面倒になります。よって簡単な方法を取っています。


 

画像

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

透過矢印画像 arrow_5.gif 19x40 透過矢印画像 arrow_5b.gif 19x40 透過矢印画像 arrow_6.gif 19x40 透過矢印画像 arrow_6b.gif 19x40 透過矢印画像 arrow_7.gif 19x40 透過矢印画像 arrow_7b.gif 19x40

 

同じデザインの、アコーディオンHoverMenuです。クリックタイプもあります。

【参照】当方の記事: jQueryアコーディオンHoverMenu/1

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

【参照】当方の記事: jQueryアコーディオンHoverMenu/2



以上です。

 


[ この記事のURL ]


タグ:jquery , Accordion

 

ブログ記事一覧

年別アーカイブ一覧



[1]