2

私は JavaScript を使用しない CSS3 ナビゲーション メニューを使用しています。現在の状態は気に入っていますが、1 つの問題があり、ユーザーはそれに悩まされています。

問題は、ユーザーがメニュー リンクにカーソルを合わせるとサブメニューがポップアップすることです。これは非常に面倒で、これを修正する方法がわかりません。2 つの解決策があります。1 つは常にサブメニューを表示する方法で、もう 1 つは、ユーザーがサブメニューからホバーしたときに、サブメニューが消えるまで少なくとも 5 ～ 10 秒待機し、また、ホバーアウトしてホバーバックしても、サブメニューはそのままです。しかし、私はそれを行う方法がわかりません。

これがコードと例です。試してみてください。解決策は大歓迎です!

http://jsfiddle.net/nPdNd/ Jsfiddle の結果ウィンドウを展開して、ナビゲーション メニュー全体を表示します

前もって感謝します！

4

7 に答える 7

1

問題に対処するための複数の解決策があります。

  1. css-transitions を使用して、サブメニューが消えるのを遅らせます (スタイルシートにアクセスできないとチャットで言いました... インライン スタイリングを試してみてはいかがでしょうか? これは最善のアイデアではありませんが、我慢できるかもしれません):

    http://www.w3schools.com/css3/css3_transitions.asp

    https://developer.mozilla.org/en/CSS/CSS_transitions

    http://www.w3.org/TR/css3-transitions/

  2. jQuery がある場合.animate()は、同じことを行うために使用できます。

    http://api.jquery.com/animate/

    こちらもご覧ください.stop():

    http://api.jquery.com/stop/

  3. 他のすべてが失敗した場合は、試してみることができますsetTimeout();

    https://developer.mozilla.org/en/DOM/window.setTimeout

    http://www.w3schools.com/js/js_timing.asp

于 2012-04-20T09:25:37.003 に答える
1

例: http://jsfiddle.net/nPdNd/40/

jQuery の使用

$(document).ready(function(){
    var clearli;
    $(".test").hover(function() {
        clearTimeout(clearli);
        $("ul#nav li").removeClass('current');
        $(this).addClass('current');
    }, function() {
        var getthis = $(this);
        clearli = setTimeout(function() {
           $(getthis).removeClass('current');
        }, 500);
    });
});

CSSの変更

ul#nav li:hover > ul {にul#nav li.current > ul {

ul#nav li:hover > ul li a {にul#nav li.current > ul li a {

EDIT：バグのためにセレクターを変更し、.testクラステストを<li>

EDIT2: ばかげているように感じます。タイムアウト カウンターを停止するのを忘れていました。以上編集。

于 2012-04-24T22:29:19.737 に答える
0

ホップ、これが変更されたjsfiddleです：http：//jsfiddle.net/Ralt/nPdNd/25/

ご覧のとおり、完璧にはほど遠いです。styleプロパティを変更するのではなく、クラスを追加してから削除する必要がありますが、その方法はわかります。

于 2012-04-21T21:34:27.277 に答える
0

このスクリプトをページに追加してください。これは簡単な方法です ステップ 1-

あなたのページに一般的なjqueryを追加します

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

ステップ 1- このスクリプトをページに追加します -

<script type="text/javascript">
jQuery(document).ready(function() {
            $('ul#nav li').hover(function()
                          {
                          $(this).find('ul').stop(true,true).slideDown()
                          },
                          function()
                          {
                          $(this).find('ul').stop(true,true).slideUp()
            });
});

</script>

私はあなたのcssに少し変更を加えています

デモhttp://jsfiddle.net/nPdNd/28/

あなたのコード (li:hover) は ie6 で動作しません。チェックしましたか?

于 2012-04-23T09:44:51.193 に答える
0

これは単なる例です - http://jsfiddle.net/nPdNd/22/

希望する結果が得られるまで、自分で実験することをお勧めします

mouseenterこの例は/mouseleaveイベントに基づいています:

$("#nav li").mouseenter(function(){
   $(this).children('#sub').show("slide", { direction: "up" }, 300);
});
$("#nav li,#sub").mouseleave(function(){
   $(this).children('#sub').hide("slide", { direction: "up" }, 300);
});

JQuery UIも使用しています

于 2012-04-20T10:47:26.140 に答える
0

確認してください.... http://jsfiddle.net/lakshmipriya/nPdNd/31/
この速度で大丈夫ですか....

于 2012-04-24T05:05:56.523 に答える
0

CSSS トランジションは、CSS だけでこれを行う唯一の方法です。transition-delay を設定するだけで、遅延クロックが完了するまで CSS の変更は有効になりません。これに関する唯一の問題は、CSS トランジションをサポートしていない IE です。

https://developer.mozilla.org/en/CSS/transition-delay

これ以外に、JavaScript ベースのメニューに頼る必要があり、その実装はインターネット上で見つけることができます。

于 2012-04-25T00:05:29.477 に答える