关闭 CSS 全屏菜单 onclick

Question

我无法实施解决方案（CSS 或 JS）所以我可以关闭单击 <a> [=32= 后的以下导航菜单].我试图在不使用 div 和导航的情况下保持简约，但很难实现最终目标。

我研究了多个例子，包括 1, 2, 3 但没有成功。你能给我指出正确的方向或帮帮我吗？

*, *:before, *:after {
  box-sizing: border-box;
}
body {
  font-family: "Verdana", serif;
  font-size: 1.2em;
  overflow-x: hidden;
}
label .menu {
  position: fixed;
  right:-45px;
  top: -45px;
  z-index: 100;
  width: 120px;
  height: 120px;
  background: #F7CC26;
  border-radius:50%;
  transition: 0.5s ease-in-out;
  box-shadow: 0 0 0 0 #072C7D, 0 0 0 0 #072C7D;
  cursor: pointer;
}

label .ha {
  position: absolute;
  top: 75px;
  left: 24px;
  width: 30px;
  height: 2.5px;
  background: #fff;
  display: block;
  transform-origin: center;
  transition: 0.5s ease-in-out;
}
label .ha:after, label .ha:before {
  transition: 0.4s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #9CBEE3;
}
label .ha:before {
  top: -10px;
}
label .ha:after {
  bottom: -10px;
}
label input {
  display: none;
}
label input:checked + .menu {
  box-shadow: 0 0 0 100vw #F7CC26, 0 0 0 100vh #F7CC26;
  border-radius: 0;
}
label input:checked + .menu .ha {
  transform: rotate(45deg);
}
label input:checked + .menu .ha:after {
  transform: rotate(90deg);
  bottom: 0;
}
label input:checked + .menu .ha:before {
  transform: rotate(90deg);
  top: 0;
}
label input:checked + .menu + ul {
  opacity: 1;
}
label input:checked + .menu2 + ul{opacity:0}

label ul {
  z-index: 200;
  list-style-type: none;
  position: fixed;
  text-align:center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.25s 0s ease-in-out;
}
label a {
  margin-bottom: 1em;
  display: block;
  color: #9CBEE3;
  text-decoration: none;
}

<label>
<input type="checkbox"></input>
<span class="menu">
<span class="ha"></span>
</span>
<ul>
<li><a href="#intro">Intro</a></li>
<li><a href="#educ">About</a></li>
<li><a href="#free">Free Samples</a></li>
<li><a href="#video">Video Review</a></li>
<li><a href="#books">Other Books</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</label>

<div id="free">Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively. Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively. Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively.</div>
<br>
<div id="video">Wikis, chat messages, or formal documentation for knowledge management aren’t effective. Our question and answer format is a proven approach for accessing the right information in less time.</div><br>
<div id="intro">Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively. Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively. Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively.</div>
<br>
<div id="educ">Wikis, chat messages, or formal documentation for knowledge management aren’t effective. Our question and answer format is a proven approach for accessing the right information in less time.</div><br>
<div id="books">Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively. Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively. Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively.</div>
<br>
<div id="contact">Wikis, chat messages, or formal documentation for knowledge management aren’t effective. Our question and answer format is a proven approach for accessing the right information in less time.</div>

Answer 1

你需要javascript，为此我对你的代码做了一些改动

在 HTML 中，我为所有导航链接添加了通用 class 作为 .nav-link。
并添加了以下 javascript 代码：

function addListenersToLinks() {
  const navLinks = document.querySelectorAll('a.nav-link');
  
  Array.from(navLinks).forEach(navLink => {
    navLink.addEventListener('click', event => {
      document.querySelector('#menu-checkbox').checked = false;
    })
  })  
}

document.body.onload = addListenersToLinks();

我在这里创建了一个函数，作为 addListenersToLinks()，它在加载 body 元素时调用。以下是对函数定义的解释。

