Question

我有一个内置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 Mobile

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

从CSS关闭汉堡包菜单

1 个答案: