ドロップダウンメニューのドロップ元画像の選択状態

質問

こんばんは。

いま、下記サイトでのソースをつかわせていただき、ドロップダウン
メニューを作成しています。

http://jsajax.com/DropDownMenuArticle286.aspx

ジャバスクリプトのわからない自分でも作るところまでは
できました。

今回、教えていただきたいのはドロップするメニューの元になる
画像または、文字の選択状態についての質問です。

横に並べたグローバルナビゲーション等にカーソルがのると
ドロップしメニューがでてくるのですが、そのドロップしたメニューに
カーソルを合わせるとドロップ元の画像の選択状態が解除されてしまい
ます。

ドロップしたメニューにカーソルがのっている間もドロップ元の
画像やテキストをオーバーした状態でたもちたいのですが
どうすればいいかわかりません。

ＣＳＳであたり判定の制御等は難しいとおもうので、ジャバスクリプト
側での制御になるのではないかとおもうのですが。。。

制御方法または、参考になるようなページ等知っておられる方
おられましたら、お教えいただけませんでしょうか。

よろしくおねがいします。

回答No.2

auty · ベストアンサー

・　DropDownMenu.js を次のように変更してください。

------------------------------------------------------------
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Konstantin Jagello | http://javascript-array.com/ */

var TimeOut = 300;
var currentLayer = null;
var currentitem = null;
var currentLayerNum = 0;
var noClose = 0;
var closeTimer = null;

var mmenu;

function mopen(n) {
var l = document.getElementById("menu" + n);
var mm = document.getElementById("mmenu" + n);
mmenu = mm;

if(l) {
mcancelclosetime();
l.style.visibility='visible';
if(currentLayer && (currentLayerNum != n))
currentLayer.style.visibility='hidden';
currentLayer = l;
currentitem = mm;
currentLayerNum = n;
} else if(currentLayer) {
currentLayer.style.visibility='hidden';
currentLayerNum = 0;
currentitem = null;
currentLayer = null;
}
}

function mclosetime() {
closeTimer = window.setTimeout(mclose, TimeOut);
mmenu.style.backgroundColor = "#5970B2";
}

function mcancelclosetime() {
if(closeTimer) {
window.clearTimeout(closeTimer);
closeTimer = null;
}
mmenu.style.backgroundColor = "#49A3FF";
}

function mclose() {
if(currentLayer && noClose!=1) {
currentLayer.style.visibility='hidden';
currentLayerNum = 0;
currentLayer = null;
currentitem = null;
} else {
noClose = 0;
}
currentLayer = null;
currentitem = null;
}

document.onclick = mclose;
------------------------------------------------------------
変更下箇所は、以下の通りです。

1.

var mmenu;

2.

function mclosetime() {
closeTimer = window.setTimeout(mclose, TimeOut);
mmenu.style.backgroundColor = "#5970B2";
}

function mcancelclosetime() {
if(closeTimer) {
window.clearTimeout(closeTimer);
closeTimer = null;
}
mmenu.style.backgroundColor = "#49A3FF";
}

お礼

ご丁寧にありがとうございます。

参考になりました！

回答No.1

auty

・　直感的で試していませんが考え方として、テキストの場合

------------------------------------------------------------
1.　mcancelclosetime() の中で
ドロップ元のテキストのbackgroundを

#dd li a.menu:hover {
background: #49A3FF;
}

と同じにする。

2.　mclosetime() の中で元に戻す。

background: #5970B2;
------------------------------------------------------------

としてみてはどうでしょうか。

補足

参考ありがとうございます。

具体的にはどのように記載してみればよろしいでしょうか？

ＣＳＳはそこそこわかるのですが、javaスクリプトの記載方法が
わからないです。

お手数ですがお教えいただけますと幸いです。