POPSブログ

jQueryアコーディオン/6

119

  Category:  jquery2012/06/18 pops 

jQueryアコーディオン6、「ul li」ブロック構成、独立ブロック形式、開閉連動形のAccordion(clickタイプ)をjquery.corner.jsで角丸装飾してみました。CSSが大変面倒なものです。


アコーディオン6(clickタイプ、jquery.corner.jsで角丸装飾)


Accordion Menu 装飾サンプル4

アコーディオンを装飾する4、開閉するところを「ul li」ブロックで作りました。構成などは使用者が自由設計できますし、中を増やす事も可能ですが、jquery.corner.jsを使用しましたので、レイアウトの崩れが発生する場合がありますので注意ください。横幅が自由に変更できますから便利ですが、、、。


[4] 独立ブロック形式、開閉連動形 (ul li使用)

accordion-j.js/下の「MENUブロック」をクリックください。div ul li で作成

シミュレーション機能をつけて表示します。横幅と色の変更を確認できます。



MENUの変更


MENU幅


背景色


変更の実行

簡単な説明

1. 独立ブロック形式で、全てdiv 「ul li」ブロック構成にしました。「ul li」のため、JS処理は「id」で認識するようにしました。少しCSSが長くなります。(かなり癖がありますので、出来れば「ul li」構成以外の方がよいと思われる)
2. jquery.corner.jsで角丸にしました、全体の幅を設定すればそのほかは適正に配置するようにしました。IEではボーダーが描画されません。現時点でOperaでボーダーが描画出来るようになっています。
3. jquery.corner.jsの使用時、IE6ではレイアウトの崩れが発生しますので、対処するCSSにしています。少し工夫が必要ですので、簡単な色の変更などを除く、大幅な変更の際は自己責任で行ってください。
4. この状態でオールブラウザ対応ですが、使用者がCSSなど修正した場合は動作レイアウトを確認ください。
5. 全体の幅が狭いため、文字の長さが限定されます。問題がある場合は文字のサイズを小さくして運用ください。
6. 下の角丸部分はパデングで 10px 伸ばしています。IE6の場合 1px 大きい事に注意ください。全てクラスではなく、id を使用していますので汎用性がありません。後日書き換えるか修正する可能性があります。
7. そのほかは、前の記事などを参考にしてください。


IE6、下部角丸のバグ

構造的な問題か、IE6で高さの取得が不正確からなのか、スライドアニメ中に線がでる。停止中は現在補正しているので出ない。

時期的にIE6を考慮しなくともいいでしょう。修正方法などの資料は「前ページの記事」を参照ください。

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


HTML

全体格納容器等は、「前ページの記事」と違います。クラスでは画面がみだれます。


<div id="menu-group-wrap">

	<div class="menu-group">
		<div class="accordion_head"><h2>MENUお題目</h2></div>
		<div class="accordbox">
		<h3 class="opened">常時表示ブロック</h3>
			<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>
			<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>
			</ul>
		</div>
	</div>
	<br />

	<div class="menu-group">
		<div class="accordion_head"><h2>MENUお題目</h2></div>
		<div id="accordion-j" class="accordbox">
		<h3>MENUブロック1</h3>
			<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>
			<li><a href="javascript:void(0);">リンク4</a></li>
			</ul>
		<h3>MENUブロック2</h3>
			<ul>
			<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>
			</ul>
		<h3>MENUブロック3</h3>
			<ul>
			<li><a href="javascript:void(0);">リンク9</a></li>
			<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>
			</ul>
		</div>
	</div>
	<br />

	<div class="menu-group">
		<div class="accordion_head"><h2>MENUお題目</h2></div>
		<div class="box-bottom">
			<div class="btm-inner">
				<a href="javascript:void(0);" title="LINK-IMAGE"><img src="/main/images/menu_image.gif" style="margin-left:1px;" wilih="177" height="150" /></a>
			</div>
		</div>
	</div>

</div>

JS

「ul」ブロック構成なので「id」をあたえてJS処理をしました。クラスではレイアウトがくずれますが、「id」で行えば正常なレイアウトになります。
初期にオープン指定する、番号を入力 0 から始まる。
使用したくない場合は開く命令を無効にする。//openItem.show()............


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

	$(function(){

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

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

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

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

})(jQuery);

