3

次のようなマークアップを使用してレスポンシブ ドロップダウン メニューを設計しています。

<nav id="nav" role="navigation"> 
  <a href="#nav">Show navigation</a>
  <a href="#">Hide navigation</a>
  <ul>
    <li><a href="/landingpage.html">anchor link 1</a>
        <div class="show-hide">
            <div class="show">►&lt;/div>
            <div class="hide">▼&lt;/div>
        </div>
        <ul class="submenu">
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
        </ul>
    </li>
   etc...
  </ul>
</nav>

アンカー リンクは、ランディング ページへのハイパーリンクでもあります。大画面ではナビゲーションは水平で、CSS を使用してサブメニューをホバー表示し、アンカー リンクをクリックできるようにしています。

ホバーを制御する CSS:

#nav ul > li > .submenu {
display: none;
}

@media only screen and (min-width: 768px){
  #nav li:hover > .submenu {
    display:block;
  }
}

小さな画面では、ナビゲーションが折りたたまれて垂直ナビゲーション メニュー バーになり、アンカー リンクが表示され、アンカー リンクの右側に矢印が表示されます。これらの矢印をクリックすると、サブメニュー (jQuery slideToggle を使用) が表示されます。アンカー リンク自体は依然としてランディング ページを指していますが、カーソルを合わせてもサブメニューは表示されません。

クリック時に slideToggle() を制御する jQuery:

$(".show-hide").click(function() {
  $(this).next('ul').slideToggle();
  $('div',this).toggle();
});

http://jsfiddle.net/NxDe8/3/ メニューの現在の繰り返しの jsfiddle

ユーザーがメニューの小さな画面の垂直バージョンを操作し、画面のサイズを変更してメニューの大きな画面の水平バージョンをトリガーすると、問題が発生します。

小さな画面から始めて、ユーザーは矢印をクリックしてサブメニューを表示します。次に、ユーザーはウィンドウのサイズを変更して、大画面の水平ナビゲーション バーが表示されるようにします。ホバーは引き続き機能しますが、サブメニューは表示されたままです。ウィンドウを拡大して大画面の水平メニューをトリガーする前に、ユーザーが小画面のサブメニューを閉じた場合、サブメニューは非表示のままですが、サブメニューを表示するホバーは機能しなくなります。

CSSの代わりにjQueryを使用してホバーを制御し、ホバー機能を画面サイズにバインドし、ウィンドウサイズが大きくなるとサブメニューを自動的に非表示にしようとしました。これは、サイズ変更とクリックを数回行うと壊れます: http://jsfiddle.net/ps3Tq/4/

また、slideToggle() 関数を小さなウィンドウ サイズにバインドしようとしましたが、この場合、サブメニューは問題を解決せずに上下に跳ね返ります。

私はjQueryが初めてで、かなり困惑しています。どんな助けでも大歓迎です。ありがとう！

4

1 に答える 1

2

これを試してください：

http://jsfiddle.net/NxDe8/4/

基本的に、すべてを混合ではなく jQuery を使用するようにしました。

JS:

$('#nav li').on('mouseenter', function() {
    if ($(window).width() > 768) {
        $(this).find('.submenu').stop().slideDown();
    }
});

$('#nav li').on('mouseleave', function() {
    if ($(window).width() > 768) {
        $(this).find('.submenu').stop().slideUp();
    }
});

$(window).on('resize', function() {
    if ($(window).width() > 768) {
        $('.submenu, .hide').hide();
        $('.show').show();

    }
});

CSS:

/* second level */

 #nav ul li .submenu {
    display: none;
    position: absolute;
}
于 2013-08-01T22:26:23.787 に答える