prototype.jsでアコーディオンなタブな横メニュー

　2008-01-11

　「prototype.js」「moo.fx.js」など有名なJavaScriptライブラリを使うアコーディオン式のタブメニューです。比較的軽快に動いてくれると思います。

information

JavaScript

body

CSS

information
「prototype.js」「moo.fx.js」などのJavaScriptライブラリを使うアコーディオンなタグメニューです。Flashのように動きのあるメニューができあがります。必要なファイルはこちらよりダウンロードしてください。

　・prototype.lite.js
　・moo.fx.js
　・moo.fx.pack.js
　・greentab.jpg

JavaScript

<script type="text/javascript" src="prototype.lite.js"></script>
<script type="text/javascript" src="moo.fx.js"></script>
<script type="text/javascript" src="moo.fx.pack.js"></script>

<script type="text/javascript">
function init(){
	var stretchers = document.getElementsByClassName('box');
	var toggles = document.getElementsByClassName('tab');
	var myAccordion = new fx.Accordion(
		toggles, stretchers, {opacity: false, height: true, duration: 600}
	);
	//hash functions
	var found = false;
	toggles.each(function(h3, i){
		var div = Element.find(h3, 'nextSibling');
			if (window.location.href.indexOf(h3.title) > 0) {
				myAccordion.showThisHideOpen(div);
				found = true;
			}
		});
		if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>

～～～～～～～～～～～～～～～～～～～～～～～～～～～

　※　以下は最後の</div>と</body>の間に挿入してください。

<script type="text/javascript">
	Element.cleanWhitespace('content');
	init();
</script>

body部分

<div id="wrapper">
	<div id="content">
	<h3 class="tab" title="first"><div class="tabtxt"><a href="javascript:;">menu1</a></div></h3>
	<div class="tab"><h3 class="tabtxt" title="second"><a href="javascript:;">menu2</a></h3></div>
	<div class="tab"><h3 class="tabtxt" title="third"><a href="javascript:;">menu3</a></h3></div>
	<div class="tab"><h3 class="tabtxt" title="fourth"><a href="javascript:;">menu4</a></h3></div>
	<div class="boxholder">
		<div class="box">
			<p><strong>メニュー1</strong><br />
				内容を記入
			</p>
		</div>
		<div class="box">
			<p><strong>メニュー2</strong><br />
				内容を記入
			</p>
		</div>
		<div class="box">
			<p><strong>メニュー3</strong><br />
				内容を記入
			</p>
		</div>
		<div class="box">
			<p><strong>メニュー4</strong><br />
				内容を記入
			</p>
		</div>
	</div>
</div>
</div>

参考程度にCSS

　※　FC2ブログは若干重いときがあるので別サーバのサンプルもどうぞ。

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