JavaScript 折りたたみ式のメニュー

質問

こんにちは。

Javascriptのメニューなのですが
おおまかなイメージとしては↓のサイトのような感じですhttp://www.pat.hi-ho.ne.jp/oka_tosho/tree17/tree17.htm
※スクロールについてくる動きは必要ないです

・縦方向にメニューの大項目があって
・マウスオーバーによって小項目が出てくる
・小項目は大項目の横にではなく、下に出る

上記のような動きをつけたいのですが
縦にメニューが展開されていくタイプだと
クリックで動くものしか発見できず
マウスオーバーで動くタイプは、大項目の
右側に小項目が出てきて、大項目自体は動かない
ものしか発見できませんでした。

この動きが出来るのかどうかもわからないんですが
サンプルサイトなどご存知の方がいらっしゃったら
教えていただきたいのですが。

それと、こうゆう動きをするメニューの名前は何になりますか？
ネットでスクリプトのサンプルを探そうと思っんですが私が名前をよくわかっていなくてうまく検索できませんでした。
私の中では折りたたみ式のメニューと思っていたのですが、他の一般的な呼び名を教えていただけますか？

回答No.1

karumakaruma · ベストアンサー

とりあえず、単純なものであれば

ヘッダー部に
<script language="JavaScript">
<!--
function change(Name){
tMenu=(document.all)?document.all(Name).style:document.getElementById(Name).style;
if(tMenu.display == "none" ){
tMenu.display = "block";
} else {
tMenu.display = "none";
}
}
//-->
</script>

ボディー部に
<TABLE>
<TR>
<TD VALIGN=TOP onMouseOver="change('aaa')" onMouseOut="change('aaa')">
aaa
</TD>
</TR>
<TR>
<TD id="aaa" style="display:none" onMouseOver="change('aaa')" onMouseOut="change('aaa')">
<A HREF="#">ああああ</A><BR>
<A HREF="#">いいいい</A><BR>
<A HREF="#">うううう</A><BR>
<A HREF="#">ええええ</A><BR>
<A HREF="#">おおおお</A>
</TD>
</TR>
<TR>
<TD VALIGN=TOP onMouseOver="change('bbb')" onMouseOut="change('bbb')">
bbb
</TD>
</TR>
<TR>
<TD id="bbb" style="display:none" onMouseOver="change('bbb')" onMouseOut="change('bbb')">
<A HREF="#">ＡＡＡＡ</A><BR>
<A HREF="#">ＢＢＢＢ</A><BR>
<A HREF="#">ＣＣＣＣ</A><BR>
<A HREF="#">ＤＤＤＤ</A><BR>
<A HREF="#">ＥＥＥＥ</A>
</TD>
</TR>
</TABLE>

という感じにすれば出来るのですが
メニューの折り畳むタイミングをどうするかという
課題が残ります。

というのは、右に展開するタイプだと大項目の位置が
固定なので、マウスを重ねるのが簡単なんですが
下に展開するタイプだと展開される毎に大項目の位置が
動くので、連続で大項目を展開させようとすると
非常に難しくなります。
＃展開したものを展開したままにするなら問題ないですが
＃折り畳まないと展開する意味はないですよね？

という事で、縦に展開しようとするとどうしても
マウスを重ねた時という条件では難しくて、
展開と折り畳みのタイミングをクリックなどで
固定しないといけなくなります。

お礼

早速アドバイスありがとうございます

座標を取るのが難しいから無理かなとは
思っていたのですが、私の知識が少ないので
実際は出来たりするのかなと思っていたので
とても助かりました！
クリックで動かすようにしようと思います

ありがとうございました