POPSブログ

jQueryアコーディオン/4

117

  Category:  jquery2012/06/16 pops 

jQueryアコーディオン4、「dl dt」ブロック構成で作りました。開閉連動形のAccordion(clickタイプ)を画像で装飾してみました。開いているところを閉じてから、指定位置を開く形式です。


アコーディオン4(clickタイプ、画像で装飾)


Accordion Menu 装飾サンプル2

画像で装飾する2、開閉するところを「dl dt」ブロックで作りました。構成などは使用者が自由設計できますし、中を増やす事も可能です。


[2] 開閉連動形 (dl dt使用)

accordion-h.js/下の「MENUブロック」をクリックください。dl dt で作成





簡単な説明

1. 全てdiv dl dt 構成にして、背景画像として処理していますので少しCSSが長くなります。単なる画像として処理すればCSSは簡単になります。最近は背景画像のポジションを変えて操作するのがトレンドのようです。
2. 初期段階でオープン指定出来るようにしました。但しアコーディオンを操作しますとクローズします。
3. クラスなど変えれば自由に構築できます。幅などは使用者が設定変更できます。その際の画像は使用者が制作ください。(id名、クラス名など変更した場合は、JSの方も変更しなければならない場合もありますので確認のこと。)
4. 現時点ではオールブラウザに対応するようにしています。(CSSがクリアされていること)
5. ページのCSSがある程度影響しますので、ズレがある場合は修正ください。id を使用していますので、jquery.CSSなどの認識が良いようです。クラスのみで構成するのと全く違う面がある。
6. 「dl dt」ブロックが使用されていますので、CSS修正は「dl dt」の振る舞い特性をお調べの上に対処ください。
7. この状態でオールブラウザ対応ですが、使用者がCSSなど修正した場合は動作レイアウトを確認ください。
8. 全体の幅が狭いため、文字の長さが限定されます。問題がある場合は文字のサイズを小さくして運用ください。


HTML

全体格納容器は、#accordion になっていますがクラスでも問題はありません。


<div id="accordion">
	<div class="accordion_head"><h2>MENUお題目</h2></div>
	<div class="accordbox">
	<h3 class="opened">常時表示ブロック</h3>
		<dl>
		<dt><a href="javascript:void(0);">サブメニュー1</a></dt>
		<dt><a href="javascript:void(0);">サブメニュー2</a></dt>
		<dt><a href="javascript:void(0);">サブメニュー3</a></dt>
		<dt><a href="javascript:void(0);">サブメニュー4</a></dt>
		<dt><a href="javascript:void(0);">サブメニュー5</a></dt>
		<dt><a href="javascript:void(0);">サブメニュー6</a></dt>
		</dl>
	</div>
	<div id="accordion-h" class="accordbox">
	<h3>MENUブロック2</h3>
		<dl>
		<dt><a href="javascript:void(0);">リンク5</a></dt>
		<dt><a href="javascript:void(0);">リンク6</a></dt>
		<dt><a href="javascript:void(0);">リンク7</a></dt>
		<dt><a href="javascript:void(0);">リンク8</a></dt>
		</dl>
	<h3>MENUブロック3</h3>
		<dl>
		<dt><a href="javascript:void(0);">リンク9</a></dt>
		<dt><a href="javascript:void(0);">リンク10</a></dt>
		<dt><a href="javascript:void(0);">リンク11</a></dt>
		<dt><a href="javascript:void(0);">リンク12</a></dt>
		</dl>
	<h3>MENUブロック4</h3>
		<dl>
		<dt><a href="javascript:void(0);">リンク13</a></dt>
		<dt><a href="javascript:void(0);">リンク14</a></dt>
		<dt><a href="javascript:void(0);">リンク15</a></dt>
		<dt><a href="javascript:void(0);">リンク16</a></dt>
		</dl>
		<a href="javascript:void(0);" title="LINK-IMAGE"><img src="/main/images/menu_image.gif" style="margin-left:1px;" width="177" height="150" /></a>
	</div>
	<div class="box-bottom"></div>
</div>

JS

初期にオープン指定する、番号を入力 0 から始まる。
使用したくない場合は開く命令を無効にする。//openItem.show()............


