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

 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 onload="new Accordian('basic-accordian',5,'header_highlight');">
 bodyタグを上記のように変更しないといけないので注意ください。で、サンプルはこちらですのでご覧ください。
レッツFC2ブログ アコーディオンタグ
アコーディオンタグでその他のスクリプトもどうぞ
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加