accordian.pack.js - JavaScriptでアコーディオンでタブな横メニュー

　2008-01-11

　JavaScriptで作るダイナミックなタブメニューの設置方法を説明します。まるでFlashで作ったかのような滑らかな動きをしてくれます。JavaScriptは「accordian.pack.js」というライブラリを利用しています。

　「accordian.pack.js 」は右クリックで保存してお使いください。タグの数や幅などはCSSで簡単に変更できますので参考にしてみてください。サンプルはこちらをご覧ください。

<script type="text/javascript" src="accordian.pack.js"></script>

【body部分】
<body onload="new Accordian('basic-accordian',5,'header_highlight');">
<div id="basic-accordian">
<div class="tab_container">
  <div id="test1-header" class="accordion_headings header_highlight" >menu1</div>
  <div id="test2-header" class="accordion_headings" >menu2</div>
  <div id="test3-header" class="accordion_headings" >menu3</div>
  <div id="test4-header" class="accordion_headings" >menu4</div>
</div>
<div style="float:left;">
  <div id="test1-content">
	<div class="accordion_child">
    	menu1の内容をここに記入
    </div>
  </div>
  <div id="test2-content">
	<div class="accordion_child">
    	menu2の内容をここに記入
    </div>
  </div>
  <div id="test3-content">
	<div class="accordion_child">
    	menu3の内容をここに記入
    </div>
  </div>
  <div id="test4-content">
	<div class="accordion_child">
    	menu4の内容をここに記入
    </div>
  </div>
</div>
</div>
</body>

【スタイルシート】
#basic-accordian{
	width:478px;
	font-size: 12px;
	padding:5px;
	line-height: 150%;
}
.accordion_headings{
	text-align: center; 
	padding:3px;
	background:#99CC00;
	color:#FFFFFF;
	border:1px solid #FFF;
	cursor:pointer;
	font-weight:bold;
}
.accordion_headings:hover{
	background:#00CCFF;
}
.accordion_child{
	padding:15px;
	margin:0px;
	background:#F0F0FF;
}
.header_highlight{
	background:#00CCFF;
}
.tab_container *{
	float:left;
	width:110px;
}

　タブの数や長さ、全体の長さは変更可能ですがうまく調節しないとちゃんと表示されませんのでご注意ください。

　bodyタグを上記のように変更しないといけないので注意ください。で、サンプルはこちらですのでご覧ください。

レッツFC2ブログ　アコーディオンタグ
アコーディオンタグでその他のスクリプトもどうぞ