こんばんは。
いま、下記サイトでのソースをつかわせていただき、ドロップダウン
メニューを作成しています。
http://jsajax.com/DropDownMenuArticle286.aspx
ジャバスクリプトのわからない自分でも作るところまでは
できました。
今回、教えていただきたいのはドロップするメニューの元になる
画像または、文字の選択状態についての質問です。
横に並べたグローバルナビゲーション等にカーソルがのると
ドロップしメニューがでてくるのですが、そのドロップしたメニューに
カーソルを合わせるとドロップ元の画像の選択状態が解除されてしまい
ます。
ドロップしたメニューにカーソルがのっている間もドロップ元の
画像やテキストをオーバーした状態でたもちたいのですが
どうすればいいかわかりません。
CSSであたり判定の制御等は難しいとおもうので、ジャバスクリプト
側での制御になるのではないかとおもうのですが。。。
制御方法または、参考になるようなページ等知っておられる方
おられましたら、お教えいただけませんでしょうか。
よろしくおねがいします。
No.2ベストアンサー
- 回答日時:
・ 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
- 回答日時:
・ 直感的で試していませんが考え方として、テキストの場合
------------------------------------------------------------
1. mcancelclosetime() の中で
ドロップ元のテキストのbackgroundを
#dd li a.menu:hover {
background: #49A3FF;
}
と同じにする。
2. mclosetime() の中で元に戻す。
background: #5970B2;
------------------------------------------------------------
としてみてはどうでしょうか。
この回答への補足
参考ありがとうございます。
具体的にはどのように記載してみればよろしいでしょうか?
CSSはそこそこわかるのですが、javaスクリプトの記載方法が
わからないです。
お手数ですがお教えいただけますと幸いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ASP.NETのコントロールの値をJa...
-
ASP.NET MVCでObjectをjsに渡す
-
四捨五入について
-
パス付きサイトのjavascript解析
-
gas スプレッドシートがアクテ...
-
ジェネレーターの作り方
-
javascriptで入力フォームに日...
-
GASでundefinedエラーが出ます
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
プログラムからブラウザにJSを...
-
メールフォームの日付入力フォ...
-
今日からnヶ月後(前)
-
アクセス時からのカウントダウ...
-
firefox だけ専用のCSSを表示さ...
-
商品コードを入力で、商品名、...
-
jqueryでRSS内のdc:dateなどの...
-
google map apiで下記のhtmlが...
-
html javascript リンク先アド...
-
IEでF12を押さないとjavascriptが…
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
google apps scriptの終了のさせ方
-
ジェネレーターの作り方
-
ASP.NETのコントロールの値をJa...
-
C#で、ContextMenuStripに動的...
-
GASでundefinedエラーが出ます
-
なぜmatchメソッドがエラーにな...
-
ASP.NET MVCでObjectをjsに渡す
-
翌月を取得するGASが分かりません
-
gas スプレッドシートがアクテ...
-
シンプルなweb版スタンプラリー...
-
html javascript リンク先アド...
-
ローカルにあるファイルを検索...
-
javascriptでiframeのURL変更は?
-
javaScript textareaの一行あた...
-
イベントが初めの一回しか起き...
-
C# 演算 奇数と偶数 表現の仕方
-
JavaScriptを使って毎日決まっ...
-
googleスプレッドシートのApps ...
-
条件に応じて座席表をつくりた...
おすすめ情報