1. まずは
menufolder.jsをDL
2.
menufolder.js の設定
私は折りたたみマークを表示しないので指示通りに設定。
// リンク方式
// 折りたたみマークにリンク付与：’unblock’
// メニュータイトル枠全体にリンク付与 ‘block’
var linkType = ‘block’;
：
// 折りたたみマーク表示(メニュータイトル枠全体をリンクにする場合のみ有効)
// 表示する：true
// 表示しない：false
var displayMark = false;
// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForSideBarMenu = ”;
var closeMarkForSideBarMenu = ”;
|
3.
スタイルシート追加
文字色・枠線・背景色は自分好みに編集
.sidetitle2 {
width: auto;
margin:3px 0px 0px 0px;
padding: 0px;
text-align: center; /* テキスト配置 */
}
.sidetitle2 a {
width: auto;
}
/* 通常 */
.sidetitle2 a:link,
.sidetitle2 a:visited {
display: block;
padding: 2px;
border: 1px solid #999999; /* 枠線 */
color:#666666; /* 文字色 */
background-color:#f6f6f6; /* 背景色 */
font-family: Verdana, Arial, sans-serif;
font-size:10px;
text-decoration: none;
}
/* マウスポイント時 */
.sidetitle2 a:hover {
padding: 2px;
border: 1px solid #999999; /* 枠線 */
color:#ffffff; /* 文字色 */
background-color: #999999; /* 背景色 */
font-family: Verdana, Arial, sans-serif;
font-size:10px;
text-decoration: none;
}
|
4.
テンプレートに追加
（もしかコピペする方は「＜＞」を半角にしてね。）
① menufolder.js のインクルード文追加
折りたたみを利用する各テンプレートの ～ の間に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください。
＜script language=”JavaScript” type=”text/javascript” src=”＜$MTBlogURL$＞menufolder.js” charset=”utf-8″＞＜/script＞
|
② ■公開テンプレートの場合、折りたたみを行いたいテンプレートの
各メニュータイトルの設定部分を「sidetitle2」にします。
（class 属性を sidetitle2 としたのはこのためです）。
■折りたたみたいサイドメニューのタイトルに「id=”xxname”」、
リストの方に「id=”xxlist”」を付与します。”name”と”list”は固定名称です。
“xx”の部分にはメニュー毎に異なる名称を付与します
（例えばカテゴリーリストは”category”、エントリーは”entry”等）。
同じ名称が存在すると正常に動作しませんのでご注意ください。
■各テンプレートの、折りたたみを指定している各メニューの直下
（例えばカテゴリーリストであれば４項のタグのすぐ下）にスクリプトを追加します。
下記は設定例です。
＜div class=”sidetitle2″ id=”categoryname”＞
Categories
＜/div＞
＜div class=”side” id=”categorylist”＞
＜MTCategories＞
＜a href=”＜$MTCategoryArchiveLink$＞”＞
＜$MTCategoryLabel$＞＜/a＞ [< $MTCategoryCount$>]＜br /＞
＜/MTCategories＞
＜/div＞
＜script type=”text/javascript”＞
＜!–
FoldNavigation(‘category’,'on’,true);
//–＞
＜/script＞
|
折りたたみにしたいメニュー全てを同じように設定する。
これで折りたたみ完了！
詳しい説明は小粋空間さんにて< (_ _)>
