Movable Type 備忘録

 サイドバーを折りたたむ２

  • Apr042006
  • Vote:
    http://bizcaz.com/archives/2006/04/04-202736.php
  • Categories: JavaScript
  • Tags:
  • Social Bookmark

以前、サイドバーを折りたたむで、サイドバーにあるカテゴリ一覧とか、コメント一覧、トラックバック一覧などを折りたたむ、JavaScriptを使用したカスタマイズについて紹介しました。

今回紹介するサイドバーを折りたたむカスタマイズも、基本的にはJavaScriptを使用するのですが、折りたたむ以外の機能もついています。

主な機能として、

  • サイドメニューを折りたたむことができる。
  • カテゴリ一覧のサブカテゴリ毎に折りたたむことができる。
  • メニュータイトル部分または、カテゴリー名横に折りたたみ用のリンクが表示され、そのリンクのクリックによりメニューリストの開閉を行うことができる。
  • メニュータイトル部分にリスト数を表示することができる。
  • 折りたたみ状態をメニュー単位でCookieに保存される。
    これにより、同じ折りたたみメニューを別ページで使用した場合、メニューの状態が全ページに反映されます。

があります。これらはJavaScriptのパラメータから設定可能です。

今回参考にさせてもらったサイトは、いつもお世話になっている 小粋空間 様です。

▼JavaScriptの入手はこちらから▼
http://www.koikikukan.com/scripts.php

カスタマイズ方法

まず、JavaScriptダウンロードします。
上記リンクより、menufolder.js というリンクがありますので、そちらからJavaScriptをテキストファイルにコピペしてください。

サイドメニューの折りたたみ設定を行います。
基本的にはデフォルト設定のままでも問題なくサイドメニューの折りたたみができます。

JavaScript内に設定内容にコメントが入っていますので、自分好みに変更をしてください。

例えば、デフォルトでは折りたたみマーク(▼、▲)は非表示になっていますが、マーク表示したい人は以下のように変更します。

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

コメントにもあるように、青い字の部分を false から true に変更すればマーク表示されるようになります。
また、折りたたみマークも簡単に変更できます。

  1. 278行目
  2. // 折りたたみマーク
  3. // 上：閉じている状態で表示されるマーク
  4. // 下：開いている状態で表示されるマーク
  5. var openMarkForSideBarMenu = '▼';
  6. var closeMarkForSideBarMenu = '▲';

青い字の部分を ▼ ⇒ [+] 、▲ ⇒ [-] のように変更するだけです。
一通り自分好みの設定を行ったら、保存してください。

ファイル保存の際の文字コードは、わたしは UTF-8 で保存しましたが、各自の環境に合わせて menufolder.js というファイル名で保存します。

サーバーにアップロードします。
保存したらサーバーにアップロードします。アップロード先はどこでもかまいません。各自の環境に合わせてアップロードします。
ここでは、例として メイン・ページ( index.html )と同じ場所に保存しています。

menufolder.js を使用する各テンプレートにタグを追加します。
<head>～</head>の間に以下のコードを追加します。

  1. <script language="JavaScript" type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="<$MTPublishCharset$>"></script>

青い字の部分を、先ほどアップロードしたJavaScriptの場所を指定します。
上記ではメイン・ページと同じ場所を指定しています。

折りたたみたいサイドバーのコードを変更します。
折りたたみたいサイドバーをそれぞれ以下のように変更します。

  1. <div class="sidetitle" id="●●●name">タイトル名称</div>
  2. <div class="side" id="●●●list">
  3.   折りたたみたい内容
  4. </div>
  5. <script type="text/javascript">
  6. <!--
  7. FoldNavigation('●●●','on',false);
  8. //-->
  9. </script>

赤い字の部分にサイドバータイトル名を入れます。
青い字の部分には同じIDを入れてください。

例えば、カテゴリ一覧を折りたたみたい場合は、●●●=category とした場合、categoryname、categorylistというように変更します。
必ず、●●●name、●●●list というように、それぞれ name と list は含めて変更します。

このIDは必ずユニーク(ページ内で唯一)なものにしてください。
例えば、カテゴリ一覧と月別アーカイブで同じ、categoryname、categorylist としてしまうと、正しくサイドバーの折りたたみが行われませんので注意してください。

緑の字の部分は、サイドバーメニューの初期状態を指定します。
on なら開いた状態、off なら閉じた状態となります。

ピンクの字の部分は、リスト数を表示させない場合には、false と指定します。
表示させたい場合には、以下のように指定します。

  1. <script type="text/javascript">
  2. <!--
  3. FoldNavigation('comment','on',true,'li');
  4. //-->
  5. </script>

上記は、コメント一覧を、初期状態は開く、リスト表示あり、カウントするタグ名として li を指定しています。
リスト数はこの li タグの数が表示されます。

あとはいつもの保存して再構築です。
変更したテンプレートを再構築して、サイドバーが折りたためることを確認してください。
折りたたみができなかった場合、IDの指定が間違ってないか確認してみてください。

わたしは間違っていたIDを直したら折りたたまれました。
あと FoldNavigation に指定するパラメータに間違いはありませんか!?

以上で、サイドバーの折りたたみができました。
他にもいろんな機能がありますので、小粋空間：：menufolder.js マニュアルに詳細な説明が書かれていますので、参照してください。

 Trackback Pings(1)

from 臨機応変？

　このサイトも開設してから２年程度がたつため、サイドバーが縦に長くなってきてしま...

Tracked on April 8, 2006

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード