アーカイブの簡易ツリーメニュー化

JavaScriptは、階層式のツリーメニューのコードに同じ。
開閉状態に合わせてモード(3角の矢印の向き)を切り替え。


ヘッダ情報(<head> 〜 </head>の間)に、
以下のスクリプトを追記。

<script Language="JavaScript"><!--
//open or close
function extblock(trname){
var trmenu = document.getElementById(trname).style;
if(trmenu.display == 'none'){
trmenu.display = "block";
}else{
trmenu.display = "none";
}
}
//mode
function arrow(mdname){
var up = "▲";
var down = "▼";
var mode = document.getElementById(mdname);
if(mode.firstChild.nodeValue == down){
mode.firstChild.nodeValue = up;
//mode.innerHTML = up;
}else{
mode.firstChild.nodeValue = down;
//mode.innerHTML = down;
}
}
//--></script>


さらに、bodyタグ内に、以下の内容を追記。
表示月数は、4行目の lastn="12" の、"12"の数字を書き換え。

<div class="tree">
<a href="Javascript:extblock('bn');arrow('down')" id="down">▼</a> Back Number<br />
<div id="bn" style="display:none">
<MTArchiveList archive_type="Monthly" lastn="12">
  ├<a href="<$MTArchiveLink$>" target="_blank"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a><br />
</MTArchiveList>
  └<a href="archives.php" target="_blank">a list of all articles (<$MTBlogEntryCount$>)</a><br />
</div>
</div>


ちなみに、サンプルは、以下のcssを、divタグに適用したもの。

.tree a {
	text-decoration: none;
	}

.tree a:link {
	color: #CC99FF;
	}

.tree a:visited {
	color: #CCCCFF;
	}

.tree a:active {
	color: #CCCCFF;
	}

.tree a:hover {
	color: #CCCCFF;
	}

.tree {
	color: #666666;
	font-family: Arial, Verdana, sans-serif;
	font-size: 10px;
	text-align: left;
	line-height: 150%;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 50px;
	margin-left: 50px;
	}