Question

我做了响应式菜单。在桌面上，导航在标题中水平显示：主页，图库，关于等。对于较小的屏幕，我已经制作了汉堡包图标，点击后，导航应该展开。使用CSS时，我在较小的屏幕上隐藏了导航，并将其展开后的样式进行了风格化 - 它将垂直显示。

使用javascript我点击汉堡包图标时可以扩展导航，再次点击时可以折叠。

有效。

问题是：如果我点击汉堡图标显示导航然后再次隐藏它，当我将浏览器的窗口放大到桌面大小时，导航将不会在标题中水平再次显示，它仍然是隐藏的。

请帮忙！

$('#drawer').click(function() {
  $('header nav').toggle(1);
  if ($(this).text() == 'Hide') {
    $(this).text('Show');
  } else {
    $(this).text('Hide');
  }
});

  #drawer {
  display: none;
}

header nav {
  float: right;
}

nav li {
  float: left;
}

@media screen and (max-width: 768px) {
  #drawer {
    display: inline-block;
    float: right;
  }
  header nav {
    display: none;
    float: none;
    padding-top: 120px;
    /* Hamburger icon is in the header on the right side, and nav expands vertically in the center of the screen below the hamburger icon, that's why I put the padding 120px, to make nav below the icon*/
    text-align: center;
  }
  nav li {
    float: none;
  }
  nav li a {
    display: inline-block;
    margin-left: 0px;
    margin-top: 10px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="drawer" src="images/drawer.png" alt="Drawer">
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="tutorials.html">Tutorials</a></li>
  </ul>
</nav>

小屏幕的汉堡菜单，包括JavaScript / jQuery

0 个答案: