掲示板/JavaScript質問板/過去ログ/一覧/ 自作プルダウンメニューについて

0 名前： ザック ： 2005/08/03 16:57: JavaScriptでプルダウンメニュー作成時の質問お願いします。

- 実現させたい事
・メインメニューをマウスオーバーするとメインメニュー色が変わり、サブエメニューを表示させたい。サブメニューからマウスを離すとサブメニューを消したい。

- 困っている事
・メインメニュー9個までは問題なく表示されますが、10以上になると表示されません。この方法だと、メニュー数が二桁になってしまうと効果がなくなるのでしょうか？
・サブのボタンからマウスが離れるとメニューが消えない。（どういうやり方がいいのか教えて下さい。）

- ソース解説
・メインメニューとサブメニューは<div>で作成しています。
・id="main0"～id="main10"とid="sub0"～id="sub10"があります。
・上のid をjavascriptで以下のように処理をしています。

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

- 現在の実際のソースは追加コメントに書きます。

1 名前： ザック ： 2005/08/03 16:57: ザックです。ソース前半です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>レイアウト01</title>
<STYLE TYPE="text/css">

</STYLE>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</head>

2 名前： ザック ： 2005/08/03 16:57: 

<body>
<div class="waku">

<div id="header"><table width="100%" height="100%"><tr><td valign="middle" align="center">ヘッダー</td></tr></table>
</div>



<div id="gamen" class="display">
<table width="100%" height="100%"><tr><td valign="middle" align="center">画面</td></tr></table>
</div>



<div id="menu" class="menu">
<table width="100%" height="100%">
<tr>
<td valign="top" align="center">
<table border="0">
<tr>
<td valign="middle">

3 名前： ザック ： 2005/08/03 16:57: 

<div id="main0" class="menu_button" style="background-color:#f0f0f0;" onMouseover="subVH(11,0)">1 id="main0" </div>
<div id="main1" class="menu_button" style="background-color:#f0f0f0;" onMouseover="subVH(11,1)">2 id="main1" </div>
<div id="main2" class="menu_button" style="background-color:#f0f0f0;" onMouseover="subVH(11,2)">3 id="main2" </div>
<div id="main3" class="menu_button" style="background-color:#f0f0f0;" onMouseover="subVH(11,3)">4 id="main3" </div>
<div id="main4" class="menu_button" style="background-color:#f0f0f0;" onMouseover="subVH(11,4)">5 id="main4" </div>
<div id="main5" class="menu_button" style="background-color:#f0f0f0;" onMouseover="subVH(11,5)">6 id=main5" </div>
<div id="main6" class="menu_button" style="background-color:#f0f0f0;" onMouseover="subVH(11,6)">7 id="main6" </div>
<div id="main7" class="menu_button" style="background-color:#f0f0f0;" onMouseover="subVH(11,7)">8 id="main7" </div>
<div id="main8" class="menu_button" style="background-color:#f0f0f0;" onMouseover="subVH(11,8)">9 id="main8" </div>
<div id="main9" class="menu_button" style="background-color:#f0f0f0;" onMouseover="subVH(11,9)">10 id="main9" </div>
<div id="main10" class="menu_button" style="background-color:#f0f0f0;" onMouseover="subVH(11,10)">11 id="main10" </div>

</td>
</tr>
</table>
　　</td>
</tr>
</table>
</div>



<div id="sub0" class="menu_sub" style="display:none; position:absolute; top:; left:;left: 225px; top: 60px;">
<table><tr><td></td></tr></table></div>

4 名前： ザック ： 2005/08/03 16:57: 


<div id="sub1" class="menu_sub" style="display:none; position:absolute; top:; left:;left: 225px; top: 80px;">
<table><tr><td></td></tr></table></div>



<div id="sub2" class="menu_sub" style="display:none; position:absolute; top:; left:;left: 225px; top: 103px;">
<table><tr><td></td></tr></table></div>



<div id="sub3" class="menu_sub" style="display:none; position:absolute; top:; left:;left: 225px; top: 125px;">
<table><tr><td></td></tr></table></div>



<div id="sub4" class="menu_sub" style="display:none; position:absolute; top:; left:;left: 225px; top: 146px;">
<table><tr><td></td></tr></table></div>



<div id="sub5" class="menu_sub" style="display:none; position:absolute; top:; left:;left: 225px; top: 170px;">
<table><tr><td></td></tr></table></div>

5 名前： ザック ： 2005/08/03 16:57: 


<div id="sub6" class="menu_sub" style="display:none; position:absolute; top:; left:;left: 225px; top: 192px;">
<table><tr><td></td></tr></table></div>



