RSS Twitter Facebook
g200kg > MovableType Tips > 5.折りたたみメニュー

MovableType Tips

2008/04/02

5.折りたたみメニュー

« Prev 1.目次 2.カテゴリ毎にデザインを変える 3.変数と変数の比較 4.MovableTypeのコメントを使ったＢＢＳ 5.折りたたみメニュー 6.ページナビゲーション 7. sitemapを作る Next »

サイドバーのアーカイブが長すぎるのでよくある折りたたみメニューにしてみた。こいつをプラグインなしでできるかなっと・・・やってみたらできた。

まず開閉するスクリプトをヘッダーあたりに入れておく

<script language="javascript"><!--
function openItem(id) {
  OBJ = document.getElementById(id).style;
  if(OBJ)
    OBJ.display='';
}
function toggleItem(id) {
  OBJ = document.getElementById(id).style;
  if(OBJ)
    OBJ.display=='none'?OBJ.display='':OBJ.display='none';
}
//--></script>
toggleItem()てのがマウスクリックで開いたり閉じたりする奴。openItem()は開いた状態にする奴で、ページのロード時に指定の場所をあらかじめ開いた状態にするのに使う。

それからメニュー本体

<ul>
  <li onclick="toggleItem('<$MTDate format="%Y"$>')">
    <$MTDate format="%Y"$>
  </li>
  <ul id="<$MTDate format="%Y"$>" style="display:none">
    <MTArchiveList archive_type="Monthly">
      <MTSetVarBlock name="currentyear">
        <$MTArchiveDate format="%Y"$>
      </MTSetVarBlock>
      <MTIf name="oldyear" ne="$currentyear">
        </ul>
        <li onclick="toggleItem('<$MTArchiveDate format="%Y"$>')">
          <$MTArchiveDate format="%Y"$>
        </li>
        <ul id="<$MTArchiveDate format="%Y"$>" style="display:none">
      </MTIf>
      <MTSetVarBlock name="oldyear">
        <$MTArchiveDate format="%Y"$>
      </MTSetVarBlock>
      <li>
        <a href="<$MTArchiveLink$>">
          <$MTArchiveDate format="%Y/%B"$>
        </a>
      </li>
    </MTArchiveList>
  </ul>
</ul>

想定としては月別でアーカイブしてある事。
要するに MTArchiveListでループして10行目あたりで年が変わる所で切れ目を入れて <UL>のリストを作り、メニュー開閉スクリプトを呼び出すコードを入れている。oldyearとcurrentyearが前のアーカイブの年と今のアーカイブの年だ。リストの最初の部分が無条件に現在の年から始まっているので手抜きだが、これは下で説明するようにこのサイトの事情により、カテゴリ－日別アーカイブから特定のカテゴリ(diary)だけを取り出してアーカイブにしているため、ArchiveListHeaderタグが使えなかったためだ。普通に月別アーカイブでリストを作るのならArchiveListHeaderでアーカイブの最初の年を初期値にするべきではある。
まあ、実害としては年が変わってから最初の記事を投稿するまでの間おかしくなるという程度なのでこれでも良いことにしている。

それから、月別アーカイブを開いた時に、該当する年を開いた状態にするために、月別アーカイブテンプレートの中の<body>にスクリプトの呼び出しを入れる。

<body onload="openItem('<$MTArchiveDate format="%Y"$>')">
これで完成。


このサイトの場合は諸般の事情により（主に日本語／英語の両方でページを作っているため）、アーカイブとしてカテゴリ－日別を使っているのでもうちょっとややこしい。とりあえずコードだけ貼っとく。

<ul>
 <li class="foldmenu" onclick="toggleItem('<$MTDate format="%Y"$>')"><$MTDate format="%Y"$></li>
 <ul class="folditem" id="<$MTDate format="%Y"$>" style="display:none">
 <MTArchiveList archive_type="Category-Monthly">
 <MTIfCategory name="diary">
  <MTSetVarBlock name="currentyear"><$MTArchiveDate format="%Y"$></MTSetVarBlock>
  <MTIf name="oldyear" ne="$currentyear">
    </ul>
    <li class="foldmenu" onclick="toggleItem('<$MTArchiveDate format="%Y"$>')"><$MTArchiveDate format="%Y"$></li>
    <ul class="folditem" id="<$MTArchiveDate format="%Y"$>" style="display:none">
  </MTIf>
  <MTSetVarBlock name="oldyear"><$MTArchiveDate format="%Y"$></MTSetVarBlock>
  <li><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%Y/%B"$></a></li>
 </MTIfCategory>
 </MTArchiveList>
 </ul></ul>
« Prev 1.目次 2.カテゴリ毎にデザインを変える 3.変数と変数の比較 4.MovableTypeのコメントを使ったＢＢＳ 5.折りたたみメニュー 6.ページナビゲーション 7. sitemapを作る Next »

g200kg