POPSブログ

jQueryアコーディオン/5

118

  Category:  jquery2012/06/17 pops 

jQueryアコーディオン5、「ul li」ブロック構成、開閉連動形のAccordion(clickタイプ)をjquery.corner.jsで角丸装飾してみました。


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


Accordion Menu 装飾サンプル3

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


[3] 開閉連動形 (ul li使用)

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

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


MENUの変更


MENU幅


背景色


変更の実行


簡単な説明

1. 全てdiv 「ul li」ブロック構成にしました。「ul li」のため、JS処理は「id」で認識するようにしました。少しCSSが長くなります。
2. jquery.corner.jsで角丸にしました、全体の幅を設定すればそのほかは適正に配置するようにしました。IEではボーダーが描画されません。現時点でOperaでボーダーが描画出来るようになっています。
3. jquery.corner.jsの使用時、IE6ではレイアウトの崩れが発生しますので、対処するCSSにしています。少し工夫が必要ですので、簡単な色の変更などを除く、大幅な変更の際は自己責任で行ってください。
4. この状態でオールブラウザ対応ですが、使用者がCSSなど修正した場合は動作レイアウトを確認ください。
5. 全体の幅が狭いため、文字の長さが限定されます。問題がある場合は文字のサイズを小さくして運用ください。
6. そのほかは、前の記事などを参考にしてください。


IE6、下部角丸のバグ

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

(時期的にIE6を考慮しなくともいいでしょう。2012/06/18 少し修正しました。)


IE6、下部角丸のバグの修正方法を考えてみた。

外側の角丸にも影響するので調べてみた。案の定、高さの「奇数、偶数値」が問題を起こしている。修正方法としては基本的に高さを変えればよいのだが、

1. 角丸処理する要素の高さが、「偶数値」ならバグは出ない。
2. 「奇数値」ならバグが出る。要素に padding-bottom:1px 処理すれば直る。
3. 要素の高さが変わるものは、中々旨くは行かないし他の所にも影響が出るので少し考慮してみた。


最初は、アコーディオンの中の画像部分の高さを変えて全体を伸ばし、修正していたが、外部にまで影響が出るので、他の方法にしてみた。

1. 下に padding が設定されていればバグは出難い。アコーディオン下部は必ず伸ばさなくてはならないので、アコーディオンの一番外側の要素 padding:10px で伸ばす。IE6 は _padding:11px にする。
2. IE6 でバグが出るならば、アコーディオン内部で、画像収容部分の高さを 1px 調整する。
3. 2番めのように、調整出来ない構造ならば中に「divで作ったスペーサー」を埋め込み調整するなりの手段をとる。(なるべく調整できるところを探す)
4. アニメの途中はバグがでます。アニメで高さが変わるということは奇数偶数交互に変化することですから防げません。
5. IE のバグは寸法が固定されていない場合に多い。IE78 であっても、構造次第では起こる可能性があるから参考になるかも知れない。


HTML

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


<div id="accordion">
	<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 id="accordion-i" 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 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>

JS

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


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

	$(function(){

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

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

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

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

})(jQuery);

CSS


/* accordion-i.css 横自由伸縮*/

#accordion {
	width:200px;
	height:100%;/*IE6で重要です*/
	margin:0;
	padding:0 0 10px 0;
	_padding:0 0 11px 0;/*IE6下部角丸補正*/
	text-align:left;
	background-color:#D2B4BC;
	text-align:left;
	overfalow:hidden;
}

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

#accordion .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;
}

#accordion .accordbox {
	display:block;
	width:auto;
	_height:100%;/*IE6*/
	margin:0 1px;
	padding:0;
	background-color:#FFFFFF;
	overfalow:hidden;
}
 
#accordion .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;
}
#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 ul {
	display:block;
	width:auto;/*IE6重要*/
	margin:0 5px;
	padding:0;
}

#accordion .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;
}
#accordion .accordbox ul li a {
	text-decoration:none;
	color:#BBBBBB;	
}
#accordion .accordbox ul li a:hover {
	background-color:#EFEFEF;
	color:#000000;
}

#accordion .accordbox ul li a:active {
	color:#555555;
}

#accordion .box-bottom {
	display:block;
	width:auto;
	margin:0 1px;
	height:161px;/*必ず高さを設定すること IE6下部角丸補正*/
	text-align:center;
}
#accordion .box-bottom .btm-inner {
	display:block;
	margin:0 auto;
	height:160px;
	background-color:#FFFFFF;
}

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


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(){
	$("#accordion").corner("10px");
});
</script>



画像

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

使用背景画像

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


arrow.gif 21x44 透過画像

以上です。




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