ツリー型メニューについて

社内のシステムのマニュアルをhtmlで作ることになりました。
左右２つのフレームにわけて左200ピクセルをメニューにしました。
メニューがこまかく、多くなりそうなので、ツリー型（クリックしなくても、
マウスを乗せるだけで展開するもの）にしようと思ったのですが、
展開した２段目のメニューが、フレームで切られて見えません（T_T)
●●●●にマウスを乗せると・・・

●●●●┳page1
▽▽▽▽┣page2
■■■■┣page3
　　　　┗page4
↑この辺に、ボーダーがきてしまいます。

あまりメニュー幅を広くしたくないので、

●●●●
▽┣page1
■┣page2
　┣page3
　┗page4

こんな風に、すぐ下に展開させたいのですが、どうしたらいいでしょうか？
よろしくご指導お願いします。

No.2 ベストアンサー 回答者： Spur 回答日時： 2002/07/07 00:04

表示の部分を画像にして、ロールオーバー処理をすれば実現できます。

Scriptはここには書けないくらい長くなりますが、簡単に書けば次のような感じです。

<SCRIPT LANGUAGE="JavaScript">
<!--
var toppath="http://www.xxxx.xx.jp/xxxxxx";
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</SCRIPT>

これをヘッダー部分に用意し、あとは、「pege1」などのメニュー部分を、テーブルにして↓こんな感じで作ります。
<TD WIDTH="3%"><A HREF="page1.htm"><IMG BORDER="0" SRC="images/btn_1.gif" name="page1" id="pege1" onMouseOver="showMenu(event)" onMouseOut="hideMenu(event)"></A></TD>
<TD WIDTH="3%"><A HREF="page2.htm"><IMG BORDER="0" SRC="images/btn_2.gif" name="page2" id="pege2" onMouseOver="showMenu(event)" onMouseOut="hideMenu(event)"></A></TD>
<TD WIDTH="3%"><A HREF="page3.htm"><IMG BORDER="0" SRC="images/btn_3.gif" name="page3" id="pege3" onMouseOver="showMenu(event)" onMouseOut="hideMenu(event)"></A></TD>
<TD WIDTH="3%"><A HREF="pege4.htm"><IMG BORDER="0" SRC="images/btn_4.gif" name="page4" id="pege4" onMouseOver="showMenu(event)" onMouseOut="hideMenu(event)"></A></TD>

この回答へのお礼

ありがとうございます。
なるほど、画像で処理ですか・・・。
でも、そうすると、メニューの追加とかあったら大変ですね。
できれば、文字だけでしたいのですが・・・。

お礼日時：2002/07/07 10:08

No.6 回答者： BlueRay 回答日時： 2002/07/09 12:40

>ある程度修正は必要ですが・・・

とは、このことだったんですが・・・では、これで如何でしょうか。
あと選択時の表示非表示の状態保持は考えてみてください。


<script language="javascript">
<!--
function changeVis(obj, visible, block)
{
document.all(obj).style.visibility=(visible?"visible":"hidden")
document.all(obj).style.display=(block?"block":"none")
}
//-->
</script>

<DIV><A href="#" onMouseMove="changeVis('tre1', true, true)" onMouseOut="changeVis('tre1', false, false)">メニュー1</A></DIV>
<DIV id="tre1" STYLE='visibility:hidden;display:none'>
├ <A href="#">コンテンツ1</A><BR>
├ <A href="#">コンテンツ2</A><BR>
├ <A href="#">コンテンツ3</A><BR>
└ <A href="#">コンテンツ4</A>
</DIV>

<DIV><A href="#" onMouseMove="changeVis('tre2', true, true)" onMouseOut="changeVis('tre2', false, false)">メニュー2</A></DIV>
<DIV id="tre2" STYLE='visibility:hidden;display:none'>
├ <A href="#">コンテンツ1</A><BR>
├ <A href="#">コンテンツ2</A><BR>
├ <A href="#">コンテンツ3</A><BR>
└ <A href="#">コンテンツ4</A>
</DIV>

No.5 回答者： BlueRay 回答日時： 2002/07/08 13:45

参考程度なので、ある程度修正は必要ですがこのような感じのものですか？

'**********　ココから　**********
<script language="javascript">
<!--
function changeVis(obj, visible)
{
document.all(obj).style.visibility=(visible?"visible":"hidden")
}
//-->
</script>

<A href="#" onMouseMove="changeVis('tre1', true)" onMouseOut="changeVis('tre1', false)">メニュー1</A>
<DIV id="tre1" STYLE='visibility:hidden'>
├ <A href="#">コンテンツ1</A><BR>
├ <A href="#">コンテンツ2</A><BR>
├ <A href="#">コンテンツ3</A><BR>
└ <A href="#">コンテンツ4</A>
</DIV>

