jquery - デフォルトのナビゲーション メニューをレスポンシブ トグル ナビゲーション メニューにするにはどうすればよいですか?

Question

私はサイト（ http://sitepreview.net63.net/ ）に取り組んでいます。でも、レスポンシブサイトにしたい。だから私はナビゲーションメニュー（Wordpressのメニューバーから来る）を小さな画面のトグルナビゲーションメニューにしたいと思っています。私が欲しいものを確認できる画像リンクをここに提供しています。このリンクにアクセスしてください: http://sitepreview.net63.net/wp-content/uploads/2013/10/responsive-nav-menu.jpg .

Answer 1

media queriesを無効にしnavてモバイルを表示するには、を使用する必要がありますnav。次に、jQueryを使用して、画面サイズがこのサイズであるかどうかを確認し、クリック機能をナビゲーションに追加できます。

このようなもの

HTML

<nav class="fullNav">
  <ul>
      <li>home</li>
      <li>About</li>
      <li>Blah Blah</li>
  </ul>
</nav>
<nav class="mobileNav">
  <ul>
      <li>home</li>
      <li>About</li>
      <li>Blah Blah</li>
  </ul>
</nav>

CSS

.fullNav {
  /*Code goes here */
}
.mobileNav {
  /*Code goes here */
    display: none;
}

メディアクエリ

@media only screen and (max-width: 680px) {
    .fullNav {
      display: none;
    }
    .mobileNav {
      display: block;
    }
}

jQuery

if ($(window).width() < 680) { // if statement is not 100% needed
  $('.mobileNav').on('click', function() {
     $(this).children().slideToggle();
  }
}

ヘッダータグ

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">