OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

プルダウンメニューの表示

  • 困ってます
  • 質問No.180128
  • 閲覧数215
  • ありがとう数1
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 71% (228/318)

+のgifをクリックすると-のgifと詳しい表示が出る様にHTMLを書いたのですが、
表示された後で閉じると、その+のgifが再表示されません。
何が足りなくてそうなってしまうのでしょうか?
また、親メニューの+が-になっている時、gifの-を表示させる方法を教えてやって下さい…。
よろしくお願いします。

<body bgcolor="#000000" text="#ffffff" link="#000000" alink="#808080" vlink="#ff0000">
<div id='div1' style="position:absolute; left:10; top:100; width:250;">
<a id="menu1" href="#" onClick="onmenu(this,'menu11');return false"
style="text-decoration:none;">
<img src="p.gif" alt="+" border="0"></a><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></div>
</body>
通報する
  • 回答数2
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.1
レベル5

ベストアンサー率 75% (3/4)

メインメニューをクリックする度にサブメニューの表示非表示が切り替わるということでしょうか?
書かれているソースだけでは原因が何であるかわかりませんが、
私が以前似たようなものを作った時は次のようにしました。

+の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>
お礼コメント
RYOKUYA

お礼率 71% (228/318)

有り難うございます!動作確認しました所、たしかに希望通り表示されました。
スクリプトの定義が足りなかった様です。
それで、重ねてお願いなのですが、これの下に別の親メニューとサブメニューを増やしたい
のですが、増やし方をお教え願えますでしょうか?
本を片手にいじってみたのですが、親が増やせてもサブが表示されなかったりして
どうしても上手く行きません(T_T)。
どうかよろしくお願いいたします…。
投稿日時 - 2001-12-08 13:18:01
-PR-
-PR-

その他の回答 (全1件)

  • 回答No.2
レベル5

ベストアンサー率 75% (3/4)

1番上のメニューを親メニュー。 2番目、3番目をそれぞれ子メニュー、孫メニューとして説明します。 子メニューと孫メニューのレイヤーをネストして(子孫レイヤー)、 親メニューのクリックで子孫レイヤーを表示できるようにすれば良いと思います。 さらに子孫レイヤー内でも子メニューのクリックで孫メニューレイヤーを表示するようにします。 下のサンプルを実行してもらえばわかると思いますが、 子メニュ ...続きを読む
1番上のメニューを親メニュー。
2番目、3番目をそれぞれ子メニュー、孫メニューとして説明します。

子メニューと孫メニューのレイヤーをネストして(子孫レイヤー)、
親メニューのクリックで子孫レイヤーを表示できるようにすれば良いと思います。
さらに子孫レイヤー内でも子メニューのクリックで孫メニューレイヤーを表示するようにします。

下のサンプルを実行してもらえばわかると思いますが、
子メニューが複数ある場合、孫メニューを表示した時に、他の子メニューと重なって表示されないように他の子メニューレイヤーを移動しなければなりません。
少しややこしいですが、子メニューをクリックした時点で孫メニューレイヤーの表示非表示を判定すると同時に孫メニューレイヤーの高さを求めます。(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>


このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