POPSブログ

jQueryアコーディオンHoverMenu/1

125

  Category:  jquery2012/06/25 pops 

jQueryアコーディオンMENU、ホーバーすると上方に開く形の MENU です。大型の背景画像とともに使用します。反対方向に開くのが面白い。

 

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


3-4年前にMooToolのものでありました。それと同様なものですが、jQueryの方が簡単に記述できます。ホーバーすると上方に開く形のため上に何らか必要です。やはり大型画像があいます。重くならない程度なら画像をスライドさせても良い。


Accordion Menu サンプル

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


MENUサブタイトル1

MENUサブタイトル2

MENUサブタイトル3


スケルトン切替



【サンプル追加、jQueryアコーディオンMENU (clickタイプ)】
クリック系のアコーディオンの要望も多いようなので、このページのサンプルをクリック系に修正。「デモ専用ページ」で表示します。デザイン、仕様はこの上のサンプルと同じです。

● デモページは [ jqury-1.9] で動作しています。 2013/02/05 追加


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

上記、2013/02/05追加のjQueryアコーディオンMENU(clickタイプ)では、原則リスト構成ですので、新たにブロックの中を自由なDIV構成の出来るタイプを新規に追加しました。
開閉連動clickタイプ、hoverタイプ、また逆に上から下に「逆開閉するタイプ」も収録しました。デザイン、仕様はこの上のサンプルと同じです。

toggle() を使用しない siblings() 形式で組んでいますので、jqury-1.9系、jqury-2.0系でも動作します。2015/04/10

【参照】当方の記事: jQuery DIV構成のアコーディオンを横に並べたMENU


 

簡単な説明

簡易説明図


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


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


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


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


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

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


HTML JS CSS


HTML

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


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

JS

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


//accordion-v.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);

CSS

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


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

/* Accordion Menu Example */
/* menu-base */
#accord-mn-wrap {
	position: relative;
	width:640px;
	height:300px;
	background:url(/main/images/toyota_car10.jpg) no-repeat;
	background-color:#EEEEEE;
	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; 
	padding: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は単なる一例です。


画像

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

使用透過背景画像

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]