menufolder.jsによるサイド・バーの折りたたみ

サイド・バーでのメニューの折りたたみ、サブ・カテゴリーの折りたたみ、月別アーカイブの折りたたみのカスタマイズです。併せて、カテゴリー及び月別アーカイブのツリー化を行っています。

使っているのは小粋空間さんが公開している menufolder.js です。但し、機能的には折りたたみの機能だけを使っておりmenufolder.jsの持つサブ・カテゴリーの折りたたみ機能、アーカイブ・リストの折りたたみ機能、リスト数表示機能は使っておりません。従ってそれらの機能はMovable Typeのテンプレート・タグ及び後述のpluginを使って実現しています。この方法だとアーカイブ類の折りたたみに限らずいろいろなケースに応用が効くと思います。

月別アーカイブのツリー表示でのテンプレート・タグを補強するため、MTArchiveDateHeader、ArchiveDateFooterのpluginが必要です。
尚、IE6ではpng画像が透過されないバグがありますので、その修正を行う必要から DD_belatedPNG.js を使っています。

メニューのスロー開閉については、先の記事「メニュー開閉スクリプトmenufolder.jsのjQueryによるスロー開閉」を参照ください。スロー開閉にはmenufolder.jsへのカスタマイズが必要ですので注意ください。

尚、本稿は既にjQueryが動いていることを前提としています。

準備するplugin類
1. MTArchiveDateHeader plugin
  本家からの入手ができない場合はこちらから。
2. ArchiveDateFooter plugin
  (MT4.2)用でMT5以降も動作します。
3. menufolder.js version7.00
4. 月別アーカイブ・リストで使うツリー画像１ tree_lst_solid.gif
5. 同上ツリー画像２ tree_end_solid.gif
6. DD_belatedPNG.js 最新version 0.0.8a

アップー・ロード

１項は解凍後のplugins配下のMTArchiveDateHeaderフォルダーごと、２項については解凍後のArchiveDateFooterのフォルダーごとMovable Typeのpluginsフォルダーにアップ・ロードする。Movable Typeの管理画面のシステム＞ツール＞プラグインで各々が表示されれば完了です。
上記4項、5項の画像ファイルはファイル名を変更してルート・ディレクトリーにアップ・ロードします。
tree_lst_solid.gif →　tree_lst.gif
tree_end_solid.gif →　tree_end.gif
上記6項は DD_belatedPNG_0.0.8a-min.js ファイルを js/DD_belatedPNGフォルダーにアップ・ロードします。

3項のmenufolder.jsは解凍してエディターで下記カスタマイズを行った後ルート・ディレクトリーにアップロードします。

修正・確認を要する部分　248行以降


//--------------------------------------------------------
// メニュータイトル用設定データ
//--------------------------------------------------------

// リンク方式
// 折りたたみマークにリンク付与：'unblock'
// メニュータイトル枠全体にリンク付与 'block'
var linkType = 'block';

//-----------------------
// 折りたたみスピード
//-----------------------

// 全てのメニューのスピード
// 通常：'normal'
// 遅い：'slow'
var speed = 'slow';

// サブカテゴリーのスピード(speed が slow の場合のみ有効)
// 通常：'normal'
// 遅い：'slow'
var subcategorySpeed = 'normal';

//-----------------------
// 折りたたみマーク関連
//-----------------------

// 折りたたみマーク表示(メニュータイトル枠全体をリンクにする場合のみ有効)
// 表示する：true
// 表示しない：false
var displayMark = true;

// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
// 画像を設定する場合は右辺を '<img src="[画像のURL]" />'; と書いてください
var openMarkForSideBarMenu  = '<img src="https://www.mizunara.com/arrowdown.png" alt="arrowdown"  class="hack-png" />';
var closeMarkForSideBarMenu = '<img src="https://www.mizunara.com/arrowup.png" alt="arrowup" class="hack-png" />';

// 折りたたみマーク位置(折りたたみマークを表示する場合のみ有効)
// タイトル前に折りたたみマークを配置：true
// タイトル後に折りたたみマークを配置：false
// 左端または右端に折りたたみマークを配置：true
var preMarkForSideBarMenu = true;

// 折りたたみマーク画像(リンク方式が 'block' の場合のみ使われます)
// 画像を使用する：true
// 画像を使用しない：false
// var image = true;

黄色は確認、青色は修正箇所です。折りたたみマークは上向き矢印マーク（閉じる用）、下向き矢印（開く用）の画像を準備し、そのアップ・ロード先URLを指定してください。（上記は例です。自分のドメインとディレクトリー構造に応じて指定してください）
その際、IE6のバグ対応を行うため（PNG画像を使う場合）、imgタグにclass指定を行います。DD_belatedPNG.jsの処理対象を明示するためです。

