ツリーメニューのサンプル
7カテゴリ×3アイテム。
開閉状態に合わせてモード(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タグ内に、以下の内容を追記。
<div>
<a href="Javascript:extblock('trmenu0');arrow('mode0')" id="mode0">▼</a> Related Links<br />
<div id="trmenu0" style="display:none">
├<a href="Javascript:extblock('trmenu1');arrow('mode1')" id="mode1">▼</a> category1<br />
<div id="trmenu1" style="display:none">
├<a href="http://www.movabletype.org/" target="_blank">movable type(en)</a><br />
├<a href="http://www.movabletype.jp/" target="_blank">movable type(ja)</a><br />
└<a href="http://www.movabletype.jp/developers/cheebow/" target="_blank">techknow weblog</a><br />
</div>
├<a href="Javascript:extblock('trmenu2');arrow('mode2')" id="mode2">▼</a> category2<br />
<div id="trmenu2" style="display:none">
├<a href="http://www.movabletype.org/" target="_blank">movable type(en)</a><br />
├<a href="http://www.movabletype.jp/" target="_blank">movable type(ja)</a><br />
└<a href="http://www.movabletype.jp/developers/cheebow/" target="_blank">techknow weblog</a><br />
</div>
├<a href="Javascript:extblock('trmenu3');arrow('mode3')" id="mode3">▼</a> category3<br />
<div id="trmenu3" style="display:none">
├<a href="http://www.movabletype.org/" target="_blank">movable type(en)</a><br />
├<a href="http://www.movabletype.jp/" target="_blank">movable type(ja)</a><br />
└<a href="http://www.movabletype.jp/developers/cheebow/" target="_blank">techknow weblog</a><br />
</div>
├<a href="Javascript:extblock('trmenu4');arrow('mode4')" id="mode4">▼</a> category4<br />
<div id="trmenu4" style="display:none">
├<a href="http://www.movabletype.org/" target="_blank">movable type(en)</a><br />
├<a href="http://www.movabletype.jp/" target="_blank">movable type(ja)</a><br />
└<a href="http://www.movabletype.jp/developers/cheebow/" target="_blank">techknow weblog</a><br />
</div>
├<a href="Javascript:extblock('trmenu5');arrow('mode5')" id="mode5">▼</a> category5<br />
<div id="trmenu5" style="display:none">
├<a href="http://www.movabletype.org/" target="_blank">movable type(en)</a><br />
├<a href="http://www.movabletype.jp/" target="_blank">movable type(ja)</a><br />
└<a href="http://www.movabletype.jp/developers/cheebow/" target="_blank">techknow weblog</a><br />
</div>
├<a href="Javascript:extblock('trmenu6');arrow('mode6')" id="mode6">▼</a> category6<br />
<div id="trmenu6" style="display:none">
├<a href="http://www.movabletype.org/" target="_blank">movable type(en)</a><br />
├<a href="http://www.movabletype.jp/" target="_blank">movable type(ja)</a><br />
└<a href="http://www.movabletype.jp/developers/cheebow/" target="_blank">techknow weblog</a><br />
</div>
└<a href="Javascript:extblock('trmenu7');arrow('mode7')" id="mode7">▼</a> category7<br />
<div id="trmenu7" style="display:none">
├<a href="http://www.movabletype.org/" target="_blank">movable type(en)</a><br />
├<a href="http://www.movabletype.jp/" target="_blank">movable type(ja)</a><br />
└<a href="http://www.movabletype.jp/developers/cheebow/" target="_blank">techknow weblog</a><br />
</div>
</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;
}