POPSブログ

jQueryアコーディオン/3

116

  Category:  jquery2012/06/15 pops 

jQueryアコーディオン3、開閉連動形のAccordion(clickタイプ)を画像で装飾してみました。開いているところを閉じてから、指定位置を開く形式です。


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


Accordion Menu 装飾サンプル

画像で装飾する、CSSで装飾する、色々な方法があるとおもいます。ここでは画像を使用してみました。構成などは使用者が自由設計できますし、中を増やす事も可能です。
CSSでの装飾は手軽ですが動作が重くなりがちです。画像は比較的スムーツですから低性能なマシン環境下でも安心です。よって私の場合は画像使用が多いです。


[1] 開閉連動形 (div使用)

accordion-g.js/下の「MENUブロック」をクリックください。どんな場所でも使えるようにdivで作成





簡単な説明

1. 全てdiv 構成にして、背景画像として処理していますので少しCSSが長くなります。単なる画像として処理すればCSSは簡単になります。最近は背景画像のポジションを変えて操作するのがトレンドのようです。
2. 初期段階でオープン指定出来るようにしました。但しアコーディオンを操作しますとクローズします。
3. クラスなど変えれば自由に構築できます。幅などは使用者が設定変更できます。その際の画像は使用者が制作ください。(id名、クラス名など変更した場合は、JSの方も変更しなければならない場合もありますので確認のこと。)
4. 現時点ではオールブラウザに対応するようにしています。(CSSがクリアされていること)
5. ページのCSSがある程度影響しますので、ズレがある場合は修正ください。id を使用していますので、jquery.CSSなどの認識が良いようです。クラスのみで構成するのと全く違う面がある。
6. この状態でオールブラウザ対応です。IE67でのtext-indentでの修正はしていません。(IEの振る舞いには困ります、少し構造を変えた場合にどうなるかはわかりません。その都度使用者が適正に処理ください。)


HTML


<div id="accordion">
    <div class="accordion-headbox"><p style="text-align:center;font-size:8px;">pops web</p></div>
    <div class="open-block">
	<h3 class="open-block-head">常時表示ブロック</h3>
	<div class="open-block-inner">
		<p><a href="javascript:void(0);">サブメニュー1</a></p>
		<p><a href="javascript:void(0);">サブメニュー2</a></p>
		<p><a href="javascript:void(0);">サブメニュー3</a></p>
		<p><a href="javascript:void(0);">サブメニュー4</a></p>
		<p><a href="javascript:void(0);">サブメニュー5</a></p>
		<p><a href="javascript:void(0);">サブメニュー6</a></p>
	</div>
    </div>
    <div id="accordion-block">
	<h3 class="accordion-sub-head">MENUブロック1</h3>
	<div>
		<ul>
		<li><a href="javascript:void(0);">リンク1 他のラベルを押せば開いているところが自動で閉じるタイプです</a></li>
		<li><a href="javascript:void(0);">リンク2</a></li>
		<li><a href="javascript:void(0);">リンク3</a></li>
		</ul>
	</div>
	<h3 class="accordion-sub-head">MENUブロック2</h3>
	<div>
		<ul>
		<li><a href="javascript:void(0);">リンク4</a></li>
		<li><a href="javascript:void(0);">リンク5</a></li>
		<li><a href="javascript:void(0);">リンク6</a></li>
		<li><a href="javascript:void(0);">リンク7</a></li>
		<li><a href="javascript:void(0);">リンク8</a></li>
		<li><a href="javascript:void(0);">リンク9</a></li>
		</ul>
	</div>
	<h3 class="accordion-sub-head">MENUブロック3</h3>
	<div>
		<ul>
		<li><a href="javascript:void(0);">リンク10</a></li>
		<li><a href="javascript:void(0);">リンク11</a></li>
		<li><a href="javascript:void(0);">リンク12</a></li>
		<li><a href="javascript:void(0);">リンク13</a></li>
		<li><a href="javascript:void(0);">リンク14</a></li>
		<li><a href="javascript:void(0);">リンク15</a></li>
		</ul>
	</div>
    </div>
    <div class="bottom-block">
        <p><img src="/main/images/baner008.gif" width="200" height="150" /></p>
    </div>
    <div class="accordion-bottombox"></div>
</div>

JS

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


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

	$(function(){

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

		//全てを閉じる
		$('#accordion-block > div').hide();

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

		//クリックアクション設定
		$('#accordion-block > h3').click(function() {
			$(this).next('div').slideToggle('slow')
			.siblings('div:visible').slideUp('slow');
			$(this).toggleClass("active");
			$(this).siblings("h3").removeClass("active");
		});

		//hover-ACTION
		$("#accordion-block .accordion-sub-head").hover(
			function () {
  				$(this).addClass("title-hover");
			}, 
			function () {
  				$(this).removeClass("title-hover");
		});
	});

})(jQuery);

CSS


/* accordion-g.css */
#accordion {
	display:block;
	width:200px;
	height:auto;;
}
#accordion .accordion-headbox {
	width:200px;
	height:20px;
	background:url(/main/images/menu_nav_200g.gif) no-repeat;
	background-position:0 0;
}
#accordion .open-block {
	display:block;
	width:200px;
	background-color:#CCCCCC;
}

#accordion .open-block .open-block-head {
	width:190px;
	margin:0;
	padding-left:10px;
	font-size:12px;
	line-height:20px;
	color:#FFFFFF;
	background-color:#AAAAAA;
}
#accordion .open-block .open-block-inner {
	display:block;
	width:190px;
	margin-left:5px;
	font-size:12px;
}

#accordion .bottom-block {
	display:block;
	width:200px;
	height:150px;
	background-color:#888888;
}
#accordion .accordion-bottombox {
	width:200px;
	height:10px;
	background:url(/main/images/menu_nav_200g.gif) no-repeat;
	background-position:0 -90px;
}

#accordion #accordion-block {
	width:198px;
	height:auto;
	padding:0;
	border-left:1px #CCCCCC solid;
	border-right:1px #CCCCCC solid;
	background-color:#FFFFFF;
}
#accordion-block div {
	display:block;
	width:198px;
}

#accordion-block div ul {
	display:block;
	list-style-type:none;
	margin:0;
	padding:0;
}
#accordion-block div ul li {
	list-style-type:none;
	width:183px;
	margin-left:5px;
	font-size:12px;
	padding:0;
}
#accordion-block h3.accordion-sub-head {
	width:188px;
	margin:0;
	padding-left:10px;
	font-size:12px;
	line-height:20px;
	color:#FFFFFF;
	border-top:1px #555555 solid;
	background:url(/main/images/arrow_2.gif) no-repeat;
	background-color:#AAAAAA;
	background-position:right 0px;
	cursor:pointer;
}

#accordion-block h3.active {
	color:#555555;
	background-position:right -26px;
}
#accordion-block h3.title-hover {
	background-color:#BBA195;
}



画像

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

透過背景画像 gif 200x100 透過矢印画像 gif 20x44 baner画像 gif 200x150

以上です。




[ この記事のURL ]


タグ:jquery , Accordion , series

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