小粋空間: サイドメニュー: 2007年10月アーカイブ

Top ＞ Movable Type ＞カスタマイズ＞折りたたみ＞サイドメニュー＞ 2007年10月

2007年10月12日

サイドメニューの折りたたみ（定義リスト編）

October 12,2007 1:55 AM
Tag：[Folding, JavaScript, SideMenu]
Permalink

当サイトで公開している「サイドメニューの折りたたみ」について、配布テンプレート（XHTML 1.0 Strict 版）のサイドバーに定義リスト（dl/dt/dd）を使用している場合のカスタマイズについてご質問を頂きましたので、本エントリーにて説明致します。

div 要素の場合の設定例

これまでの、div を使用した場合の設定（青色部分を追加）は下記の通りです。

<div class="sidetitle" 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>

MT4(またはMT3.x XHTML1.0 Strict 版)の設定例

カテゴリーリスト

ここではカテゴリーリストを例に挙げてますが、どのリストについても、script 要素を dd 要素で括ってください。これを行わないと valid な XHTML になりません。

また、script 要素はリストに示す通り、MTIfArchiveTypeEnabled の内側に設定してください。外側でも問題ありませんが、内側の方がより妥当です。

<MTIf name="module_category_archives">
<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle" id="categoryname">
Categories
</dt>
 
<dd class="side" id="categorylist">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>

アーカイブリスト

デフォルトテンプレートのサイドバーにあるアーカイブリストの構造（+定義リスト）を適用している場合、script 要素を dd 要素で括ることに加え、各アーカイブリスト（月別アーカイブリスト・月別カテゴリアーカイブリスト・ユーザーアーカイブリスト・月別ユーザーアーカイブリスト）の id 属性はすべて同じものを使用して構いません。これは各アーカイブ（またはメインページ）で表示されるリストがいずれかひとつであるためです。

<MTIf name="module_monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle" id="archivename">
Monthly Archives
</dt>
 
<dd class="side" id="archivelist">
<ul>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
</dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('archive','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
 
<MTIf name="module_category-monthly_archives">
   <MTIfArchiveTypeEnabled archive_type="Category-Monthly">
   <dt class="sidetitle" id="archivename"><$MTArchiveTitle$>: Monthly Archives</dt>
   <dd class="side" id="archivelist">
   <MTArchiveList archive_type="Category-Monthly">
      <MTArchiveListHeader>
      <ul>
      </MTArchiveListHeader>
         <li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
      <MTArchiveListFooter>
      </ul>
      </MTArchiveListFooter>
   </MTArchiveList>
   </dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('archive','on',true);
//-->
</script>
</dd>
   </MTIfArchiveTypeEnabled>
</MTIf>
 
<MTIf name="module_author-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Author-Monthly">
   <dt class="sidetitle" id="archivename"><$MTAuthorDisplayName$>: Monthly Archives</dt>
   <dd class="side" id="archivelist">
   <MTArchiveList archive_type="Author-Monthly">
      <MTArchiveListHeader>
      <ul>
      </MTArchiveListHeader>
         <li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
      <MTArchiveListFooter>
      </ul>
      </MTArchiveListFooter>
   </MTArchiveList>
   </dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('archive','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
 
<MTIf name="module_author_archives">
<MTIfArchiveTypeEnabled archive_type="Author">
   <dt class="sidetitle" id="archivename">Author Archives</dt>
   <dd class="side" id="archivelist">
   <MTArchiveList archive_type="Author">
      <MTArchiveListHeader>
      <ul>
      </MTArchiveListHeader>
         <li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
      <MTArchiveListFooter>
      </ul>
      </MTArchiveListFooter>
   </MTArchiveList>
   </dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('archive','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>