点击菜单链接后，如何关闭这个纯CSS移动菜单？我尝试将它们包裹在<label for="nav-collapse"><a>...</a></label>中，就像关闭按钮一样（有效），但无济于事。< / p>
http://codepen.io/anon/pen/PwEBaM
基于http://www.scottohara.me/article/morph-button-updated.html
*, *::after, *::before {
box-sizing: border-box;
font-family: arial;
line-height: 2;
margin: 0; }
body {
background: #444;
overflow-x: hidden; }
p {
margin-bottom: 24px; }
p:last-child {
margin-bottom: 0; }
.content {
margin: auto;
max-width: 1000px;
padding: 20px; }
.invis {
height: 1px;
left: -999px;
position: absolute;
top: -999px;
visibility: hidden;
width: 1px; }
.main-base {
background: #eee;
left: 0px;
position: relative;
transition: all .3s; }
.main-base header, .main-base footer {
background: #888;
color: #fff; }
footer a {
color: #fff; }
.nav-side {
background: #56cee8;
color: #fff;
top: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
height: 60px;
left: 20px;
overflow: hidden;
padding: 8px 0;
position: fixed;
transition: all .3s;
width: 60px;
z-index: 2; }
.menu-list {
height: 0%;
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
transition: all .3s; }
.menu-list a {
border-bottom: 1px solid #eee;
color: #222;
display: block;
padding: 12px 8px;
text-decoration: none; }
.menu-list a:hover {
background: rgba(0, 0, 0, 0.5); }
.btn-label {
cursor: pointer;
display: block;
height: 60px;
width: 60px;
position: absolute;
top: 0;
left: 0; }
.btn-label .top {
height: 3px;
background-color: #fff;
position: absolute;
top: 12px;
left: 12px;
right: 12px;
}
.btn-label .middle {
height: 3px;
background-color: #fff;
position: absolute;
top: 22px;
left: 12px;
right: 12px;
}
.btn-label .bottom {
height: 3px;
background-color: #fff;
position: absolute;
top: 32px;
left: 12px;
right: 12px;
}
.btn-label .label {
text-align: center;
position: absolute;
bottom: 2px;
left: 0;
right: 0;
font-size: 12px;
}
#nav-expand:checked + .nav-side .btn-label {
display: none;
}
.close {
cursor: pointer;
text-align: right;
padding-right: 15px;
line-height: 30px;
font-size: 30px;
cursor: hand;
cursor: pointer;
display: none;
height: 40px;
border-bottom: 1px solid #fff; }
#nav-expand:checked + .nav-side .close {
display: block;
}
#nav-expand:checked + .nav-side {
bottom: 0;
height: 100%;
left: 0;
width: 200px; }
#nav-expand:checked + .nav-side .menu-list {
height: 100%; }
#nav-expand:checked + .nav-side .btn-label {
color: transparent;
display: inline-block;
height: 20px;
line-height: 20px;
text-align: center;
width: 20px; }
#nav-expand:checked + .nav-side + .main-base {
left: 200px; }
#nav-collapse + .main-base {
left: 200px; }
#nav-collapse + .main-base > .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
opacity: 1;
transition: opacity .3s; }
#nav-collapse:checked + .main-base {
left: 0; }
#nav-collapse:checked + .main-base > .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 0;
width: 0;
opacity: 0; } <div class="page">
<input type="radio" id="nav-expand" name="nav" class="invis" />
<nav class="nav-side">
<label for="nav-collapse" class="close">
×
</label>
<label for="nav-expand" class="btn-label">
<span class="top"></span><span class="middle"></span><span class="bottom"></span><span class="label">MENU</span>
</label>
<ul class="menu-list">
<li>
<label for="nav-collapse">
<a href="#!" title="descriptive title">
Link Label
</a>
</label>
</li>
<li>
<label for="nav-collapse">
<a href="#!" title="descriptive title">
ಠ_ಠ Link Label
</a>
</label>
</li>
</ul>
</nav>
<input type="radio" id="nav-collapse" name="nav" checked="checked" class="invis" />
<main class="main-base" role="main">
<header class="header-base" role="banner">
<div class="content">
<h1>
Display Sidebar/Settings on Click/Press of Icon
</h1>
</div>
</header>
<article>
<div class="content">
<p>
Bacon ipsum dolor sit amet filet mignon prosciutto ham hock boudin pork chop swine shoulder beef. Flank andouille ground round strip steak pork bacon venison ham hock, tongue turducken. Venison jowl hamburger salami bacon capicola. Chuck ribeye sirloin spare ribs, venison beef t-bone prosciutto swine strip steak. Chuck jowl spare ribs tenderloin prosciutto. Pancetta pork chop venison bacon short ribs porchetta. Short loin short ribs kielbasa biltong t-bone tail brisket porchetta pork pork loin chicken.
</p>
<p>
Pork belly meatball sirloin ribeye pork loin meatloaf. Tongue kielbasa chuck sausage, turducken jerky hamburger t-bone fatback frankfurter pork loin pig venison tail. Sirloin tri-tip kevin shankle salami doner jerky capicola leberkas tongue drumstick. Tongue turkey prosciutto salami tri-tip. Shank doner sirloin landjaeger pancetta beef ribs.
</p>
<p>
Frankfurter pork loin short ribs andouille kevin. T-bone tail pig chuck prosciutto brisket. Landjaeger tail fatback beef porchetta, biltong shoulder turkey shankle kevin jowl pancetta brisket pork belly boudin. Short loin tenderloin swine, hamburger bresaola rump shank ground round ham kielbasa chicken pancetta capicola. Boudin chicken frankfurter, pig kielbasa flank ball tip. Corned beef pastrami landjaeger, meatloaf flank shankle pig meatball chuck pork loin swine.
</p>
<p>
Pork belly meatball sirloin ribeye pork loin meatloaf. Tongue kielbasa chuck sausage, turducken jerky hamburger t-bone fatback frankfurter pork loin pig venison tail. Sirloin tri-tip kevin shankle salami doner jerky capicola leberkas tongue drumstick. Tongue turkey prosciutto salami tri-tip. Shank doner sirloin landjaeger pancetta beef ribs.
</p>
<p>
Frankfurter pork loin short ribs andouille kevin. T-bone tail pig chuck prosciutto brisket. Landjaeger tail fatback beef porchetta, biltong shoulder turkey shankle kevin jowl pancetta brisket pork belly boudin. Short loin tenderloin swine, hamburger bresaola rump shank ground round ham kielbasa chicken pancetta capicola. Boudin chicken frankfurter, pig kielbasa flank ball tip. Corned beef pastrami landjaeger, meatloaf flank shankle pig meatball chuck pork loin swine.
</p>
</div>
</article>
<footer>
<div class="content">
<p>
oh bai
</p>
</div>
</footer>
<label for="nav-collapse" class="overlay"></label>
</main>
</div>
答案 0 :(得分：1)
看起来链接接受了click事件，并且没有将其传递给标签。
如果将标签包装在锚点内，问题就会逆转。菜单崩溃但链接未被跟踪。
我认为你没有运气。
还有另一种方法可以在纯CSS中切换菜单。它不涉及自定义标记，如收音机盒，但有其他缺点。
想法是在打开的菜单链接上使用锚点。
.page-wrap #open-menu {
display: block;
}
.page-wrap #close-menu {
display: none;
}
.page-wrap #open-menu:target {
display: block;
}
.page-wrap #open-menu:target + #close-menu {
display: none;
}
.page-wrap #close-menu:target {
display: block;
}
.page-wrap #close-menu:target + #open-menu {
display: none;
}<div class="page-wrap">
<a id="close-menu" href="#open-menu">Close</a>
<a id="open-menu" href="#close-menu">Open</a>
</div>
请参阅原始问题的改编解决方案：http://codepen.io/manuszep/pen/NPyWqV
由于解决方案依赖于锚点来触发菜单，因此当您单击它时，浏览器将滚动到该锚点。这是你可能不想要的。
如果您将该解决方案用于其他应用程序，则另一个问题是单击页面上的任何其他锚点将停用当前的锚点。
最后，您一次只能有一个活动锚点。
答案 1 :(得分：1)
我正在研究AMP [https://www.ampproject.org/]，我需要一个纯粹的CSS用于我正在研究的网站，我想出了这个。 [目标：移动设备]
检查一下：https://jsfiddle.net/salkamoses/ov1mkasm/
<a href="#something">
<div class="menubutton">
<em class="em1"></em><em class="em2"></em><em class="em3"></em>
</div>
</a>
<div id="something">
<a href="#hide">
<div class="menubuttonclose">
X
</div>
</a>
<p>menu header</p>
<p>menu1</p>
<p>menu2</p>
</div>
的CSS：
#something {
display: none;
position: absolute;
top: 7px;
left: 8px;
}
#hide {
display:none;
}
#hide:target {
display:none;
}
#something:target {
display: block;
}
.em1 {
display: block;
height: 2px;
width: 20px;
background-color: #e81c28;
}
.em2 {
margin-top: 5px;
display: block;
height: 2px;
width: 20px;
background-color: #e81c28;
}
.em3 {
display: block;
margin-top: 5px;
height: 2px;
width: 20px;
background-color: #e81c28;
}
.menubuttonclose
{
background-color: white;
width: 20px;
height: 20px;
}