如何添加仅在移动屏幕尺寸上显示的菜单？

Question

现在，我的网络应用程序上有一个为桌面屏幕格式化的不错的菜单。但是，在较小的屏幕尺寸上，菜单确实无法正确显示。在这一点上，我想知道我是否可以像这样添加一个汉堡菜单 --->

http://codepen.io/ettrics/pen/JoaaxW

    <header class="header">
  <div class="burger">
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
  </div>

  <nav class="menu">
    <div class="menu__brand">
      <a href=""><div class="logo"></div></a>
    </div>
    <ul class="menu__list">
      <li class="menu__item"><a href="" class="menu__link">Work</a></li>
      <li class="menu__item"><a href="" class="menu__link">About</a></li>
      <li class="menu__item">
        <a href="https://twitter.com/ettrics" target="_blank" class="menu__link menu__link--social"><i class="fa fa-twitter"></i></a>
      </li>
      <li class="menu__item">
        <a href="https://dribbble.com/ettrics" target="_blank" class="menu__link menu__link--social">
          <i class="fa fa-dribbble"></i></a>
      </li>
    </ul>
  </nav>
</header>

<main>
  <h1><a href="http://ettrics.com" target="_blank">Ettrics</a></h1>
  <h2>A Full-Screen Menu, showcasing your brand and website navigation.</h2>
  <p class="support">With support for IE10 & latest versions of Chrome, Safari, and Firefox.</p>
</main>

但只能在平板电脑屏幕尺寸的移动设备上显示。基本上我问的是有没有办法添加这个菜单并将它隐藏在桌面大小的屏幕上。

Answer 1

这就是媒体查询的用武之地

@media (min-width: 600px) {
   .your-div {
      display: none;
   }
}

当浏览器宽度超过 600 像素时，这会将display: none 添加到您的 div 中。您还可以使用max-width: 600px 添加宽度最大为 600 像素的 CSS 规则。

在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 2

事实上，您可以使用媒体查询来调整您的菜单：

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Bootstrap 有一个导航栏模板可以帮助你（菜单是响应式的）：https://getbootstrap.com/examples/navbar/

但是，如果你想要一个侧边栏，这可能会更好：http://startbootstrap.com/template-overviews/simple-sidebar/

Answer 3

是的——为此，您将使用媒体查询。 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

在这种情况下，带有媒体查询的 CSS 看起来像

.burger {
  display: none;
}
.menu {
  display: block;
}

@media screen and (max-width: 960px) {
  .burger {
    display: block;
  }
  .menu {
    display: none;
  }
}

这告诉浏览器，当视口的宽度最多为 960 像素（0 - 960 之间的任何宽度）时，显示汉堡，隐藏菜单。

当单击 .burger 时，您还需要一些 jQuery 或纯 JavaScript 来切换 .menu 的显示：

$('.burger').click( function() {
  $('.menu').toggle();
});

这里有一个 CodePen 来展示它是如何工作的（调整演示区域的大小，直到出现“Burger”）：http://codepen.io/Ronamo/pen/LZWzVJ