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;
    }
}

j查询

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;">