2008年7月22日

Accordion によるサイドメニューの折りたたみ

July 22,2008 2:22 AM
Tag:[, , , ]
Permalink

JavaScript ライブラリ Accordion によるサイドメニューの折りたたみです。

Accordion は、いくつかのメニューをグループ化し、あるメニュータイトルをクリックすることで、グループ内の特定のメニューリストだけを表示し、他のメニューリストを閉じるライブラリです。下のサンプルへのリンクをクリックして、表示されたサンプルのサイドメニューをクリックしてみてください。

サンプル

ここでは配布テンプレートのサイドバーを例にカスタマイズ方法を紹介します。Movable Type を例にしていますが、JavaScript 外部ファイルのアップロードが可能なブログサービスやブログツールであれば他のテンプレートでも適用可能です。

なお、Accordion は縦方向の折りたたみ以外に、横方向の折りたたみや入れ子にした折りたたみも可能です。

1.ライブラリのダウンロード

Accrodion のサイトにアクセスして、「Download the code!」をクリック。

「Download the code!」をクリック

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

「Get it here Accordion v2.0」のリンクをクリック

2.ライブラリのアップロード

ダウンロードしたアーカイブを展開し、accordion\javascript 配下にある、次の3つのファイルをブログディレクトリにアップロードします。ここでは javascript フォルダごとアップロードします。

  • javascript/prototype.js
  • javascript/effects.js
  • javascript/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 による折りたたみが動作すれば完成です。

6.特定のメニューをデフォルトで表示する

特定のメニューをデフォルトで表示する方法は、下記の記事を参照してください。

Accordion で特定のメニューをデフォルト表示する

2008.08.03
loadAccordions の設定を一部見直しました。

2008.09.02
6項を追加しました。

Comments [39] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3