我无法实现解决方案(CSS或JS(，因此单击<a>链接后，我可以关闭以下导航菜单。我尝试过在不使用div和nav的情况下保持极简主义，但很难实现最终目标。
我的Codepen示例
我研究了多个例子，包括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>这里需要javascript，为此我对您的代码做了一些更改
- 在HTML中，我为所有导航链接添加了公共类
.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()函数获取类为a.nav-link的所有链接 - CCD_ 6将CCD_ 7元素集合转换为数组，然后使用CCD_
- 然后，为每个元素添加一个点击事件侦听器，它将确保复选框处于未选中状态(如果选中，则切换为未选中(，并且动画将启动
以下是工作示例：
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>