从 CSS 关闭汉堡菜单答案

【问题标题】：Closing hamburger menu from CSS从 CSS 关闭汉堡菜单
【发布时间】：2019-04-05 13:57:23
【问题描述】：

我有一个内置在 CSS 中的汉堡菜单，但我需要在您单击链接时关闭它。它只是一个带有锚链接的 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;
  }

由于编码经验有限，我在这个方面有点挣扎。

谢谢

【问题讨论】：

你想避免 JavaScript 吗？
你能清楚地解释你的冲突吗？
Monoj Kumar 7 - 理想情况下是的，但是当您单击菜单内的链接之一时，可以做任何需要关闭我的汉堡菜单的操作。 core114 - 我的网站是 www.thewritedesign.co.uk 来了解我的问题

标签： html css mobile hyperlink anchor

【解决方案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

【讨论】：