html - 从 CSS 关闭汉堡菜单

Question

我有一个用 CSS 构建的汉堡菜单，但我需要它在您单击链接时关闭。它只是一个带有 anchor 链接的 1 页站点。我试过关注其他人的问题，但我无法让它工作。

导航链接

<nav>
  <label for="toggle">&#9776;</label>
  <input type="checkbox" id="toggle">

  <ul>
      <li><a href="/#services">Services</a></li>
      <li><a href="/#about">About us</a></li>
      <li><a href="/#portfolio">Portfolio</a></li>
      <li><a href="/#reasons-to-choose-us">Reasons to choose us</a</li>
      <li><a href="/#contact">Contact us</a></li>
  </ul>
</nav>

CSS 桌面

nav {
    float: right;
    margin: 38px 0 34px 10px;
}

nav ul li {
    display: inline;
}

nav ul {
    clear: right;
}

nav li a {
    padding: 28px 35px;
}

nav li a:focus {
    text-decoration: none;
}

label {
    margin: 0 30px 0 0;
    font-size:46px;
    line-height: 70px;
    float: right;
    display: none;
}

#toggle {
    display: none;
}

CSS 移动

label {
    display: block;
    cursor: pointer;
    padding-top: 7px;
 }

 nav li a {
    padding: 15px;
    display: block;
    text-align: center;
    border-bottom: 1px solid #eee;
 }

 nav {
    float: none;
    margin: 0;
 }

 nav ul li {
    display: none;
 }

 nav ul li:hover {
    background: #eee;
 }

 nav ul li a:focus {
    background: #eee;
 }

 #toggle:checked + ul li {
    display: block;
    cursor: pointer;
  }

由于编码经验有限，我在这方面有点吃力。

谢谢

Answer 1

用 jquery 回答这个问题:

jsfiddle.net/a9013pLr

$(document).ready(function() {
  $('#toggle').click(function() {
    $('#ulul').toggleClass('open');
  });
});

@media only screen and (max-width:1000px) {
  label {
    display: block;
    cursor: pointer;
    padding-top: 7px;
  }
  nav li a {
    padding: 15px;
    display: block;
    text-align: center;
    border-bottom: 1px solid #eee;
  }
  nav {
    float: none;
    margin: 0;
  }
  nav ul li {
    display: none;
  }
  nav ul li:hover {
    background: #eee;
  }
  nav ul li a:focus {
    background: #eee;
  }
  #toggle {
    display: block!important;
    cursor: pointer;
  }
}

.open {
  display: none!important;
}

nav {
  float: right;
  margin: 38px 0 34px 10px;
}

nav ul li {
  display: inline;
}

nav ul {
  clear: right;
}

nav li a {
  padding: 28px 35px;
}

nav li a:focus {
  text-decoration: none;
}

label {
  margin: 0 30px 0 0;
  font-size: 46px;
  line-height: 70px;
  float: right;
  display: none;
}

#toggle {
  display: none;
}

button {
  width: 30px;
  height: 30px;
  background: green;
}

#ulul {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <label for="toggle">&#9776;</label>
  <button id="toggle"></button>

  <ul class="open" id="ulul">
    <li><a href="/#services">Services</a></li>
    <li><a href="/#about">About us</a></li>
    <li><a href="/#portfolio">Portfolio</a></li>
    <li><a href="/#reasons-to-choose-us">Reasons to choose us</a></li>
      <li><a href="/#contact">Contact us</a></li>
  </ul>
</nav>

检查此链接以获得更好看的解决方案和解释:https://www.w3schools.com/howto/howto_js_sidenav.asp