アプリ版：「スタンプのみでお礼する」機能のリリースについて

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

解決済

  • 質問者：RYOKUYA
  • 質問日時：
  • 回答数：2件

+の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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： puri2
  • 回答日時：

メインメニューをクリックする度にサブメニューの表示非表示が切り替わるということでしょうか？


書かれているソースだけでは原因が何であるかわかりませんが、
私が以前似たようなものを作った時は次のようにしました。

+の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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2001/12/08 13:18

No.2

  • 回答者： puri2
  • 回答日時：

１番上のメニューを親メニュー。


２番目、３番目をそれぞれ子メニュー、孫メニューとして説明します。

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

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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報