エントリー本文
Accordion によるサイドメニューの折りたたみ
Category:[JavaScript, サイドメニュー, 折りたたみ]
Tag:[Accordion, Customize, Folding, MovableType]
JavaScript ライブラリ Accordion によるサイドメニューの折りたたみです。
Accordion は、いくつかのメニューをグループ化し、あるメニュータイトルをクリックすることで、グループ内の特定のメニューリストだけを表示し、他のメニューリストを閉じるライブラリです。下のサンプルへのリンクをクリックして、表示されたサンプルのサイドメニューをクリックしてみてください。
ここでは配布テンプレートのサイドバーを例にカスタマイズ方法を紹介します。Movable Type を例にしていますが、JavaScript 外部ファイルのアップロードが可能なブログサービスやブログツールであれば他のテンプレートでも適用可能です。
なお、Accordion は縦方向の折りたたみ以外に、横方向の折りたたみや入れ子にした折りたたみも可能です。
1.ライブラリのダウンロード
Accrodion のサイトにアクセスして、「Download the code!」をクリック。

「Get it here Accordion v2.0」の部分のリンクをクリックすればダウンロードが開始します。必要に応じてドネーションをしてください。

2.ライブラリのアップロード
ダウンロードしたアーカイブを展開し、accordion\javascript 配下にある、次の3つのファイルをブログディレクトリにアップロードします。ここでは javascript フォルダごとアップロードします。
javascript/prototype.jsjavascript/effects.jsjavascript/accordion.js
3.テンプレートの設定(ヘッダー)
ブログ管理画面より、「デザイン」-「テンプレート」-「テンプレートモジュール」-「ヘッダー」を選択し、head の終了タグ直前に下記の script 要素を追加します。prototype.js をすでに使用している場合は、一番上の1行は不要です。
<script type="text/javascript" src="<mt:BlogURL />javascript/prototype.js"></script>
<script type="text/javascript" src="<mt:BlogURL />javascript/effects.js"></script>
<script type="text/javascript" src="<mt:BlogURL />/javascript/accordion.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', loadAccordions, false);
function loadAccordions() {
var leftAccordion = new accordion('links-left');
var rightAccordion = new accordion('links-right');
}
</script>
</head>
関数 loadAccordions の中に記述している 2 行のパラメータ(赤色)は、折りたたみのメニュー全体を括っている id 属性を指定します。サンプルテンプレートでは、左サイドバー全体を括っている dl 要素の id 属性 links-left と、右サイドバー全体を括っている dl 要素の id 属性 links-right を、それぞれ指定しています(青色部分)。
<div id="links-left-box">
<dl id="links-left">
...中略...
</dl>
</div>
<div id="links-right-box">
<dl id="links-right">
...中略...
</dl>
</div>
4.テンプレートの設定(サイドバー)
ブログ管理画面より、「デザイン」-「テンプレート」-「テンプレートモジュール」-「サイドバー(またはサイドバー2)」を選択し、折りたたみを行いたいサイドバーの class 属性値に accordion_toggle と accordion_content を追加します。
下は「最近のエントリー」に設定した例です。
変更前
<MTIf name="module_recent_entries">
<dt class="sidetitle">
Recent Entries
</dt>
<dd class="side">
<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</dd>
</MTIf>
変更後
<MTIf name="module_recent_entries">
<dt class="sidetitle accordion_toggle">
Recent Entries
</dt>
<dd class="side accordion_content">
<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</dd>
</MTIf>
5.スタイルシートの変更
ブログ管理画面より、「デザイン」-「テンプレート」-「スタイルシート」を選択し、次の内容を追加します。
.accordion_toggle {
display: block;
margin-bottom: 5px;
}
.accordion_toggle_active {}
.accordion_content {
overflow: hidden;
padding-bottom: 10px;
}
なお、サンプルでは、次の既存のセレクタから赤色部分を削除して、上記セレクタの設定値の競合を回避しています。
.sidetitle {
margin-top: 3px;
border: 1px solid #666666;
color: #333;
background: #f6f6f6;
text-align: center;
font-size: 75%;
line-height: 2.0;
}
/* サイドメニュー */
.side {
margin: 3px 0 20px;
background: none;
color: #333;
font-size: 75%;
line-height: 1.5;
}
これでブログ全体を再構築して、Accordion による折りたたみが動作すれば完成です。
2008.08.03
loadAccordions の設定を一部見直しました。
- 「サイドメニューの折りたたみ」でメニューリスト別に状態保持を設定する
- 追記文章の折りたたみ Web2.0
記事と関係のない事で申し訳ないのですがサイドバーにリンクバナーとカウンター
を設置しているのですがバナーはサイドバーの縦位置真中に、カウンターは「合計、今日、昨日」と文字をCSSの調整で揃えたいのですがどうしてもできません。
お忙しいところ大変申し訳ないのですがサポートお願いできないでしょうか。
宜しくお願いします。
>conanさん
こんにちは。
ご質問の件ですが、以下でどうでしょうか。
テンプレート(抜粋)
…前略…
<ul>
<li>合計:<img src="http://vita.qee.jp/mt/neo_c/neo_counter.cgi"></li>
<li>今日:<img src="http://vita.qee.jp/mt/neo_c/neo_counter.cgi?today"></li>
<li>昨日:<img src="http://vita.qee.jp/mt/neo_c/neo_counter.cgi?yesterday"></li>
</ul>
…後略…
スタイルシート
.counter ul {
list-style: none;
}
それではよろしくお願い致します。
もしよろしければ、.accordion_toggle_activeはどのように使えるか、
少し例を教えていただければ嬉しい限りです。
なぜ気になったかと言いますと、ページによって
あらかじめ開いているアコーディオンを設定・制御したいと
考えたのですが、やり方が分からなかったためです。。。
大変失礼しました。
.accordion_toggle_activeは、javascript側で制御されているのか、
設定すればちゃんと反映されますね・・。
>ページによってあらかじめ開いているアコーディオンを設定・制御
する方法がございましたら、宜しくお願い致します。
>miyamotoさん
こんばんは。
ご質問の件ですが、ページごとに loadAccordions の設定を変更できれば、制御は可能と思われます。質問の回答にはならないかもしれませんが、後日関連のエントリーを別途投稿したいと思います。
それではよろしくお願い致します。
yujiroさま
ありがとうござます。MT4.1のサイトですので、
カスタムフィールドの変数で分岐させれば可能でしょうか。
ダウンロードページにはそれらしき記述があるのですが、
↓自分なりに色々やってみただけではお手上げでした。どうぞ宜しくお願い致します。
| What if you want to use javascript to open a slide on load or at any time... here is how.
|
| // Let's create it
| var verticalAccordion = new accordion('#bottom_container');
|
| // Now lets open the first slide
| verticalAccordion.activate($$('#bottom_container .accordion_toggle')[0]);
|
| So we use the selector method from prototype to get the first title bar from the container+classname and we want the first one so we use [0]. Couldn't be easier!
たびたびすみません、追伸です。
同じくダウンロードサイトの「How to Use」の項目内の最後には「Preload」と書かれてあります。
私はこれを、画面のonLoad時に最初、アコーディオンが開いた状態が見えてしまうことを防ぐ意味なのかと思い、実際にそうしたかったので、添え書きされているコードを使ってみました。が、やはりアコーディオンが開いた状態が最初にどうしても見えてしまいます。
この問題への対処ももしお手数でないようでしたら、アドバイスいただければ幸いです。
ちなみに実装方法は、上記サイトではなくこちらのサイトの内容どおりに記述して、アコーディオンはきれいに動作している状態です。何卒宜しくお願い致します。
>ご質問の件ですが、ページごとに loadAccordions の設定を変更できれば、制御は可能と思われます。
なんとか自己解決いたしましたので報告致します。
function loadAccordions() {
var bottomAccordion = new accordion('links-left');
<MTIfNonEmpty name='c_sidebarid'>
bottomAccordion.activate($$('#links-left .accordion_toggle')[<MTGetVar name='c_sidebarid'>]);
</MTIfNonEmpty>
}
c_sidebaridとは、MT4のフォルダに持たせたカスタムフィールドの変数です。
(ここより前にsetしておきます。)
これで任意のエリアがあらかじめオープンになる動作が確認できました。お騒がせして申し訳ありませんでした。
>miyamotoさん
こんにちは。
情報ありがとうございました。
うまくできたようでよかったです。
ではでは!
yujiro様、こんばんは。
まだカレンダーの件が済んでいないのに、先走っています。
サイドバーのタイトルの事なのですが、yujiro様のテンプレートにあるようなサイドバーboxにタイトル(最近の記事など)が表示され、なおかつ程よい大きさに出来るのか解らずにいます。ウィジェットでBlogPetを表示させてtestしてみたり、カレンダーも最初からやり直してみたのですが、結局解らないままです。
boxだから、CSSを見てみたのですが、すでにサイドバーとして大きさを決めているようなので、どこをいじったらいいのかさらに解らずにいます。
以前はfc2にいたので、ある程度は解ったのですが、MTにお引越ししたら、再構築のたびに、エラー表示出るかな?とはらはらしどうしです。
お忙しいところ申し訳ありませんが、教えて頂けますでしょうか?

