代码之家 › 专栏 › 技术社区 › Chayton L.

为什么我的汉堡包导航在桌面模式下没有加载?

hamburger-menu css html jquery

Chayton L. · 技术社区 · 8 年前

我正在为我的高中编写一个网站,我正在为网站使用汉堡包导航。当网站缩小到移动模式时,汉堡包就会加载,一切正常。但是如果我关闭汉堡包并将网站恢复到桌面模式,导航就会消失,因为 <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>

2 回复 | 直到 8 年前

delCano 8 年前

首先,汉堡图标做

其次,您所展示的用例(在一个小屏幕上打开站点,隐藏菜单,然后扩大屏幕)在测试环境之外并不常见,因此这不是一个很大的问题。但是,您可以通过一个新的媒体查询来解决这个问题:

@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 */
  }
}

Christopher Karam 8 年前

所以我想声明,除非满足指定的维度,否则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 ).