javascriptの読み込みとDD_belatedPNGの起動をヘッダー・モジュールで行います。


    <script type="text/javascript" src="<mt:BlogURL />menufolder.js"></script>
    <!--[if IE 6]>
        <script type="text/javascript" src="<mt:BlogURL />js/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js"></script>
        <script type="text/javascript">
            DD_belatedPNG.fix('.hack-png');
        </script>
    <![endif]-->

DD_belatedPNG.jsのロードと動作はIE6だけを対象とします。.hack-pngは前記menufolder.jsのカスタマイズで指定したimg要素のclass指定です。

下記は単にメニューの開閉を行う部分の例です。
```
<dt class="sidetitle" id="gamename">
頭の体操
</dt>
<dd class="game" id="gamelist">

～　テンプレート処理ロジック　～

<script type="text/javascript">
FoldNavigation('game','off',false);
</script>
</dd>
```
色の着いた部分がmenufolder.jsを動かす記述となります。

３ヶ所の赤色の部分は一意のＩＤで一つの開閉機能の塊となります。異なった文字列にはできません。又他の開閉機能とぶつかってはいけません。この文字列で開閉状態がcokieに記憶されます。

水色の部分は初期状態で開いた状態にする(on)か、閉じた状態(off)にするかを指定します。使い出した後はcokieに状態が記憶されて以前にブラウザを閉じた時の状態で表示されます。

緑色の部分は当サイトでは使っていません。アーカイブ・リストの折りたたみ機能で記事数をmenufolder.jsが数えて表示する(true)かしない(false)かの指定に使われます。

この構成は他の例でも全く同じです。id="xxxname" で指定された部分が開閉のタイトル部分になり、id="xxxlist" で指定された部分が開いたり閉じたりする部分となります。

次に当サイトに於けるカテゴリー・アーカイブのリスト表示の例です。親子の２層のカテゴリー構造を採っています。親カテゴリーの部分はアーカイブ・リストにジャンプせずにメニューの開閉に使われています。但し、子カテゴリーが無い場合にはアーカイブ・リストにジャンプしています。途中で方式を変えたりしたので煩雑、無駄なコーディングとなっていますので余り参考にはならないかも、です。


<mt:IfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle" id="categoryname">
カテゴリ
</dt>
<dd class="sidecat" id="categorylist">
<div id="categories">
<mt:TopLevelCategories sort_by="user_custom">
<mt:SubCatIsFirst><mt:HasParentCategory><ul id="subcat<mt:ParentCategory><mt:CategoryBasename /></mt:ParentCategory>list"></mt:HasParentCategory></mt:SubCatIsFirst>
<mt:If tag="CategoryCount">
   <mt:HasNoParentCategory><div id="subcat<mt:CategoryBasename />name" <mt:HasNoSubCategories>class="nonsubcat"><mt:Else>class="havesubcat"></mt:HasNoSubCategories><mt:HasSubCategories><mt:CategoryLabel /><mt:Else><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel></a> [<mt:CategoryCount />]</mt:HasSubCategories></div>
   <mt:Else><li class="tree<mt:SubCatIsLast>_end</mt:SubCatIsLast>"><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a> [<mt:CategoryCount />]</li>
   </mt:HasNoParentCategory>
<mt:Else>
   <mt:HasNoParentCategory><div id="subcat<mt:CategoryBasename />name" <mt:HasNoSubCategories>class="nonsubcat"><mt:Else>class="havesubcat"></mt:HasNoSubCategories><mt:HasSubCategories><mt:CategoryLabel /><mt:Else><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel></a></mt:HasSubCategories></div>
   <mt:Else><li class="tree<mt:SubCatIsLast>_end</mt:SubCatIsLast>"><mt:CategoryLabel /></li>
   </mt:HasNoParentCategory>
</mt:If>
<mt:SubCatsRecurse max_depth="3">
<mt:SubCatIsLast><mt:HasParentCategory></ul></mt:HasParentCategory></mt:SubCatIsLast>
</mt:TopLevelCategories>
</div>
<script type="text/javascript">
<!--
<mt:TopLevelCategories>
<mt:HasSubCategories>FoldNavigation('subcat<mt:CategoryBasename />','off',false);</mt:HasSubCategories>
<mt:SubCatsRecurse>
</mt:TopLevelCategories>
FoldNavigation('category','off',false);
//-->
</script>
</dd>
</mt:IfArchiveTypeEnabled>

