TOTAL:  TODAY: YESTERDAY:

悠々徒然

 徒然なるままに、気まぐれに、パソコンに向かひて、心にうつりゆく由無し事を、
そこはかとなく書きつくれば、あやしうこそ興に入りけれ・・・!?
<< October 2019 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
MOBILE
qrcode
PROFILE
SEARCH
有谷まほろ個人サイト
[総合]STUDIO 朧
[俳句]朧庵
LINKS
<< [ゲーム]ARおドールカード | main | [徒然]数年ぶりの東京遠征 >>
[WEBデザイン]JavaScript:プルダウンメニューを領域外クリックで閉じる
JavaScriptで作成したプルダウンメニューを
プルダウンの部分以外をクリックしたときに閉じたいなぁと
その方法をWEBでいくつか探してみましたが、
見つかる方法はどれもややこしそうなものばかり。
具体的には、
プルダウンメニュー部分の領域の座標を検出しておき、
クリック座標がその部分以外のときに閉じる命令を出す
という手法。
ただ座標検出は、ブラウザによって座標の基準が異なるらしく、
それぞれの場合を想定しておかないとならないらしい(´・ω・`)



「……もっと簡単な方法、無いかなぁ?」


と考えていて、閃きました!


「プルダウンメニューの領域に
 マウスカーソルが重なっているかどうかさえ
 検出してやれば、
 座標の検出なんてしなくてもいいのでは?」



さっそく、ものは試しに実践です。



JavaScriptでまずは
-----------------------------------------------
var OnMenu = 'out';
-----------------------------------------------
ってな感じで、OnMenuという変数を作ってやって、
プルダウンメニューを構成しているDIVタグ内に
-----------------------------------------------
onMouseover="OnMenu = 'over'"
onMouseout ="OnMenu = 'out'"
-----------------------------------------------
という命令を足せば、
プルダウンメニューにマウスカーソルが
重なって入れば「over」、外れていれば「out」になる
OnMenuという変数のスイッチができるはず。

そのOnMenuスイッチを参照して、
プルダウンメニューにカーソルが重なっていない……
つまりOnMenuが「over」ではないときに
どこかがクリックされたらプルダウンを閉じる、
という命令文を書いてみます。
(※プルダウンメニューの方式が
 スタイルシートの「position」の設定を「absolute」にして、
 「visibility」の設定を
 「hidden」と「visible」とに切り替える方式の場合です)
-----------------------------------------------
document.onmousedown = function(e){
if(OnMenu != 'over'){
document.getElementById('■■').style.visibility = 'hidden';
}
}
-----------------------------------------------
「■■」は、プルダウンメニューを構成しているDIVタグの
「id」に設定している文字列です。


もちろん、ここに書いた命令文以外にも、
そもそものプルダウンメニューを動作させる命令文も
もちろん必要ではあるわけですが……ここでは割愛します。


で、実際に動作させてみたところ。


おぉ、ちゃんと想定どおりに閉じるではないですか!!
やったー\(`・ω・´)/

ただ、プルダウンを開くリンクを
再度クリックするとプルダウンが閉じるはずの設定が、
この命令文を組み込むと機能しなくなってしまったので、
このリンクのタグにも
-----------------------------------------------
onMouseover="OnMenu = 'over'"
onMouseout ="OnMenu = 'out'"
-----------------------------------------------
を組み込んでやったところ、
これで問題なく動作するようになりましたとさ。


もう少し、各命令のスクリプトを整理できるかもしれないけど
まぁ手法としてのご紹介。

ブラウザに依存しない簡単な方法なので、
良かったらどうぞ試してみてください。
| 有谷まほろ | WEBデザイン | comments(0) | trackbacks(0) | - |









url: http://blog.aritani-mahoro.com/trackback/992914