制作Tipstutorials & tips

サイドメバーでカテゴリ別メニューをツリー化する

サイドメニューによくある、カテゴリ別メニューをツリー化する方法でちょっと手間取ったので、メモ。
最終的にやりたいことは、サブカテゴリがある場合は、トップレベルカテゴリをクリックするとサブカテゴリリストがするするっとプルダウンされ、そこをクリックするとサブカテゴリのアーカイブページへとび、サブカテゴリがない場合は、トップレベルカテゴリをクリックするとカテゴリアーカイブページへとぶ、というもの。

通常トップレベル(=最上位)のカテゴリのみを表示させるのは簡単。

<ul>
<mt:TopLevelCategories>
<li><a href="<$mt:CategoryArchiveLink$>"><mt:CategoryLabel></a></li>
</mt:TopLevelCategories>
</ul>

こうすると、最上位のカテゴリ名だけを表示したものがリスト化されます。

˫カテゴリ1
˫カテゴリ2
˫カテゴリ3


ここでやりたいのは、最上位カテゴリにサブカテゴリがぶらさがっているパターン。もちろんすべての最上位カテゴリにサブカテゴリがついてたら<mt:TopLevelCategories>の内側に<mt:SubCategories>を入れ子にすればOK。

<ul>
<mt:TopLevelCategories>
<li><a href="<$mt:CategoryArchiveLink$>"><mt:CategoryLabel></a>
<ul><mt:SubCategories>
<li><a href="<$mt:CategoryArchiveLink$>"><mt:CategoryLabel></a></li></mt:SubCategories></ul></li>
</mt:TopLevelCategories>
</ul>

˫カテゴリ1
    ˫サブカテゴリ1-1
    ˫サブカテゴリ1-2
˫カテゴリ2
    ˫サブカテゴリ2-1
˫カテゴリ3
    ˫サブカテゴリ3-1
    ˫サブカテゴリ3-2



ここでは、サブカテゴリがついてる最上位カテゴリもあれば、ついてない最上位カテゴリもあるのが、少しややこしかったけど、<mt:HasSubCategories>と、<mt:HasNoSubCategories>を駆使してできました。

<ul>
<mt:TopLevelCategories>

  <mt:HasSubCategories>
    <li><$mt:CategoryLabel$>
     <ul><mtSubCategories>
         <li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></li><$mt:SubCatsRecurse$>
     </mtSubCategories></ul></li>
  </mt:HasSubCategories>

  <mt:HasNoSubCategories>
    <li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></li>
  </mt:HasNoSubCategories>

</mt:TopLevelCategories>
</ul>


あとは、jQueryで開閉パネルを読み込めばOKです。

<script type="text/javascript">
$(document).ready(function(){
$("ul").hide();
$("li").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});

});
</script>


上部へ