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

首先，hamburguer图标确实显示在宽屏幕上。然而，它的造型仅适用于小屏幕，因此在宽屏上它的中心和黑色，在深灰色背景下不容易看到。

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

@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是隐藏的，除非符合指定的尺寸。由于“全屏”模式不在这些维度下，因此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;
}

这是在“移动”模式下应用的内容，为上述所有内容（max-width: 768px，min-width: 320px）提供了另一个媒体参数。

PS：你做得很好，坚持下去。

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

2 个答案: