スムーズなアコーディオンメニュー！

コンテンツ

ブログ記事

スムーズなアコーディオンメニュー！

------------------

主にサイドバーなどで活躍しそうな、アコーディオンメニューをご紹介したいと思います。

いつもの様に（笑）、テストしてみました。
メニューに表示する項目が多くなると、メニューをどのように表示したら良いかという悩みが出てきます。
ドロップダウンメニューなどでも良いですよね。
が、項目が多くなると下のコンテンツにかぶってくるので、もう少しスマートにいかないものかとネットで探していると、上記にあったアコーディオンメニューを見つけ、これはなかなか良いのでは？と思いました。（今回はゲームのジャンルで試してみました。プロ野球ネタでも良かったのですが・・・）苦笑

以下、テストしたサンプルの説明です。

・まず、prototype.js、effects.js、accordion.jsを読み込む為のソースを<head>内に記述します。

<script type="text/javascript" src="index3_files/prototype.js"></script>
<script type="text/javascript" src="index3_files/effects.js"></script>
<script type="text/javascript" src="index3_files/accordion.js"></script>

・その下にjsソースを記述します。

<script type="text/javascript">
	Event.observe(window, 'load', function(){
			var acc = new accordion("accordion");
			acc.activate($$("#accordion .accordion_toggle")[0]);
	}, false);
</script>

・次にhtmlソースを記述します。

<div id="accordion">
	<div class="accordion_toggle"><p class="genre-name">PS3</p></div>
	<div style="height: auto; display: block;" class="accordion_content">
	<ul>
		<li><a href="#">アクション</a></li>
		<li><a href="#">アドベンチャー</a></li>
		<li><a href="#">シューティング</a></li>
　　　　　　・・中略・・
　　　　</ul>
	</div>
	<div class="accordion_toggle"><p class="genre-name">PS2</p></div>
	<div style="height: 0px; display: none;" class="accordion_content">
	<ul>

		<li><a href="#">アクション</a></li>
		<li><a href="#">アドベンチャー</a></li>

class=”accordion_content”と指定された要素をclass=”accordion_toggle”の要素をクリックする事により、閉じたり開いたりします。私のサンプルではclass=”accordion_content”の中にリスト(ul)を埋め込んでみました。
これにより、class=”accordion_toggle”の要素をクリックすると中のリストが表示されます。（と同時に、アクティブではない他のリストは閉じます。）
個人的に操作感はなかなか良いと思っていますが、うーん、IE6では、動きがぎこちないのが気になりますね。。。；

ちなみに、、、
acc.activate($$(”#accordion .accordion_toggle”)[0]);
で#accordion .accordion_toggleと指定した要素の1番目を最初に開いておくという設定をしています。
なので、
acc.activate($$(”#accordion .accordion_toggle”)[1]);
と変えれば、2番目を最初に開けて表示し、
acc.activate($$(”#accordion .accordion_toggle”)[2]);
と変えれば、3番目を最初に開けて表示します。

場面場面で使い分けが出来そうなのが良いですね！
以上、スムーズなアコーディオンメニュー！でした。

以下、参考にした記事です。
アコーディオン形式で内容を表示できるAccordion v2.0[to-R]
ありがとうございます。

PS　3月になりました。春はもうすぐそこ！でも、もう少し寒い日が続きそうです。皆様お風邪など召されぬようご自愛下さい。

こちらもあわせてどうぞ！

------------------

2009年03月05日（木）

コメント＆トラックバック

------------------

このエントリーにはまだコメントがありません。

トラックバックURL：

http://miracle-ysdesign.com/blog/webdesignconnection/291.html/trackback

«前の記事：「リンクに新しいウィンドウで開くためのアイコンを自動で追加するプラグイン！」を読む

«次の記事：「画像に鏡面反射効果を与えるreflection.js！」を読む

ブログ記事