html - 仅使用 CSS 的内部选项菜单切换

Question

我正在尝试创建一个包含选项的菜单。我只使用带有 checkbox 和 radio 输入的 CSS。

通过更改其中一个选项，我还希望菜单关闭。我尝试在 label 中使用 label，但它不起作用。我的原型(prototype)代码:

input {
  display: none;
}

label {
  cursor: pointer;
}

label span:hover {
  font-weight: 600;
}

.opener .menu {
  background-color: #f3f3f3;
  display: flex;
  flex-direction: column;
  color: #4d4d4d;
  padding: 12px 4px;
  width: 270px;
}

#menu:checked~.opener .menu {
  display: none;
}

#menu~.opener>span:nth-of-type(1) {
  display: none;
}

#menu:~.opener>span:nth-of-type(2) {
  display: block;
}

#menu:checked~.opener>span:nth-of-type(1) {
  display: block;
}

#menu:checked~.opener>span:nth-of-type(2) {
  display: none;
}

.box {
  height: 50px;
  width: 50px;
  margin: 20px 0;
}

#red:checked~.box {
  background-color: red;
}

#blue:checked~.box {
  background-color: blue;
}

#green:checked~.box {
  background-color: green;
}

<input id="menu" type="checkbox"></input>
<input id="red" type="radio" name="opcoes" checked></input>
<input id="blue" type="radio" name="opcoes"></input>
<input id="green" type="radio" name="opcoes"></input>

<label class="opener" for="menu"><span>Open</span><span>Close</span>
      <div class="menu">
        <label for="red"><span>red</span></label>
<label for="blue"><span>blue</span></label>
<label for="green"><span>green</span></label>
</div>
</label>

<div class="box"></div>

或者您可以在这里查看:https://codepen.io/anon/pen/JxzPKR

在没有 JavaScript 的情况下单击其中一个选项时，有没有办法关闭菜单？

Answer 1

有时，与流行观点相反，使用 Javascript 对开发人员更友好。

对于纯 CSS 解决方案而言，有太多的条件逻辑。您必须满足 ~3 个 if-then-else 条件，同时保持样式级联。我认为要满足的最艰巨的任务是您有一个切换标题，以及切换它的其他控件。

添加的组件越多，这自然会变得更加复杂和令人费解。但这里有一个使用 :target 的例子。这是一种解决方法，可以解决手头的问题。您将无法通过这种方式“切换”菜单，因此我不得不在元素下方添加标题，以便可以通过某种同级选择器访问它:

.menu {
  position: relative;
  width: 45%;
}
input[type="radio"] {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}
a:any-link {
  all: unset;
}
.menu-header {
  position: absolute;
  top: 0;
  padding: 5px 10px;
  color: white;
  width: 100%;
  background-color: cornflowerblue;
}
.menu-header a {
  font-weight: bold;
  cursor: pointer;
  color: white;
  font-size: 22px;
}
.menu-header .close {
  display: none;
}
#menu-body {
  display: none;
  flex-flow: column nowrap;
  position: absolute;
  top: 34px;
  background-color: rgba(220,220,220,1);
  height: 100px;
  color: black;
  width: 100%;
  padding: 10px;
}

.menu-header a,
#menu-body label {
  cursor: pointer;
}

#menu-body:not(:target) {
  display: none;
}
#menu-body:not(:target) + .menu-header > a:not(.close) {
  display: inline-block;
}
#menu-body:target {
  display: flex;
}
#menu-body:target + .menu-header > a {
  display: none;
}
#menu-body:target + .menu-header > a.close {
  display: inline-block;
}

<div class="menu">  
  
  <div id="menu-body">  
    <input id="red" type="radio" name="opcoes" checked/>
    <label for="red"><a href="#">Red</a></label>  
    <input id="blue" type="radio" name="opcoes"/>
    <label for="blue"><a href="#">Blue</a></label>
    <input id="green" type="radio" name="opcoes"/>  
    <label for="green"><a href="#">Green</a></label>
  </div>  
   
  <div class="menu-header"><a href="#menu-body">&equiv; Open</a><a href="#" class="close">&equiv; Close</a></div>   
</div>

您应该考虑使用此方法的可访问性，或者至少考虑这对网站导航的影响。

---

编辑:关于评论讨论的演示:

.menu {
  position: relative;
  width: 45%;
}
input[type="radio"] {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}
a:any-link {
  all: unset;
}
#menu-header {
  position: absolute;
  top: 0;
  padding: 5px 10px;
  color: white;
  width: 100%;
  background-color: cornflowerblue;
}
#menu-header a {
  font-weight: bold;
  cursor: pointer;
  color: white;
  font-size: 22px;
}
#menu-header .close {
  display: none;
}
#menu-body {
  display: none;
  flex-flow: column nowrap;
  position: absolute;
  top: 34px;
  background-color: rgba(220,220,220,1);
  height: 100px;
  color: black;
  width: 100%;
  padding: 10px;
}

.menu-header a,
#menu-body label {
  cursor: pointer;
}

#menu-body:not(:target) {
  display: none;
}
#menu-body:not(:target) ~ .menu-header > a:not(.close) {
  display: inline-block;
}
#menu-body:target {
  display: flex;
}
#menu-body:target ~ #menu-header > a {
  display: none;
}
#menu-body:target ~ #menu-header > a.close {
  display: inline-block;
}

#red:target ~ .box {
  background-color: red;
}
#blue:target ~ .box {
  background-color: blue;
}
#green:target ~ .box {
  background-color: green;
}
.box {
  background-color: black;
  width: 75px; height : 75px;
}

<div class="menu">  
  
  <input id="red" type="radio" name="opcoes" checked/>
  <input id="blue" type="radio" name="opcoes"/>
  <input id="green" type="radio" name="opcoes"/> 
    
  <div id="menu-body">  
    <a href="#red">Red</a>
    <a href="#blue">Blue</a>
    <a href="#green">Green</a>
  </div>  
   
  <div class="box"></div> 
  <div id="menu-header">
    <a href="#menu-body">&equiv; Open</a>
    <a href="#" class="close">&equiv; Close</a>
  </div>   
</div>