プルダウン？
- 0 名前： ポン太 ： 2004/11/25 21:29 ［URL］
- ウインドウズのサイトの左側のメニューにあるようなものを、ポイントではなくクリックで
表示され、さらにリンクの下部（ウインドウズのサイトの場合は右側に表示される）にメニューが表示される
には、やはりプルダウンメニューのjavascriptを応用したものなんでしょうか？
また、そのやり方はどうすればいいでしょうか？（説明わかりにくくてすいません
http://homepage1.nifty.com/shinobu/htm-20.htm
少し簡単に言うとこのページにあるのはポイントで表示されるますが、
それをクリックで表示されるようにしたいです。
ちなみにウインドウズのサイトです。
http://www.microsoft.com/japan/windows/default.mspx
ご助言よろしくお願いします。。
- 1 名前： 七鍵 ： 2004/11/25 21:41 ［URL］
- 少し微妙ですが
http://www.7key.jp/cgi-bin/exp/exp.cgi
など参考になりませんでしょうか？
他にも
http://himajin.moo.jp/java/menu2.html
http://javascript.eweb-design.com/0703_tm.html
http://www.openspc2.org/reibun/javascript/mouse/006/
など「Javascript ツリーメニュー」で検索すればたくさん出てくると思います。
どれか参考になるものはありませんか？
- 2 名前： U D ： 2004/12/03 17:47
- 頭
<SCRIPT type="text/javascript">
<!--
function visi(id_N){
document.all("L"+id_N).style.visibility = "visible";
document.all("R"+id_N).style.backgroundColor="#9F9F9F";
}
function hidd(id_N){
document.all("L"+id_N).style.visibility = "hidden";
document.all("R"+id_N).style.backgroundColor="#AFAFAF";
}
//-->
</SCRIPT>
<style type="text/css">
<!--
.comment {
position:absolute;
visibility:hidden;
width:110;
font-size:15px;
color:#660000;
background-color:#AFAFAF;
border:2px solid #9F9F9F;
padding:0px;
}
.table{
border:1.5px #9F9F9F solid;
background-color:#AFAFAF;
margin:1px;
width:75;
}
.mar{
height:27px;
font-size:1;
}
-->
</style>
- 3 名前： U D ： 2004/12/03 17:49
- 体
<DIV class="table" style="float:left;">
<span class="table" id="R1" style="padding:2;" onClick="visi('1')" onMouseOut="hidd('1')">
リンク1 ⇒</span>
<span class="table" id="R2" style="padding:2;" onClick="visi('2')" onMouseOut="hidd('2')">
リンク2 ⇒</span>
</DIV>
<DIV style="padding:3px;position:relative;left:-3px">
<span class="mar"></span>
<div id="L1" class="comment" onMouseOver="visi('1')" onMouseOut="hidd('1')">
<a href="exam.htm">試験</a><BR>
<a href="script_test.htm">スクリプト試験</a><BR>
</div><BR>
<span class="mar"></span>
<div id="L2" class="comment" onMouseOver="visi('2')" onMouseOut="hidd('2')">
<a href="template.html">テンプレート</a><BR>
<a href="frame.html">フレームページ</a>
</div><BR>
</DIV>
- 4 名前： U D ： 2004/12/03 18:00
- >>1から返信がないのでどうしたものかと思いつつ、一応。
>>2は、<head>〜</head>で、
>>3は、<body>〜</body>です。
ウィンドウズのサイトほど精巧でないので、微調整が必要だと思います。
聞きたいことは聞いてください。一応。
それにしてもウィンドウズのサイトはなぜあそこまで精巧にできているのか･･･
- 5 名前： ポン太 ： 2004/12/03 22:11 ［URL］
- わたしのサイトまで知らせてくださり感謝しています。
大変お手数をおかけしました(__)
サイト右上にある「キリ番」のが、一応自分がやりたかったことなんですが・・・
あれはポイントする位置で表示される位置が変わりますが、かならず同じ一定に表示させることはできないんでしょうか？
今回はあの状態で満足してしまい、こちらでの返信を忘れていました。
大変申し訳無かったです。以後気をつけます。ご迷惑をおかけしました。
- 6 名前： U D ： 2004/12/04 10:39
- まとめると、
>ポイントではなくクリック
>一定に表示させる
ということですね。
表示させるのは「キリ番」からみてどのあたりでしょうか？
- 7 名前： ポン太 ： 2004/12/05 11:24 ［URL］
- まとめるとそんな感じですね。
「キリ番」の真下に表示させたいです。
- 8 名前： U D ： 2004/12/05 17:23
- 〜CSS〜（65〜67行目）
.comment {
position:absolute;
left:25px; top:15px;
〜
}
〜JS〜（124〜142行目）
function showMsg(MsgName){
if(IE) Msg = document.all(MsgName).style;
if(NN) Msg = document.layers[MsgName];
if(N6) Msg = document.getElementById(MsgName).style;
Msg.visibility = "visible";
}
〜HTML〜（31･32行目）
<td style="font-size:10pt;"><div style="position:relative;"> 次回<span style="cursor:crosshair;color:blue" onClick="showMsg('L1')" onMouseOut="hideMsg('L1')">キリ番</span>
<span id="L1" class="comment">キリ番取得者様</span>は<b>6666・7000</b>です。</div> 報告は<a href="http://www5f.biglobe.ne.jp/~tales-ponta_konta/BBS/kiyaku4.html">連絡掲示板</a>へ</td></tr></table>
という感じにそれぞれを直してください。
.comment {
position:absolute;
left:25px; top:15px;
〜
}
の、left:25px; top:15px; は、「 次回」の左上からの距離を指定してください。
上のだと、「 次回」の左上から右へ25px、下へ15pxの場所へコメント表示します。
細かいところは自分で調整してください。
どうでしょうか？
- 9 名前： ポン太 ： 2004/12/05 19:20 ［URL］
- すばやい対応ありがとうございます。
早速書き換えたところ、「キリ番」をクリックすると表示され、カーソルを
「キリ番」からはずすと消えます。
何度もお手数をおかけしてもうしわけないです；
