カーソルのポイントでドロップダウンメニューを表示したい

0   名前： キズナ ： 2005/07/19 21:58
希望は題名の通りなのですが、イメージは
http://www.condo.fromc.jp/flash/memo/DropDown/Drop_swf01.htm
このページにあるようなものです。

ほかに例を挙げれば、
http://www.microsoft.com/japan/windows/default.mspx
このページの左側のメニューのような感じです。


これを、FlashではなくJavaScriptを使って表示したいのですが、可能でしょうか？
どなたか助言お願いしますm(__)m
1   名前： 元帥 ： 2005/07/19 21:58  ［URL］
このスレッドが参考になるかと。
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=46
2   名前： キズナ ： 2005/07/19 21:58  ［URL］
素早い対応ありがとうございます。

おかげで、大体の土台はできたのですが、少し気になる点があります。
それは、URLを見ていただけるとわかると思うのですが、ページを開いて最初の数秒間、
例のメニューが開きっぱなしになってしまい、レイアウトが崩れてしまいます。

わたしの理想としては、ページを開いた瞬間から、プルダウンメニューは閉じていて欲しいのですが・・・
JavaScriptの動作上回避できない問題なのでしょうか？

どなたか改善すべきところをご教授いただければと思います。
それでは、よろしくお願いします_(._.)_
3   名前： 元帥 ： 2005/07/19 21:58  ［URL］
> わたしの理想としては、ページを開いた瞬間から、プルダウンメニューは閉じていて欲しいのですが・・・
> JavaScriptの動作上回避できない問題なのでしょうか？

確かにそのようにする事も可能です。
ですが何故、Pidさんが敢えてこのようなコードにしたのかお考え下さい。

スクリプトOFFの環境下では、メニューが開かずに使い勝手の悪いページとなってしまいます。

4   名前： キズナ ： 2005/07/19 21:58  ［URL］
返信ありがとうございます。

こちらでは、スクリプトOFF環境の対策は考えてあります。
なので、もしよければ、その方法を教えてくれませんか？

お願いばかりで申し訳ないですが、よろしくお願いします(__)
5   名前： キズナ ： 2005/07/19 21:58  ［URL］
補足です。

改めて似たようなページで問題のページより軽いものを作り、試したところ、
「ページを開いて最初の数秒間、メニューが開きっぱなしになってしまう」現象が起きませんでした。
やはり、ページが重いため、JavaScriptの動作が遅れているため起きている現象かもしれません。

これを改善するには、ページを軽くするしかないのでしょうか？
もしよろしければ、ご教授願います。
6   名前： Pid ： 2005/07/19 21:58
>>4
> こちらでは、スクリプトOFF環境の対策は考えてあります。

具体的にはどのようにですか。それによって対処の仕方も違ってきます（noscript 要素などで別にメニューを用意するのであれば，ゼロから生成するタイプでも良いでしょう）。

> ページを開いて最初の数秒間、メニューが開きっぱなしになってしまう

あのスクリプトは，ページの読み込みが完了（画像を除く）してから実行されます。また，HTML を見ればお分かりのように，スクリプト実行前・非実行時はリストとして表示されます。なので，ページ読み込み完了までのタイムラグが大きいほど違和感を感じるかもしれません。

多階層が必要なら，以下の方法をお勧めします。

・http://www.wiredope.com/csstemp/?p_id=sample_dynamic_1
・http://inspire.server101.com/js/mb/
・http://kapu.iwoky.jp/rcug/popupmenu.htm
7   名前： 匿名 ： 2005/07/19 21:58
事前に有効なブラウザに対して
CSSスタイルシートがなければ
createStyleSheet する、
CSSスタイルシートがあれば、
addRule するか、insertRule する、
あってもなくても、
document.write すれば、まあ、間違い無い、
……たったこれだけのこと。
8   名前： キズナ ： 2005/07/19 21:58  ［URL］
返信ありがとうございます。

いろいろ試してやったところ、スクリプトOFF対策も兼ね、
タイムラグが気にならないプルダウンメニューに落ち着きました。
ですが、

<SCRIPT language="JavaScript">
<!--
document.write('
<ul id="menu1" class="menu"><li>
<a href="a.html" title="「零〜刺青の聲〜」攻略トップ">
<img src="image/menu1.jpg" border="0" name="img1"></a>
<ul><li><a href="a.html" title="攻略ガイダンス">
<img src="image/submenu6.jpg" border="0" name="img11"></a>
</li></ul></li></ul>');
//-->
</SCRIPT>
<noscript><a href=""><img src="image/menu1.jpg"></a></noscript>



document.writeの中に、
onMouseOver="On('img1')" onMouseOut="Off('img1')"
画像ポイント時の画像切り替えのスクリプトを加えることができません。
これを加えるとうまく動作しなくなります。
あと一歩で満足のいくものが出来るので、どうすればいいのか教えてください(__)


9   名前： Pid ： 2005/07/19 21:58
>>7
そうですね。実は私も手元のはそうしてあるんです (^^;)。>>1 のリンク先のは字数制限その他で色んな部分を削ぎ落とした（手抜きとも言う）んで，>>6 もしくは他の良いサンプルをお勧めしたいところです。

>>8
その onmouseover/out を a 要素か img 要素に付けてやれば良いのでは。ついでに，img 要素には alt 属性が必須です。
10   名前： キズナ ： 2005/07/19 21:58  ［URL］
a要素、img要素のどちらにも onmouseover/out を入れてみたのですが、入れた途端画像自体が表示されなくなります。

よくわからないのですが、document.writeの中にonmouseover/outは入れられないと言うことなのでしょうか？

その他ご忠告ありがとうございます。
このことに関しては調べてもよくわかりませんでした；
しつこいようですが、サポートくださればと思います(__)
11   名前： キズナ ： 2005/07/19 21:58  ［URL］
onMouseOver="On(\'img1\')" onMouseOut="Off(\'img1\')"

で解決できました。
サポートありがとうございました(__)
一覧へ戻る