POPSブログ

jQueryアコーディオン/7

120

  Category:  jquery2012/06/19 pops 

jQueryアコーディオン7、「ul li」ブロック構成、開閉連動形のAccordion(clickタイプ)を CSS3 で角丸装飾してみました。CSS3対応のブラウザでご覧ください


アコーディオン7(clickタイプ、CSS3で角丸装飾)


Accordion Menu 装飾サンプル5

アコーディオンを装飾する5、開閉するところを「ul li」ブロックで作りました。構成などは使用者が自由設計できますし、中を増やす事も可能です。また横幅が自由に変更できますから便利です。


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

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

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


MENUの変更


MENU幅


背景色


変更の実行

簡単な説明

1. 全てdiv 「ul li」ブロック構成にしました。「ul li」のため、JS処理は「id」で認識するようにしました。少しCSSが長くなります。
2. CSS3で角丸にしました、全体の幅を設定すればそのほかは適正に配置するようにしました。
3. CSS3対応のブラウザ、Chrome Firefox Safari Opera。IEでは対応していません。
4. この状態で「角丸部分」を除いたレイアウトはオールブラウザ対応ですが、使用者がCSSなど修正した場合は動作レイアウトを確認ください。
5. 全体の幅が狭いため、文字の長さが限定されます。問題がある場合は文字のサイズを小さくして運用ください。
6. 角丸処理が CSS3 に変更なっただけで、当方の前記事「jQueryアコーディオン5」と HTML CSS JS、はほとんど変わりません
7. そのほかは、前の記事などを参考にしてください。


CSS3で角丸処理

CSS3の border-radius で角丸処理を行っていますので、CSS3非対応のブラウザでは処理されません。(IE)

CSS3で角丸、グラデーション背景などの資料は下記参考サイトが詳しい。

【CSS3参考】css-lecture: CSS3 角丸を表現する border-radius


HTML

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


<div id="accordion" class="radiuscorner">
	<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-k" 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">TEXT</div>
	</div>
</div>

JS

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


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

	$(function(){

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

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

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

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

})(jQuery);

CSS

全体の幅のみ設定ください。下部の「画像表示エリア」は自由に構築できます。下部「角丸部分」は全体にパデングを与えて高さを伸ばして構成しています。


/* accordion-k.css 横自由伸縮*/
/* radius css角丸クラス */

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

/*radius css角丸クラス*/
.radiuscorner {
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}

#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:150px;/*必ず高さを設定すること*/
	text-align:center;
}
#accordion .box-bottom .btm-inner {
	display:block;
	margin:0 auto;
	height:150px;
	background: url('/main/images/menu_image2.gif') no-repeat right center;
	background-color:#FFFFFF;
}

下部 btm-inner クラスを入れ子にしているのは、このページでのシミュレーションのためです。




画像

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

使用背景画像

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


arrow.gif
21x44 透過画像

同様な当方の参考記事

角丸を jquery.corner.js を使用して処理したもの、CSS3 の無効なブラウザにも対応できます。構成などほぼ同じ。

【当方の記事】全体を1つのブロックで構成: jQueryアコーディオン5

【当方の記事】ブロックごとに分離して構成: jQueryアコーディオン6


以上です。



[ この記事のURL ]


タグ:jquery , Accordion , css3 , 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]