(function($){

	//accordion-h.js
	$(function(){

		//オープン指定番号
		var no=0;
		var openItem=$('#accordion-h > h3').next('dl').eq(no);

		//一旦消す
		$('#accordion-h > dl').hide();

		//active要素を指定して開く
		openItem.show().prev('h3').addClass("active");

		//ACTION 
		$('#accordion-h > h3').click(function() {
			$(this).next('dl').slideToggle('slow')
			.siblings('dl:visible').slideUp('slow');
			$(this).toggleClass("active");
			$(this).siblings("h3").removeClass("active");
		});
 
		//hover
		$('#accordion-h > h3').hover(
			function () {
				$(this).css({'background-color':'#FA6CBC'});
			},
			function () {
				$(this).css({'background-color':'#BBBBBB'});
			}
		);
	});

})(jQuery);

CSS


/* accordion-h.css */
#accordion {
	width:181px;
	height:100%;
	margin:0;
	padding:0;
	text-align:left;
}

#accordion .accordion_head {
	display:block;
	width:181px;
	height:30px;
	background:url(/main/images/sidenav.png) no-repeat;
	overfalow:hidden;
}

#accordion .accordion_head h2{
	height:30px;
	_height:26px;/*IE6*/
	margin:0;
	padding:5px 5px 0 10px;
	_padding:3px 5px 0 10px;/*IE6*/
	font-size:13px;
	color:#000000;
	line-height:160%;/* 160% 85% */
	letter-spacing:0;
}

#accordion .accordbox {
	display:block;
	width:179px;
	margin:0;
	padding:2px 0 0 0;
	border-left:1px #999999 solid;
	border-right:1px #999999 solid;
	background-color:#FFFFFF;
	overfalow:hidden;
}
 
#accordion .accordbox h3 {
	width:167px;
	height:20px;
	margin:1px 0 0 1px;
	padding:0 0 0 10px;
	line-height:20px;
	font-size:12px;
	color:#FFFFFF;
	background:url(/main/images/arrow.gif) no-repeat;
	background-color:#BBBBBB;
	background-position:right 0px;
	cursor: pointer;
}
#accordion a img {
	border-style:none;
	text-decoration:none;
}

/*常時OPEN h3*/
#accordion .accordbox h3.opened {
	background-position:right -120px;
	cursor:default;
}

/*OPEN指定*/
#accordion .accordbox h3.active {
	background-position:right -20px;
}

#accordion .accordbox dl {
	width:168px;/*IE6重要*/
	margin:0;
	padding-left:10px;
}

#accordion .accordbox dl dt {
	list-style:none;
	width:160px;/*IE6重要*/
	margin:2px 0 0 0;
	padding:1px;
	text-align:left;
	font-size:12px;
	font-weight:normal;
	line-height:150%;
	border-bottom:1px #CCCCCC solid;
}
#accordion .accordbox dl dt a {
	text-decoration:none;
	color:#BBBBBB;	
}
#accordion .accordbox dl dt a:hover {
	background-color:#EFEFEF;
	color:#000000;
}

#accordion .accordbox dl dt a:active {
	color:#555555;
}
 
#accordion .accordbox dl dt a span {
	display:block;
	margin-top:2px;
	color:#333333;
	font-size:11px;
}
#accordion .box-bottom {
	display:block;
	width:181px;
	height:5px;
	background:url(/main/images/sidenav.png) no-repeat 0 -352px;
}

外側のラインは、accordbox クラスの左右ボーダーで描画しています。全体の幅を変更の場合は、各要素の幅設定をあわせてください。角丸画像は透過ではありませんので基本背景は白になります。




画像

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

使用背景画像

sidenav.png arrow.gif / 背景の位置を変えればデザインの変更が可能です。使用画像以外の画像の場合は使用者がCSSを変更ください。


sidenav.png 181x357 arrow.gif 21x44 透過画像 sidenav2.png 220x357 未使用 sidenav3.png 181x71 未使用

以上です。




[ この記事のURL ]


タグ:series , Accordion , jquery

[ jQueryアコーディオン シリーズ記事 ]

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
jQueryアコーディオン/82012.06.20
jQueryアコーディオン/72012.06.19
jQueryアコーディオン/62012.06.18
jQueryアコーディオン/52012.06.17
jQueryアコーディオン/42012.06.16
jQueryアコーディオン/32012.06.15
jQueryアコーディオン/22012.06.13
jQueryアコーディオン/12012.06.11

 

ブログ記事一覧

年別アーカイブ一覧



[1]