黄色がカテゴリーリスト自体の開閉部分、水色が各親カテゴリーで子カテゴリーを開いたり閉じたりする部分です。
子カテゴリーの無い親カテゴリーでは開閉は無くカテゴリーリストへのリンク先を指定しています。
子カテゴリーではカテゴリーリストへのリンクを取って記事数を表示しています。記事が１つも無い子カテゴリーの場合にはリンク・タグは作成しません。

次は当サイトでの月別アーカイブの例です。


<mt:if name="module_monthly_archives">
<mt:IfArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle" id="monthlyname">
月別アーカイブ
</dt>
<dd class="monthly" id="monthlylist">
<mt:ArchiveList archive_type="Monthly">
<mt:ArchiveDateHeader><div id="archive<mt:ArchiveDate format="%Y">name"><mt:ArchiveDate format="%Y年" /></div><ul id="archive<mt:ArchiveDate format="%Y">list"></mt:ArchiveDateHeader>
<li class="tree<mt:ArchiveDateFooter>_end</mt:ArchiveDateFooter>"><a href="<mt:ArchiveLink />"><mt:ArchiveDate format="%B月" /></a> [<mt:ArchiveCount />]</li><mt:ArchiveDateFooter></ul></mt:ArchiveDateFooter>
</mt:ArchiveList>
<script type="text/javascript">
//<![CDATA[
<mt:ArchiveList archive_type="Monthly"><mt:ArchiveDateHeader>
FoldNavigation('archive<mt:ArchiveDate format="%Y">','off',false);
</mt:ArchiveDateHeader></mt:ArchiveList>
FoldNavigation('monthly','off',false);
//]]>
</script>
</dd>
</mt:IfArchiveTypeEnabled>
</mt:if>

黄色の部分が月別アーカイブのメニュー自体の開閉部分です。水色の部分が各西暦年で月毎のリストを開閉する部分を作っている箇所です。
西暦年をタイトルとしてその年の月毎のアーカイブリストへのリンクと記事数を作り出しています。

上記の３つの例でのCSSは下記の通りです。あくまで当サイトでの例ですので環境に合わせて修正ください。


.sidetitle {
    display: inline-block;
    margin-top: 3px;
    width: 185px;
    height: 25px;
    box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-radius: 0.5em;   
    color: #ffffff;
    font-size: 77%;
    font-weight: bold;
    line-height: 2.0;
    overflow: hidden;
    background: #666666;
    background: linear-gradient(to bottom,#474747,#999999);
    background: -moz-linear-gradient(#474747, #999999);
    background: -webkit-linear-gradient(#474747,#999999);
}
.sidetitle a,
.sidetitle a:hover {
    color: #ffffff;
}
.sidetitle img {
    padding-left: 2px;
    vertical-align: text-top;
}
.sidecat,
.monthly {
    margin: 3px 0 20px 3px;
    background: none;
    color: #ffffff;
    font-size: 75%;
    line-height: 1.5;
    word-break: normal;
}
.sidecat .nonsubcat {
    line-height: 1.5em;
    padding-left: 20px;
    background: transparent url("<mt:StaticWebPath>images/nav_icons/color/categories.gif") no-repeat left 0.15em;
}
.sidecat .havesubcat {
    line-height: 1.5em;
}
.sidecat .havesubcat img {
    margin-left: 0;
    vertical-align: text-bottom;
    padding-right: 4px;
}
.sidecat ul li.tree {
    list-style: none;
    margin-left: 30px;
    padding-left: 12px;
    background: url(tree_lst.gif) no-repeat;
}
.sidecat ul li.tree_end {
    list-style: none;
    margin-left: 30px;
    padding-left: 12px;
    background: url(tree_end.gif) no-repeat;
}
.monthly img {
    vertical-align: text-bottom;
    padding-right: 4px;
}
.monthly ul {
    padding-left: 16px;
    list-style: none;
}
.monthly ul li.tree {
    margin-left: 16px;
    padding-left: 12px;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat;
    list-style: none;
}
.monthly ul li.tree_end {
    margin-left: 16px;
    padding-left: 12px;
    background-image: url(tree_end.gif);
    background-repeat: no-repeat;
    list-style: none;
}

(以下 IE6用 持ち替えCSS）

.sidetitle {
    margin-top: 3px;
    width: 185px;
    height: 25px;
    border-top: 1px solid  #cccccc;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #555555;
    border-bottom: 1px solid #555555;
    color: #ffffff;
    font-size: 77%;
    font-weight: bold;
    line-height: 2.0;
    overflow: hidden;
    background: #666666;
}
.sidetitle img {
    float: left;
    padding: 2px 0 0 0;
}

詳細は下記の小粋空間さんの記事を参照ください。

menufolder.jsによるサイド・バーの折りたたみ

タグ:

トラックバックURL

コメントする