<div id="sub7" class="menu_sub" style="display:none; position:absolute; top:; left:;left: 225px; top: 214px;">
<table><tr><td></td></tr></table></div>



<div id="sub8" class="menu_sub" style="display:none; position:absolute; top:; left:;left: 225px; top: 235px;">
<table><tr><td></td></tr></table></div>



<div id="sub9" class="menu_sub" style="display:none; position:absolute; top:; left:;left: 225px; top: 258px;">
<table><tr><td></td></tr></table></div>


<div id="sub9" class="menu_sub" style="display:none; position:absolute; top:; left:;left: 225px; top: 258px;">
<table><tr><td></td></tr></table></div>

</div>
</body>
</html>

以上です。長々となって管理者様、参照していただいた方申し訳ありません。どなたかご教授いただけれ幸いでございます。

6 名前： phpinfo() ： 2005/08/03 16:57: 質問に対する答えでないので申し訳ないのですけど、font-sizeを絶対値にするのは望ましくありません。

7 名前： 匿名希望 ： 2005/08/03 16:57: なぜですか

8 名前： phpinfo() ： 2005/08/03 16:57: >>7
http://www.mars.dti.ne.jp/~fuming/contents/sizefix.htm

9 名前： みんみ ： 2005/08/03 16:57: >>5


<div id="sub9">(中略)

idが重複しています。
全部ちゃんと見きれてないかもしれないですが、
修正試してみてください。

10 名前： ザック ： 2005/08/03 16:57: ＞phpinfo() さん
＞みんみさん
有難うございます。
すいません。ID関係少し整理してみてみます。もしかするとそれが原因になっているかもしれませんね。
後、文字固定なのですが、参考サイトじっくり拝見させていただきます。
相対が絶対かどちらにすればいいのか、曖昧なまま今まできました。この件が解決したら一度じっくり勉強してみます。

また、問題があれば質問させていただきます。どうぞよろしくお願いいたします。

11 名前：匿名： 2005/08/03 16:57: >>8
説得力がありませんよ、そんなドシロウトのたわごとページじゃあ。
だいたい、IEでもpxを無効にできるじゃないですか。

12 名前： Anonym ： 2005/08/03 16:57: >>7
>>11
つまりあんたはこの流れで何を言いたいの？
言っとくが匿名じゃ説得力が無いよ。まあ俺もだが。

13 名前：匿名： 2005/08/03 16:57: >>6
結局、それはページ作者への濡れ衣なんですよ。CSS仕様においても、
コンテンツアクセシビリティガイドラインにおいても、
ページ作者がpxなどを使うことは全く否定されていません。

もっと言えば、>>11で書いたように、ヴェンダへの濡れ衣でもあります。
確かに、IEにしろFirefoxにしろ、普段PCを使わない人にとっては
文字の拡大縮小が容易くはないだろうと思われます。しかし、重要なのは
拡大縮小の機能が実装されているという事実です。ヴェンダはちゃんと
考えていることになります。その上で、使いやすくするのは、ヴェンダの
仕事であり、もしかしたら義務かもしれません。少なくともヴェンダは
改善する権限を握っています。ページ作者がしゃしゃり出るのは筋違いです。

そもそも、この手のメニューにおいて、ページ作者の非は別の所にあります。

まず第一に、キー操作が出来なければ、この手のメニューは害悪以外の
何物でもありません。しかし、多くの作者はこれをサボります。

第二に、ブラウザは「必ず」文字拡大縮小の機能を備えていますから、
文字サイズ(というか固定値)に依存した位置決めはあまりに能が無い。
ざっと書くので間違っているかもしれませんが、例えば、
function getViewPortX(e) {
var result = e.offsetLeft;
var op = e.offsetParent;
var sl;
var ol;
while (op) {
sl = op.scrollLeft;
ol = op.offsetLeft;
if (isNaN(sl)) sl = 0;
result += ol - sl;
op = op.offsetParent;
}
return result;
}
みたいなスクリプトの断片はそこらじゅうに転がっています。
何事もこんなかんじで、要素オブジェクトに問い合わせて
実際の採寸をするのが望ましい。
見えない位置にピョコピョコ現れても意味が無い。

14 名前： ザック ： 2005/08/03 16:57: すいません、まだ、勉強はじめで現段階で匿名さんの言われてる事が全て理解できません。
今後の勉強でだんだん理解できてくるのだと思います。
とりあえず、私が質問していたものに関して、問題解決できました事をご報告します。

どうも有難うございました。今後ともよろしくお願い致します。