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

質問

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

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

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

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

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

回答No.2

Spur · ベストアンサー

表示の部分を画像にして、ロールオーバー処理をすれば実現できます。
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>

お礼

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

回答No.6

BlueRay

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

<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

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

'**********　ココから　**********
<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で作ろうかと模索中です。

回答No.4

lmeelm

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

お礼

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

回答No.3

noname#102878

ここはどうでしょうか？
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のように、
縦メニューで横に展開していくと、どうしても、左のフレームに、
右半分余白ができてしまうので、縦展開にしたいんです。

回答No.1

Spur

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

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
のサイトの左のメニューみたいなので、右ではなく下に展開したいんです。
説明悪くてすいません。