此函数使用 document.querySelectorAll() 函数获取所有 class 为 a.nav-link 的链接。
Array.from(navLinks) 将 navLinks 元素集合转换为数组，然后使用 forEach.
然后为每个元素添加一个点击事件侦听器，它将确保复选框处于未选中状态（如果选中，则切换为未选中）并且动画将启动。

这是工作示例：

function addListenersToLinks() {
  const navLinks = document.querySelectorAll('a.nav-link');
  
  Array.from(navLinks).forEach(navLink => {
    navLink.addEventListener('click', event => {
      document.querySelector('#menu-checkbox').checked = false;
    })
  })  
}

document.body.onload = addListenersToLinks();

*, *:before, *:after {
  box-sizing: border-box;
}
body {
  font-family: "Verdana", serif;
  font-size: 1.2em;
  overflow-x: hidden;
}
label .menu {
  position: fixed;
  right:-45px;
  top: -45px;
  z-index: 100;
  width: 120px;
  height: 120px;
  background: #F7CC26;
  border-radius:50%;
  transition: 0.5s ease-in-out;
  box-shadow: 0 0 0 0 #072C7D, 0 0 0 0 #072C7D;
  cursor: pointer;
}

label .ha {
  position: absolute;
  top: 75px;
  left: 24px;
  width: 30px;
  height: 2.5px;
  background: #fff;
  display: block;
  transform-origin: center;
  transition: 0.5s ease-in-out;
}
label .ha:after, label .ha:before {
  transition: 0.4s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #9CBEE3;
}
label .ha:before {
  top: -10px;
}
label .ha:after {
  bottom: -10px;
}
label input {
  display: none;
}
label input:checked + .menu {
  box-shadow: 0 0 0 100vw #F7CC26, 0 0 0 100vh #F7CC26;
  border-radius: 0;
}
label input:checked + .menu .ha {
  transform: rotate(45deg);
}
label input:checked + .menu .ha:after {
  transform: rotate(90deg);
  bottom: 0;
}
label input:checked + .menu .ha:before {
  transform: rotate(90deg);
  top: 0;
}
label input:checked + .menu + ul {
  opacity: 1;
}
label input:checked + .menu2 + ul{opacity:0}

label ul {
  z-index: 200;
  list-style-type: none;
  position: fixed;
  text-align:center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.25s 0s ease-in-out;
}
label a {
  margin-bottom: 1em;
  display: block;
  color: #9CBEE3;
  text-decoration: none;
}

<label>
<input id="menu-checkbox" type="checkbox"></input>
<span class="menu">
<span class="ha"></span>
</span>
<ul>
<li><a class="nav-link" href="#intro">Intro</a></li>
<li><a class="nav-link" href="#educ">About</a></li>
<li><a class="nav-link" href="#free">Free Samples</a></li>
<li><a class="nav-link" href="#video">Video Review</a></li>
<li><a class="nav-link" href="#books">Other Books</a></li>
<li><a class="nav-link" href="#contact">Contact Us</a></li>
</ul>
</label>

<div id="free">Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively. Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively. Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively.</div>
<br>
<div id="video">Wikis, chat messages, or formal documentation for knowledge management aren’t effective. Our question and answer format is a proven approach for accessing the right information in less time.</div><br>
<div id="intro">Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively. Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively. Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively.</div>
<br>
<div id="educ">Wikis, chat messages, or formal documentation for knowledge management aren’t effective. Our question and answer format is a proven approach for accessing the right information in less time.</div><br>
<div id="books">Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively. Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively. Our mission is to help developers write the script of the future. This means helping you find and hire skilled developers for your business and providing them the tools they need to share knowledge and work effectively.</div>
<br>
<div id="contact">Wikis, chat messages, or formal documentation for knowledge management aren’t effective. Our question and answer format is a proven approach for accessing the right information in less time.</div>

关闭 CSS 全屏菜单 onclick

Close CSS full screen menu onclick

html

javascript

css

menu

onclick