- ベストアンサー
プルダウンメニューの表示に関する問題
- プルダウンメニューの表示後、閉じた際に+のgifが再表示されない問題について
- 親メニューの+が-になっている場合にgifの-を表示させる方法について
- HTMLで+のgifをクリックして-のgifと詳細表示が出る仕組みを作成した際の問題点
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
メインメニューをクリックする度にサブメニューの表示非表示が切り替わるということでしょうか？ 書かれているソースだけでは原因が何であるかわかりませんが、 私が以前似たようなものを作った時は次のようにしました。 +のgifがクリックされた時点で、id="menu11"の状態（visibleかhiddenか）を判定して命令を分岐します。 id="menu11"がvisibleならhiddenに、hiddenならvisibleに。 ↓参考になれば良いのですが。（Netscape6では使えませんでした。） -------------------------------------------------------------------- <HTML> <HEAD> <TITLE>サブメニュー表示非表示</TITLE> <SCRIPT language="JavaScript"> <!-- function onmenu(){ //IE用 if(document.all){ if(document.all['menu11'].style.visibility == 'hidden'){ //サブメニュー非表示の場合 document.all['menu11'].style.visibility = 'visible' //サブメニューを表示 } else{ //サブメニュー表示中 document.all['menu11'].style.visibility = 'hidden' //サブメニューを非表示 } } //NN用 if(document.layers){ if(document.layers['menu11'].visibility == 'hide'){ //サブメニュー非表示の場合 document.layers['menu11'].visibility = 'show' //サブメニューを表示 } else{ //サブメニュー表示中 document.layers['menu11'].visibility = 'hide' //サブメニューを非表示 } } } // --> </SCRIPT> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <DIV id="div1" style="position:absolute; left:10; top:100; width:250; visibility: visible> <A href="javascript:void(0);" onClick="onmenu()"><IMG src="p.gif" alt="+" border="0"><FONT size="+2">BBS</FONT> <DIV id="menu11" style="position:absolute; left:-2; top:16; visibility: hidden"> ├<A href="http://..." target="_top" style="text-decoration:none;"> <IMG src="m.gif" alt="-" border="0"></A> aBBS<BR> ├<A href="http://..." target="_top" style="text-decoration:none;"> <IMG src="m.gif" alt="-" border="0"></A> bBBS<BR> └<A href="http://..." target="_top" style="text-decoration:none;"> <IMG src="m.gif" alt="-" border="0"></A> cBBS </DIV></DIV> </BODY> </HTML>
その他の回答 (1)
- puri2
- ベストアンサー率75% (3/4)
１番上のメニューを親メニュー。 ２番目、３番目をそれぞれ子メニュー、孫メニューとして説明します。 子メニューと孫メニューのレイヤーをネストして（子孫レイヤー）、 親メニューのクリックで子孫レイヤーを表示できるようにすれば良いと思います。 さらに子孫レイヤー内でも子メニューのクリックで孫メニューレイヤーを表示するようにします。 下のサンプルを実行してもらえばわかると思いますが、 子メニューが複数ある場合、孫メニューを表示した時に、他の子メニューと重なって表示されないように他の子メニューレイヤーを移動しなければなりません。 少しややこしいですが、子メニューをクリックした時点で孫メニューレイヤーの表示非表示を判定すると同時に孫メニューレイヤーの高さを求めます。（offsetHeightを使用） ここで求めた孫メニューレイヤーの高さ分だけ、下段にある子メニューレイヤーを下方向に移動させます。 子メニューをもう一度クリックすると、今度は逆方向に移動します。 また、孫メニュー表示中に、親メニューをクリックしても子メニューが非表示にならないように変数xyzの値で孫メニューの表示非表示を判定します。 孫メニューがひとつ表示されるとxyzに+1、非表示にされると-1の値を送るようにします。 xyzの値が0の時は孫メニューがすべて非表示の状態なので、その時だけ親メニューのクリックで子メニューを非表示にできます。 親メニューが複数ある場合も、これまでの応用で他のレイヤーを移動させれば良いです。 WindowsのIE5.5でしか動作確認していません。 Netscape用のスクリプトは省略しています。 <HTML> <HEAD> <TITLE>サブメニュー表示非表示</TITLE> <SCRIPT language="JavaScript"> <!-- var xyz = 0; //孫メニューの表示状態を判定 function showmenu(komenu_num,ppp){ //孫メニューの表示切替 a = komenu_num + '1'; y_position = document.all['menu'+a].offsetHeight; //孫メニューの高さを求める //IE用 if(document.all){ if(document.all['menu'+a].style.visibility == 'hidden'){ //孫メニュー非表示の場合 document.all['menu'+a].style.visibility = 'visible' //孫メニューを表示 xyz = xyz+1; for(n=1;n<=ppp;n++){ otMenuNo = komenu_num+n; document.all['menu'+otMenuNo].style.posTop += y_position //下段の子メニューの移動 } } else{ //孫メニュー表示中 document.all['menu'+a].style.visibility = 'hidden' //孫メニューを非表示 xyz = xyz-1; for(n=1;n<=ppp;n++){ otMenuNo = komenu_num+n; document.all['menu'+otMenuNo].style.posTop -= y_position //下段の子メニューの移動 } } } } function onmenu(submenu_num){ //子メニューの表示切替 //IE用 if(document.all){ if(document.all['menu11'].style.visibility == 'visible'){ //子メニュー表示中の場合 if(xyz == 0){ //孫メニュー非表示の場合 for(i=1;i<=submenu_num;i++){ document.all['menu1'+i].style.visibility = 'hidden' //子メニューを非表示 } } else{ for(i=1;i<=submenu_num;i++){ document.all['menu1'+i].style.visibility = 'visible' //子メニューを表示のまま } } } else{ //子メニュー非表示の場合 for(i=1;i<=submenu_num;i++){ document.all['menu1'+i].style.visibility = 'visible' //子メニューを表示 } } } } // --> </SCRIPT> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <DIV id="div1" style="position:absolute; left:10; top:10; width:250; visibility: visible> <A href="javascript:void(0);" onClick="onmenu(3)"><FONT size="+2">BBS</FONT> </DIV> <DIV id="menu11" style="position:absolute; left:2px; top:35px; width:250; visibility: hidden"> <A href="javascript:void(0);" onClick="showmenu(11,2)">+子メニュー</A> <DIV id="menu111" style="position:absolute; left:5px; top:20px; visibility: hidden"> <A href="javascript:void(0);">++孫メニュー</A><BR> <A href="javascript:void(0);">++孫メニュー</A> </DIV> </DIV> <DIV id="menu12" style="position:absolute; left:2px; top:60px; width:250; visibility: hidden"> <A href="javascript:void(0);" onClick="showmenu(12,1)">+子メニュー</A> <DIV id="menu121" style="position:absolute; left:5px; top:20px; visibility: hidden"> <A href="javascript:void(0);">++孫メニュー</A><BR> <A href="javascript:void(0);">++孫メニュー</A><BR> <A href="javascript:void(0);">++孫メニュー</A> </DIV> </DIV> <DIV id="menu13" style="position:absolute; left:2px; top:85px; width:250; visibility: hidden"> <A href="javascript:void(0);" onClick="showmenu(13,0)">+子メニュー</A> <DIV id="menu131" style="position:absolute; left:5px; top:20px; visibility: hidden"> <A href="javascript:void(0);">++孫メニュー</A> </DIV> </DIV> </BODY> </HTML>
お礼
有り難うございます！動作確認しました所、たしかに希望通り表示されました。 スクリプトの定義が足りなかった様です。 それで、重ねてお願いなのですが、これの下に別の親メニューとサブメニューを増やしたい のですが、増やし方をお教え願えますでしょうか？ 本を片手にいじってみたのですが、親が増やせてもサブが表示されなかったりして どうしても上手く行きません(T_T)。 どうかよろしくお願いいたします…。