CSS


/* accordion-j.css */

#menu-group-wrap {
	display:block;
}

#menu-group-wrap .menu-group {
	width:200px;
	_height:100%;/*IE6で重要です*/
	margin:0;
	padding:0 0 10px 0;/*Rのため下を伸ばす*/
	_padding:0 0 11px 0;/*IE6角丸補正*/
	text-align:left;
	background-color:#D2B4BC;
	text-align:left;
	overfalow:hidden;
}

#menu-group-wrap .menu-group .accordion_head {
	display:block;
	width:auto;
	height:30px;
	background-color:none;
	overfalow:hidden;
}

#menu-group-wrap .menu-group .accordion_head h2{
	width:auto;
	height:30px;
	margin:0;
	padding:0 0 0 10px;
	font-size:13px;
	color:#000000;
	line-height:30px;
	letter-spacing:0;
	background-color:none;
}

#menu-group-wrap .menu-group .accordbox {
	display:block;
	width:auto;
height:auto;
	_height:100%;/*IE6*/
	margin:0 1px;
	padding:0;
	background-color:#FFFFFF;
	overfalow:hidden;
}
 
#menu-group-wrap .menu-group .accordbox h3 {
	width:auto;
	height:20px;
	margin:0;
	padding:0 5px 0 10px;
	line-height:20px;
	font-size:12px;
	color:#FFFFFF;
	border-top:1px #FFFFFF solid;
	background:url(/main/images/arrow.gif) no-repeat;
	background-color:#BBBBBB;
	background-position:right 0px;
	cursor:pointer;
}
#menu-group-wrap .menu-group a img {
	border-style:none;
	text-decoration:none;
}

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

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

#menu-group-wrap .menu-group .accordbox ul {
	display:block;
	width:auto;/*IE6重要*/
	margin:0 5px;
	padding:0;
}

#menu-group-wrap .menu-group .accordbox ul li {
	list-style:none;
	width:auto;
	margin:0;
	padding:0;
	text-align:left;
	font-size:12px;
	font-weight:normal;
	line-height:150%;
	border-bottom:1px #CCCCCC solid;
}
#menu-group-wrap .menu-group .accordbox ul li a {
	text-decoration:none;
	color:#BBBBBB;	
}
#menu-group-wrap .menu-group .accordbox ul li a:hover {
	background-color:#EFEFEF;
	color:#000000;
}

#menu-group-wrap .menu-group .accordbox ul li a:active {
	color:#555555;
}

#menu-group-wrap .menu-group .box-bottom {
	display:block;
	width:auto;
	height:160px;/*必ず高さを設定すること*/
	_height:161px;/*IE6角丸補正*/
	margin:0 1px;
	text-align:center;
	_overfalow:hidden;/*IE6あったほうが補正しやすい、btm-innerを気にする必要がない*/
}
#menu-group-wrap .menu-group .box-bottom .btm-inner {
	display:block;
	height:160px;/*必ず高さを設定すること*/
	_height:161px;/*IE6角丸補正*/
	margin:2px auto;
	_margin:1px auto;/*IE6補正*/
	background-color:#FFFFFF;
}

外側を角丸処理していますので、内部の高さが取得できるように考慮します。box-bottom 周りの高さを設定ください。IE6(IE系)では高さの取得が正確でない場合が多いので明示的にあたえます。
下部 btm-inner クラスを入れ子にしているのは、このページでのシミュレーションのためです。

分離したので、中に入れるコンテンツにより角丸バグの出方は違う。ようは正確な高さの設定であるが、Y方向の margin は極力避けるべきだナモシ。私としてもアタマが壊れるゼヨ。


jquery.corner.jsに拠る角丸処理

事前にjquery.corner.jsを入手します。角丸設定方法などの説明は省略します。


事前にjquery.corner.jsを読み込む
<script type="text/javascript" src="xxxxxxxxxxx/jquery.corner.js"></script>

JSを実行する
<script type="text/javascript">
$(function(){
	$(".menu-group").corner("10px");
});
</script>



画像

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

使用背景画像

arrow.gif / 使用画像以外の画像の場合は使用者がCSSを変更ください。


arrow.gif 21x44 透過画像

以上です。




[ この記事の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]