Tree型メニュー

マイクロソフト(IEで行かないと駄目です) などにあるようなTree型のメニューを、IEだけ使えるのというのは悔しいので Netscapeでも同様に動くようにしてみました。
親アイテムを選択するとサブメニューが開いたり閉じたりします。
親メニュー1
  ・  SubItem 1
  ・  SubItem 2
  ・  SubItem 3
  ・  SubItem 4
  ・  SubItem 5
親メニュー2
  ・  SubItem 1
  ・  SubItem 2
  ・  SubItem 3
  ・  SubItem 4
親メニュー3
  ・  SubItem 1
  ・  SubItem 2
  ・  SubItem 3

スクリプト解説
#ソースを見ながら読むと多少は解りやすくなるかも
ポイントはHTMLのタグ<LAYER>がIEでは無視されるがNNでは うまく扱えるという部分でしょうか。ようはHTMLの部分からIE用とNN用の2つを 書いてしまっている訳です。
IEの動作に関してはJavaScriptでレイヤーのStyleを変更できることを生かして、
layer.style.display="yes"; (or none)
でサブメニューの表示・非表示を行っています。一方NNではそうはいかないので、サブメニューの 表示・非表示と同時にそれ以降のレイヤーのTopの位置を変更しています。
レイヤーの表示・非表示は
document.layers['LayerName'].visibility='hide';(or show)
で、Topの位置は、
document.layers['LayerName'].top=Number;
で変更します。 このメニューが開閉したらこれだけ移動という情報は、
LayerHeight = new Array(50,40,30)
に持たせてあるので、該当するサブメニューの高さ分を以降のレイヤーに足し引きしています。
サブメニューの高さを変更したい(項目を増やしたい)時にはこの値も変えてください。
id属性やname属性が多数有るのでわかりにくくなってますが動作自体は単純です。
メニュー部分を改造して使ってみてください。
ご質問等はこちらまでお気軽にどうぞ。
解説無しスクリプトはこちら。
Back To Index
Back To Home