グループ化メニュー

　アーカイブナビゲータで使われている、似たもの同士をグループ化するためのメニュースクリプトです。

必要なスタイルシート

<style type="text/css"><!--
#gm dd{margin-left: 2em}
#gm dd span{position: relative; top: 1px; margin-left: 1em; color: #B0B0B0; font-family: monospace; cursor: default}
#gm dd span.sign{left: 1em; margin-left: 0em; z-index: 1; cursor: pointer}
#gm dd span.box{margin-left: 0em; z-index: 0}
--></style>

メニューの記述例

<dl id="gm">
<dt>Nurucom Archivesのアーカイブ：
<dd class="h">Ａのアーカイブ	<!-- 見出しは class="h" -->
<dd class="e">同上		<!-- 上記と同じときは class="e" -->
<dd class="h">Ｂのアーカイブ
<dd class="e">同上i
<dd class="e">同上ii
<dd>Ｃのアーカイブ		<!-- class を設定しなければ記号は表示されない -->
<dd class="h">Ｄのアーカイブ
<dd class="e">同上1
<dd class="e">同上2
<dd class="e">同上3
<dd class="e">同上4
</dl>

スクリプト本体

<script type="text/javascript"><!--

function GroupMenu(){

    var gm=document.getElementById("gm");

    if(gm){

        var dds=gm.getElementsByTagName("dd");

        var createNode=new Function("str",'var span=document.createElement("span");span.appendChild(document.createTextNode(str));return span');

        var box=createNode("□");box.className="box";

        var minus=createNode("－");minus.className="sign";

        var plus=createNode("＋");plus.className="sign";

        var up=createNode("↑");

        var sp=createNode("　");

        for(var i=0;i<dds.length;i++){

            var dd=dds.item(i);dd.style.marginLeft="0em";

            if("h"==dd.className){

                dd.insertBefore(box.cloneNode(1),dd.firstChild);

                dd.insertBefore(plus.cloneNode(1),dd.firstChild);

                dd.firstChild.onclick=new Function('var obs="this.parentNode.nextSibling";while(eval(obs)&&"e"==eval(obs).className){if("block"==eval(obs).style.display){eval(obs).style.display="none";this.replaceChild(document.createTextNode("＋"),this.firstChild)}else{eval(obs).style.display="block";this.replaceChild(document.createTextNode("－"),this.firstChild)}obs+=".nextSibling"}');

            }else if("e"==dd.className){

                dd.style.display="none";

                dd.insertBefore(up.cloneNode(1),dd.firstChild);

            }else{

                dd.insertBefore(sp.cloneNode(1),dd.firstChild);

            }

        }

    }

}

if(document.getElementById)GroupMenu();

//-->

</script>

実行結果：

Nurucom Archivesのアーカイブ：: Ａのアーカイブ; 同上; Ｂのアーカイブ; 同上i; 同上ii; Ｃのアーカイブ; Ｄのアーカイブ; 同上1; 同上2; 同上3; 同上4