2012.06.15 Friday 17:41
[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でいくつか探してみましたが、
見つかる方法はどれもややこしそうなものばかり。
具体的には、
プルダウンメニュー部分の領域の座標を検出しておき、
クリック座標がその部分以外のときに閉じる命令を出す
という手法。
ただ座標検出は、ブラウザによって座標の基準が異なるらしく、
それぞれの場合を想定しておかないとならないらしい(´・ω・`)
「……もっと簡単な方法、無いかなぁ?」
と考えていて、閃きました!
「プルダウンメニューの領域に
マウスカーソルが重なっているかどうかさえ
検出してやれば、
座標の検出なんてしなくてもいいのでは?」
さっそく、ものは試しに実践です。
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'"
-----------------------------------------------
を組み込んでやったところ、
これで問題なく動作するようになりましたとさ。
もう少し、各命令のスクリプトを整理できるかもしれないけど
まぁ手法としてのご紹介。
ブラウザに依存しない簡単な方法なので、
良かったらどうぞ試してみてください。