• 締切済み

JavaScriptのjQueryのサンプルに機能を追加したいです!

当方jQuery初心者です。 jQueryのサンプル「Dropline Menu 7」を使っています。 現在地となるcurrentがデフォ表示で赤字にて表示されていると思います。 その他メニューをマウスオーバーすると他メニューのサブメニューが下に表示されていきます。 しかし、マウスアウトすると直ぐデフォ表示に戻ってしまいます。 そこにマウスオーバー時に現われていたサブメニューがマウスアウトしてもすぐ消えない、2~3秒程の時間表示されるようなものを設け、 その設定した時間内にマウスオーバーするとそのまま表示を継続、というような機能をこのスクリプトに追加したいです。 http://jsajax.com/jQueryDroplineMenuArticle1167.aspx いろいろと調べてみたのですがいい方法が見つかりません。 使われている 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() {~} の処理内にて変更・追加すればよいのでしょうか? どなたかご教授いただけますでしょうか、お願いします!

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

copyrightのあるものは、内容の変更が許されるのか否かなど、copyrightの内容をキチンと確認しましょう。 また、内容についての質問は、製作者になさるのが正道かと思います。 ところで、オリジナルのものでは、時間差効果付でデフォルトに戻らないタイプのものもあるみたいだけど、こういう意味とは違うのかな?? http://www.stunicholls.com/menu/jquery-dropline-dropdown-fly-4.html

kampla
質問者

お礼

早速の回答ありがとうございます。 >copyrightのあるものは、内容の変更が許されるのか否かなど、copyrightの内容をキチンと確認しましょう。 このサンプルの製作者のサイトにてコードの著作権について確認してみたところ、使用する場合は内容の編集等をせずそのまま使用してくださいというような旨が記載されてありました。 ですので、実際に使用することはやめておくことにします。 大事な点、注意していただきありがとうございました。 今後サンプルを使用する際はコピーライトなど確認を行っていこうと思います。 >http://www.stunicholls.com/menu/jquery-dropline-dropdown-fly-4.html 似たサンプルの情報ありがとうございます。 そうですね、なるべく現在いるページのメニューの表示がされるようなものがよいですね。 例えばこのサンプルだと「Products」(大カテゴリ)の「Cameras」(中カテゴリ)のページを見ていたと仮定して、「Shop」(大カテ)にマウスオーバーしマウスアウトすると中カテゴリー部はそのままになってしまうと思います。 これが消えて、かつ見てるページのメニューの表示に戻ると良いのですが。 近いものでこれがありました。 http://www.stunicholls.com/menu/jquery-dropline-dropdown-fly-3.html マウスアウトし、数秒経つと消えました。 このコードを見て勉強してみようと思います。

kampla
質問者

補足

コピーライトを確認し、編集したものの使用はしてはいけないという事が分かりました。 なので、あくまで知識として教えていただきたいです。 この場合どのようなスクリプトの記述を追加することで、思っているような事ができるようになるのか。 よろしくお願いします。