为什么我的汉堡包导航在桌面模式下无法加载？

Question

我正在为我的高中编写一个网站，我正在为该网站使用汉堡包导航。当网站缩小到移动模式时，汉堡包加载并且一切正常。但是如果我关闭汉堡并将网站带回桌面模式，导航就消失了，因为 <ul> 标签被更改为 display="none"; 并且我找不到修复它的方法。

$(document).ready(function() {
  $(".hamburger").click(function() {
    $("nav > ul").slideToggle(800);
  })
});

nav {
  width: 100%;
  min-height: 50px;
  float: left;
  font-family: "TT Pines Bold Italic DEMO";
  font-size: 18px;
  background: #444;
  text-align: center;
  display: block;
  top: 0;
  position: fixed;
  z-index: 10;
}

nav>ul {
  padding: 0;
  list-style: none;
  overflow: hidden;
  margin: 0;
}

nav>ul>li {
  display: inline;
  line-height: 50px;
}

nav>ul>li>a {
  text-decoration: none;
  color: #fff;
  padding: 25px 17px;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 2px;
  font-family: 'Open Sans Condensed', sans-serif;
}

a:hover {
  text-decoration: none;
  color: #efb60b;
}

@media only screen and (max-width: 320px) {
  nav {
    width: 100%;
    float: left;
    text-align: center;
  }
  nav>ul {
    margin-top: 50px;
    padding: 0;
    display: block;
    list-style: none;
  }
  nav>ul>li,
  nav>ul>li>a {
    line-height: 50px;
    display: list-item;
    margin-left: 0;
  }
  .hamburger {
    padding: 20px;
    display: block;
    float: left;
    text-align: center;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
  }
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
  nav {
    width: 100%;
    float: left;
    text-align: center;
  }
  nav>ul {
    margin-top: 50px;
    padding: 0;
    display: block;
    list-style: none;
  }
  nav>ul>li,
  nav>ul>li>a {
    line-height: 50px;
    display: list-item;
    margin-left: 0;
  }
  .hamburger {
    padding: 20px;
    display: block;
    float: left;
    text-align: center;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
  }
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <span class="hamburger"><i class="fa fa-bars" aria-hidden="false"></i></span>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="students.html">Students</a></li>
    <li><a href="parents.html">Parents</a></li>
    <li><a href="athletics.html">Athletics</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Answer 1

首先，汉堡图标确实显示在宽屏幕上。但是，它的样式仅适用于小屏幕，因此在宽屏幕上它居中且为黑色，在深灰色背景上不容易看到。

其次，您提供的用例（在小屏幕上打开网站，隐藏菜单，然后加宽屏幕）在测试情况之外不是很常见，所以这不是一个很大的问题。但是，您可以使用新的媒体查询来解决它：

@media only screen and (min-width: 768px) {
  nav>ul {
    display: block!important; /* This forces the browser to apply this rule and show the menu, even if the inline css says to hide it */
  }
  nav>.hamburguer {
    display: none; /* This hides the hamburguer icon */
  }
}

Answer 2

所以我想声明，除非满足指定的尺寸，否则您的 css 是隐藏的。由于 "full-screen" 模式不在这些维度下，因此 css 不适用。

@media only screen and (max-width: 768px) and (min-width: 320px)
js:94
.hamburger {
padding: 20px;
display: block;
float: left;
text-align: center;
color: #fff;
font-size: 24px;
cursor: pointer;
}

这是在您的 "mobile" 模式下应用的内容，为以上所有内容设置另一个媒体参数（max-width: 768px、min-width: 320px）。

PS：你做得很好，继续努力。

为什么我的汉堡包导航在桌面模式下无法加载？

Why is my hamburger navigation not loading when its in desktop mode?

html

css

jquery

hamburger-menu