- ベストアンサー
JavaScript/CSSによるドロップダウンメニューサンプルの改造
- JavaScript/CSSによるドロップダウンメニューサンプルの改造についてご質問があります。現在のサンプルスクリプトには[target_self] [target_top] [target_blank]が並んでいますが、[target_self]の上にマウスカーソルを乗せても垂れ幕が消えない問題があります。マウスカーソルが各ボタンから離れたら垂れ幕が消えるようにスクリプトを改造したいですが、どのような方法があるか検討がつかない状況です。
- 現在のJavaScript/CSSによるドロップダウンメニューサンプルでは、[target_self]の上にマウスカーソルを乗せると垂れ幕が現れますが、マウスカーソルを離しても垂れ幕が消えない問題があります。そのため、マウスカーソルが各ボタンから離れた時に垂れ幕が自動的に消えるようなスクリプトの改造方法を検討しています。
- JavaScript/CSSによるドロップダウンメニューサンプルのスクリプトを改造して、[target_self]の上にマウスカーソルを乗せている間だけ垂れ幕が表示されるようにしたいです。現在のサンプルでは、マウスカーソルを離しても垂れ幕が消えないため、改造が必要です。どのような方法があるか教えていただけますか？
- litton101
- お礼率89% (1106/1240)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
この際徹底的にやりましょう。 メニューと垂れ幕の位置を調整しているのは この場合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ずれたぐらいで消えるのは利用者をイライラさせてしまいます。再度ボタンにマウスのっければ問題のない話ですが、やはりここは見た目にもよろしくないですよね。そこで、さきほどのタイマーが登場します。ボタンからマウスが離れても１秒の猶予を持たせているわけです。 長文になってきたので、タイマーの実装については次のステップにしましょうか。とりあえずは垂れ幕表示をうまく組み込んでみてください。 がんばってください。
その他の回答 (3)
- royaltomato
- ベストアンサー率38% (21/55)
とりあえずできたんですね。よかったです。 タイマーについては一般的な概念のみお答えしておきます。 setTimeout(関数、指定ミリ秒数 ); 指定秒数後に関数を呼ぶことができます。 ここでいうなら、100ミリ秒後に垂れ幕を閉じる関数を呼ぶというイメージです。 で、ボタンからマウスが外れても、なお垂れ幕の上にマウスがある場合が想定されますので、この場合はセットしたタイマーを消去しなければいけません。 clearTimeout( ウィンドウイベント ); で指定のイベントを消去できます。 イベントうんぬんは var wib; ・・・ wib=setTimeout(XXXXX); ・・・ clearTimeout(wib); のように使えます。 やっぱりWebの流行はFlashに向いているので、 次はFlashで実装ですかね？ Flashを使えばもっといんたらくてぃぶなことが いっぱいできます。
お礼
royaltomatoさん，本件では大変お世話になりました． タイマーの概念については， JSでタイマーの関数を作成，これを フェードアウトしたい必要箇所で呼び出す， という流れであると理解しました． すごく・とってもやりたいですが， 現段階ではちょっと敷居が高そうです． とりあえず本スレはこの御礼をもって締めさせていただき， 必要に応じて改めて別スレッドで質問させていただこうと思います． Flashの可能性については何となくのイメージだけ持っていますが 個人的には今のところ 「そのためだけに別にアニメ環境を持たなくてはならないもの」 という印象です． ともかく，一連のレクチャで標題の件は今後とも活用できそうなので 大変感激しております． 手取り足取りの的確なご指導，本当にありがとうございました． 今後ともよろしくお願い申し上げます．
- royaltomato
- ベストアンサー率38% (21/55)
ではマウスがボタンから離れたあと、垂れ幕の上にあるかどうかも判定しましょう。 <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の方でしょうか？？ 質問長引かせて恐縮です． もしよろしければご教示ください． よろしくお願い致します。
- royaltomato
- ベストアンサー率38% (21/55)
つくりが雑なんですよ。 それぞれのタグに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);"> としてるのですかね？ 何とかスマートに動作するようできたらと思うのですが・・・ よろしくお願い致します。
お礼
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の本番ファイルのコメントとして残しております(^^)．