当方jQuery初心者です。
jQueryのサンプル「Dropline Menu 7」を使っています。
現在地となるcurrentがデフォ表示で赤字にて表示されていると思います。
その他メニューをマウスオーバーすると他メニューのサブメニューが下に表示されていきます。
しかし、マウスアウトすると直ぐデフォ表示に戻ってしまいます。
そこにマウスオーバー時に現われていたサブメニューがマウスアウトしてもすぐ消えない、2~3秒程の時間表示されるようなものを設け、
その設定した時間内にマウスオーバーするとそのまま表示を継続、というような機能をこのスクリプトに追加したいです。
http://jsajax.com/jQueryDroplineMenuArticle1167. …
いろいろと調べてみたのですがいい方法が見つかりません。
使われている JScript.js の中身はこのようになっていました。
/* ======================================================
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
========================================================= */
$(function() {
$("#dropline li.current").children("ul").css("left", "0px").show();
$("#dropline li.current").children(":first-child").css("color", "#c00")
$("#dropline li").hover(function() {
if (this.className.indexOf("current") == -1) {
getCurrent = $(this).parent().children("li.current:eq(0)");
if (this.className.indexOf("top") != -1) {
$(this).children("a:eq(0)").css("color", "#069");
}
else {
$(this).children("a:eq(0)").css("color", "#000");
}
if (getCurrent = 1) {
$(this).parent().children("li.current:eq(0)").children("ul").hide(); ;
}
$(this).children("ul:eq(0)").css("left", "0px").show();
}
}, function() {
if (this.className.indexOf("current") == -1) {
getCurrent = $(this).parent().children("li.current:eq(0)");
if (this.className.indexOf("top") != -1) {
$(this).children("a:eq(0)").css("color", "#000");
}
else {
$(this).children("a:eq(0)").css("color", "#666");
}
if (getCurrent = 1) {
$(this).parent().children("li.current:eq(0)").children("ul").show(); ;
}
$(this).children("ul:eq(0)").css("left", "-99999px").hide();
}
});
});
イベントのhover(over, out)で、out部のfunction() {~} の処理内にて変更・追加すればよいのでしょうか?
どなたかご教授いただけますでしょうか、お願いします!
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
copyrightのあるものは、内容の変更が許されるのか否かなど、copyrightの内容をキチンと確認しましょう。
また、内容についての質問は、製作者になさるのが正道かと思います。
ところで、オリジナルのものでは、時間差効果付でデフォルトに戻らないタイプのものもあるみたいだけど、こういう意味とは違うのかな??
http://www.stunicholls.com/menu/jquery-dropline- …
この回答への補足
コピーライトを確認し、編集したものの使用はしてはいけないという事が分かりました。
なので、あくまで知識として教えていただきたいです。
この場合どのようなスクリプトの記述を追加することで、思っているような事ができるようになるのか。
よろしくお願いします。
早速の回答ありがとうございます。
>copyrightのあるものは、内容の変更が許されるのか否かなど、copyrightの内容をキチンと確認しましょう。
このサンプルの製作者のサイトにてコードの著作権について確認してみたところ、使用する場合は内容の編集等をせずそのまま使用してくださいというような旨が記載されてありました。
ですので、実際に使用することはやめておくことにします。
大事な点、注意していただきありがとうございました。
今後サンプルを使用する際はコピーライトなど確認を行っていこうと思います。
>http://www.stunicholls.com/menu/jquery-dropline- …
似たサンプルの情報ありがとうございます。
そうですね、なるべく現在いるページのメニューの表示がされるようなものがよいですね。
例えばこのサンプルだと「Products」(大カテゴリ)の「Cameras」(中カテゴリ)のページを見ていたと仮定して、「Shop」(大カテ)にマウスオーバーしマウスアウトすると中カテゴリー部はそのままになってしまうと思います。
これが消えて、かつ見てるページのメニューの表示に戻ると良いのですが。
近いものでこれがありました。
http://www.stunicholls.com/menu/jquery-dropline- …
マウスアウトし、数秒経つと消えました。
このコードを見て勉強してみようと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
二次元配列を使って順位をだす...
-
読み込んだQRコードをフォーム...
-
jQueryで同じクラス名のものを...
-
正規表現について質問です。条...
-
ローディングアニメーションの...
-
GASでGoogleフォームの自動返信...
-
スマホ上で、左右スワイプで次...
-
ブックマークレットについて
-
React hooksが値を返して配列変...
-
画面遷移を行わずに同一ページ...
-
clear機能を失わずにファイルア...
-
初心者です。gulpでコンパイル...
-
セレクトボックスで配列を呼び...
-
追加ボタンを押した際に ok ボ...
-
①入力フォーム→②確認表示画面→③...
-
EasyUIのSubGrid(jquery)にお...
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
HTMLタグに複数のクラスを設定...
-
Googleフォームで選択肢に応じ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
var exports = exports || {}; ...
-
HTMLタグに複数のクラスを設定...
-
jsで質問です。 displayプロパ...
-
画面遷移を行わずに同一ページ...
-
Googleフォームで選択肢に応じ...
-
特定の文字列を複数抜き出した...
-
フロントエンドフレームワーク...
-
変数名をどのようにつけるのが...
-
【JS】selectでchangeした時の...
-
React hooksが値を返して配列変...
-
オブジェクトから任意のプロパ...
-
指定時間になったら、WEBサイト...
-
Colorboxがうまく設置できません
-
二次元配列の中の各行の要素を...
-
読み込んだQRコードをフォーム...
-
IndexedDB を使ってファイルア...
-
HTMLで作った時報アプリが動き...
-
GASに文字列として関数を入れる...
-
GASでGoogleフォームの自動返信...
-
①入力フォーム→②確認表示画面→③...
おすすめ情報