スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScriptで横に開くアコーディオンメニュー

 JavaScriptを使って横に開くアコーディオンメニューを紹介します。JavaScriptなのにFlashのような動きのあるメニューが作れます。「prototype.js」「effects.js」「accordion.js」という 3種類のJavaScriptライブラリを利用しており動きは比較的軽快かと思います。タブ数や大きさはJavaScriptとCSSをいじれば自由に変更することができます。

1

 JavaScriptを使って横に開くアコーディオンメニューを紹介します。JavaScriptなのにFlashのような動きのあるメニューが作れます。JavaScriptライブラリは下記よりダウンロードしてお使いください。直リンクはやめてくださいね。

 ・ prototype.js
 ・ effects.js
 ・ accordion.js

2

JavaScript

3

body部分

4

CSS

5

 JavaScriptの注意点を少しだけ。
[JavaScript]
#horizontal_container .horizontal_accordion_toggle')[0]);
始めに開いているタブを指定します。「0⇒1つ目」「1⇒2つ目」という具合になります。

defaultSize : {width : 340}
大きさを変更するにはCSSだけでなくJavaScriptも変更しないといけないので注意してください。
 ※ FC2ブログは若干重いときがあるので別サーバのサンプルもどうぞ。
レッツFC2ブログ アコーディオンタグ
アコーディオンタグでその他のスクリプトもお楽しみください。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
お世話になっております。

横に開くアコーディオンメニューを参考にさせて頂き、今ではフル活用させて頂いております。

ひとつ質問させて頂きたいのですが、タグの個数が6個以上になりますと、6個目のタグから改行されて表示されてしまいます。

CSSとJavaScriptをいじればいいのだと思うのですが、試行錯誤の結果、問題を解消できずにいます。どうかアドバイスを頂けないでしょうか?

宜しくお願い致します。
【2009/09/09 11:25】 | toshi #- | [edit]
はじめまして!

当ブログを参考にしていただきありがとうございます。

ご質問の件ですがtoshiさんの仰るようにhtml内にある以下の部分とCSSの調整でうまくいくと思います。

defaultSize : {width : 340}

例えばタブを6つにするなら

defaultSize : {width : 300}

にすればよいと思います。
タブが増えた分縮める必要があるわけですね。
【2009/09/10 23:05】 | 管理人 #E2ywrYdA | [edit]









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

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。