<A href="#" onMouseMove="changeVis('tre2', true)" onMouseOut="changeVis('tre2', false)">メニュー2</A>
<DIV id="tre2" STYLE='visibility:hidden'>
├ <A href="#">コンテンツ1</A><BR>
├ <A href="#">コンテンツ2</A><BR>
├ <A href="#">コンテンツ3</A><BR>
└ <A href="#">コンテンツ4</A>
</DIV>
'**********　ココまで　**********

この回答へのお礼

ありがとうございます。
試してみたのですが、メニュー１とメニュー２の間に隙間が・・・できますね。これは、改造で直るのでしょうか？
javaが無理なら、Flashで作ろうかと模索中です。

お礼日時：2002/07/08 22:02

No.4 回答者： lmeelm 回答日時： 2002/07/07 10:30

IE5.5以上限定ですが、スクリプトを使用せずにおっしゃっておられるようなことができます。

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>ツリー式メニュー</TITLE>
<STYLE type="text/css">
.time{behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>

<A id="b1a" class="time" begin="0;b1b.click" end="b1a.click" timeaction="display">メニュー1</A>
<A id="b1b" class="time" begin="b1a.click" end="b1b.click" timeaction="display">メニュー1</A>
<DIV id="d1" class="time" begin="b1a.click" end="b1b.click" timeaction="display">
├ <A href="#">コンテンツ1</A><BR>
├ <A href="#">コンテンツ2</A><BR>
├ <A href="#">コンテンツ3</A><BR>
└ <A href="#">コンテンツ4</A>
</DIV>

<A id="b2a" class="time" begin="0;b2b.click" end="b2a.click" timeaction="display">メニュー2</A>
<A id="b2b" class="time" begin="b2a.click" end="b2b.click" timeaction="display">メニュー2</A>
<DIV id="d2" class="time" begin="b2a.click" end="b2b.click" timeaction="display">
├ <A href="#">コンテンツ1</A><BR>
├ <A href="#">コンテンツ2</A><BR>
├ <A href="#">コンテンツ3</A><BR>
└ <A href="#">コンテンツ4</A>
</DIV>

<A id="b3a" class="time" begin="0;b3b.click" end="b3a.click" timeaction="display">メニュー3</A>
<A id="b3b" class="time" begin="b3a.click" end="b3b.click" timeaction="display">メニュー3</A>
<DIV id="d3" class="time" begin="b3a.click" end="b3b.click" timeaction="display">
├ <A href="#">コンテンツ1</A><BR>
├ <A href="#">コンテンツ2</A><BR>
├ <A href="#">コンテンツ3</A><BR>
└ <A href="#">コンテンツ4</A>
</DIV>

<A id="b4a" class="time" begin="0;b4b.click" end="b4a.click" timeaction="display">メニュー4</A>
<IMG id="b4b" class="time" begin="b4a.click" end="b4b.click" timeaction="display">メニュー4</A>
<DIV id="d4" class="time" begin="b4a.click" end="b4b.click" timeaction="display">
├ <A href="#">コンテンツ1</A><BR>
├ <A href="#">コンテンツ2</A><BR>
├ <A href="#">コンテンツ3</A><BR>
└ <A href="#">コンテンツ4</A>
</DIV>

</BODY>
</HTML>

参考URL：http://ad.il24.net/~ura/time/tree_menu_source.htm

この回答へのお礼

ありがとうございます。
すいませんが、クリックせずにマウスオーバーで
展開するものをさがしています。

お礼日時：2002/07/07 11:27

No.3 回答者： noname#102878 回答日時： 2002/07/07 02:01

ここはどうでしょうか？

http://www5.justnet.ne.jp/~woka/hr_menu4v.htm

参考URL：http://www5.justnet.ne.jp/~woka/hr_menu4v.htm

この回答へのお礼

ありがとうございます。
こういうのをはじめ使ってたのですが、
http://www5.justnet.ne.jp/~woka/fr-hr4v.htmのように、
縦メニューで横に展開していくと、どうしても、左のフレームに、
右半分余白ができてしまうので、縦展開にしたいんです。

お礼日時：2002/07/07 10:21

No.1 回答者： Spur 回答日時： 2002/07/06 23:22

その通りに書くだけだと思いますけど？

document.write("<table border=0>\n");
document.write("<tr><td>●●●●</td></tr>\n");
document.write("<tr><td>▽┣page1</td></tr>\n");
document.write("<tr><td>■┣page2</td></tr>\n");
document.write("<tr><td>　┣page3</td></tr>\n");
document.write("<tr><td>　┣page4</td></tr>\n");
document.write("</table>\n");

この回答へのお礼

えーと・・・、●●●●にマウスを乗せてはじめてpege1-page4の
メニューが出てくるようにしたいので、テーブルではないんです。
http://www.microsoft.com/japan/default.asp
のサイトの左のメニューみたいなので、右ではなく下に展開したいんです。
説明悪くてすいません。

お礼日時：2002/07/06 23:35