法則71 月別アーカイブのナビゲーションを折りたたんですっきり見せる

月別アーカイブをツリー表示にするテンプレートソース【1】

<dl class="archivesList">
<dt>archives</dt>
<dd>
<ol>
<MTArchiveList archive_type="Yearly"><li class="yearlyList">
<$MTArchiveTitle$>
<ol>
<MTArchiveList archive_type="Monthly"><li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList></ol>
</li>
</MTArchiveList></ol>
</dd>
</dl>

月別メニューを開閉するJavaScriptソース【2】

$(document).ready(function() {
    $(".yearlyList ol").css("display","none");
    $(".yearlyList").click(function(){
        $(this).children().slideToggle("slow");
    });
});

JavaScriptを読み込む（X）HTMLソース【3】

<script src="http://example.com/js/jquery.js" type="text/javascript"></script>
<script src="http://example.com/js/fold.js" type="text/javascript"></script>

CSSソース【4】

#sub .yearlyList {
    cursor: pointer;
    color: #03C;
}
#sub .yearlyList ol {
    color: #000;
}

ダウンロード

Downloading jQuery ： jQuery JavaScript Library

• 第4章 Webサイトの価値を高めるデザインの法則