プロが教えるわが家の防犯対策術！

js/cssによるドロップダウンメニューサンプルの改造

解決済

  • 質問者：litton101
  • 質問日時：
  • 回答数：4件

ここにあるサンプルスクリプトに
http://andyou.sakura.ne.jp/tool/ddmenu.html
[target_self] [target_top] [target_blank]`
と並んでいますよね．

例えば [target_self] の上にマウスカーソルを乗せると
ドロップダウンメニュー（垂れ幕）が現れますが，
[target_self]上からマウスカーソルを離しても
垂れ幕は消えてくれません．

（当該インラインフレーム内んのどこかをマウスクリックするか
　他の[target_top] [target_blank]にカーソルを移さない限り）

マウスカーソルが各ボタンから離れたら，
垂れ幕が消えるように「スクリプト例」を改造したいのですが
方法に検討がつきません．

何かうまい方法がありましたらご教示いただけますと幸いです．
よろしくお願い致します。

通報する

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

質問の本文を隠す

A 回答 (4件)

No.3ベストアンサー

この際徹底的にやりましょう。



メニューと垂れ幕の位置を調整しているのは
この場合CSSの中の、padding : 2px 4px 2px 4px;
がそうです。数字の意味はここを参照してください。
http://www.htmq.com/style/padding.shtml

で、さらに、ここではテーブルを使用していますので、
<table border="0" cellspacing="0px" cellpadding="0px">とする必要があります。

昨日の回答を一部訂正しますが、
<div id="list1" class="list"onclick="window.event.cancelBubble = true;" onmouseover="fnOpen('list1');" onmouseout="fnClose('list1');">
で。今はわざわざ別関数を経由する必要がないです。


さて、Biglobeのページですが、お作法はまったく同じなのですが、ここではタイマーを使用していて、ボタンからマウスが離れたあと、すぐには垂れ幕が消えないように裏で調整されています。実際に試してみるとボタンから離れたあと垂れ幕が消えるまで１秒程度のタイムラグがあることに気が付くと思います。
マウスが離れたとたんにパッときえるのは利用者の目にやさしくない、少し時間があればフェードアウト効果で見た目にもよいという理由もありますが、ボタンと垂れ幕の微妙な関係もあります。

現状のつくりではボタンからマウスが１pxでも離れると、途端に垂れ幕が消えてしまいます。このせいで、ボタンを垂れ幕をぴったりくっつける必要があると前回回答したのですが、実はぴったりくっつけても垂れ幕が消えてしまう場合がたまーーにありますし、デザイン上せめて1～2pxぐらい離したいという場合もありますし、わずかな操作ミスでマウスが数pxずれたぐらいで消えるのは利用者をイライラさせてしまいます。再度ボタンにマウスのっければ問題のない話ですが、やはりここは見た目にもよろしくないですよね。そこで、さきほどのタイマーが登場します。ボタンからマウスが離れても１秒の猶予を持たせているわけです。

長文になってきたので、タイマーの実装については次のステップにしましょうか。とりあえずは垂れ幕表示をうまく組み込んでみてください。

がんばってください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

royaltomatoさん，
度々のご教示，感謝にたえません．
結論からご報告いたしますと，ご教示のステップをたどることで
無事要望を実現できましたm(_ _)m

当方のHTML内では，
<table border="0" cellspacing="0px" cellpadding="0px">
と，
padding : 2px 4px 2px 4px;
と
<div id="list1" class="list"onclick="window.event.cancelBubble = true;" onmouseover="fnOpen('list1');" onmouseout="fnClose('list1');">
の，全てが決め手になっていました(^^;

当面の目的は達成できたのですが，
タイマーにする「フェードアウト効果」というのは大変興味あります．
もしよろしければ引き続きご指導いただけますと幸いです．

一回習ってしまえば今後とも使い回しがきくと思います．

ちなみに，royaltomatoさんとのやりとりのログは，
全てCSSの本番ファイルのコメントとして残しております(^^)．

通報する
お礼日時：2005/05/27 17:40

No.4

とりあえずできたんですね。

よかったです。

タイマーについては一般的な概念のみお答えしておきます。
setTimeout(関数、指定ミリ秒数 );
指定秒数後に関数を呼ぶことができます。
ここでいうなら、100ミリ秒後に垂れ幕を閉じる関数を呼ぶというイメージです。

で、ボタンからマウスが外れても、なお垂れ幕の上にマウスがある場合が想定されますので、この場合はセットしたタイマーを消去しなければいけません。
clearTimeout( ウィンドウイベント );
で指定のイベントを消去できます。
イベントうんぬんは
var wib;
・・・
wib=setTimeout(XXXXX);
・・・
clearTimeout(wib);
のように使えます。


やっぱりWebの流行はFlashに向いているので、
次はFlashで実装ですかね？
Flashを使えばもっといんたらくてぃぶなことが
いっぱいできます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

royaltomatoさん，本件では大変お世話になりました．
タイマーの概念については，

JSでタイマーの関数を作成，これを
フェードアウトしたい必要箇所で呼び出す，

という流れであると理解しました．

すごく・とってもやりたいですが，
現段階ではちょっと敷居が高そうです．

とりあえず本スレはこの御礼をもって締めさせていただき，
必要に応じて改めて別スレッドで質問させていただこうと思います．

Flashの可能性については何となくのイメージだけ持っていますが
個人的には今のところ
「そのためだけに別にアニメ環境を持たなくてはならないもの」
という印象です．

ともかく，一連のレクチャで標題の件は今後とも活用できそうなので
大変感激しております．

手取り足取りの的確なご指導，本当にありがとうございました．

今後ともよろしくお願い申し上げます．

通報する
お礼日時：2005/05/30 11:27

No.2

ではマウスがボタンから離れたあと、垂れ幕の上にあるかどうかも判定しましょう。


<div id="list1" class="list"onclick="window.event.cancelBubble = true;" onmouseover="tareue('list1');" onmouseout="fnClose('list1');">
他の２つも同様。

で、

fnction tareue(id2){
fnOpen(id2);
}
を追加。

垂れ幕とボタンが離れているとおかしな動作になるので
ぴったりくっつける。サンプルページは離れてます。
http://www.biglobe.ne.jp/　のトップページがそうなってます。

試してません。不具合あればバグ報告してください。


タイマーをつけて一定時間垂れ幕を消さない、消す、というやりかたもあります。

この回答への補足

なるほどなるほど，そういうわけですね．
理屈はよくわかりました．

明日，会社で試してみます．

それとbiglobeのソースみたんですが
ちょっとお手上げです．

垂れ幕をピッタリくっつけるのは，
javascriptですか？それともCSSの方でしょうか？？

質問長引かせて恐縮です．
もしよろしければご教示ください．
よろしくお願い致します。

補足日時：2005/05/26 22:08
通報する
    • good
    • 0
    • 件
通報する

No.1

つくりが雑なんですよ。



それぞれのタグにonmouseoutでマウスが離れたら、という属性をつけくわえてあげましょう。

<td><a class="menu"
　　href="http://www.yahoo.co.jp"
　　target="_self"
　　onmouseover="fnOpen('list1');"
onmouseout="fnClose('list1');"
>target_self</a></td>
のようにして。
他の２つにも記述する必要があります。

この回答への補足

早速のご教示ありがとうございます．
試してみると，確かにonmouseoutで消えるようになるんですが，
ボタンが離れると，今度は垂れ幕まで消えてしまいます．．．うーむ．

だから，<body onclick="fnClose(idPrev);">　としてるのですかね？

何とかスマートに動作するようできたらと思うのですが・・・

よろしくお願い致します。

補足日時：2005/05/26 15:10
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報