CSS汉堡菜单不显示菜单

Question

我使用 CHECKBOX 创建了一个纯 CSS 汉堡菜单...但是，当我单击汉堡“复选框”时，它没有显示菜单...。

#menulist { /* Hide Menu when in mobile */
    display: none;
    margin-top: 50px;
    background: #101010;
  }
#btn-chk:checked ~ #menulist { /* This SHOULD show the menu */
    display: block; /* This isn't working ... display remains at "none" */
  }

您可以在此处查看 codepen 上的完整代码： https://codepen.io/jabbamonkey/pen/eYRYzyG

Answer 1

您的 CSS 无法找到包含 input 所在位置的菜单。您需要将其移出toggle div，并更改您的选择器以匹配它。请参阅下面的工作示例。

#mainmenu {
  width: 100%;
  background: #000;
  position: relative;
}
#menulist {
}
#menulist a {
  display: inline-block;
  padding: 10px;
  color: white;
  text-decoration: none;
  text-align: center;
}
#menulist a:hover {
  background: #401408;
}
.toggle {
  display: none;
}
#btn-chk {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  margin: 5px;
}
.toggle label {
  display: inline-block;
  background: rgba(0, 0, 0, 0);
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  user-select: none;
}
.lbl-chk span {
  position: absolute;
  background: white;
  display: block;
  width: 51%;
  height: 6px;
  transition: 0.3s;
}
.lbl-chk span:nth-child(even) {
  left: 50%;
  border-radius: 0px 2px 2px 0px;
}
.lbl-chk span:nth-child(odd) {
  border-radius: 2px 0px 0px 2px;
}
.lbl-chk span:nth-of-type(1),
.lbl-chk span:nth-of-type(2) {
  top: 3px;
}
.lbl-chk span:nth-of-type(3),
.lbl-chk span:nth-of-type(4) {
  top: 17px;
}
.lbl-chk span:nth-of-type(5),
.lbl-chk span:nth-of-type(6) {
  bottom: 3px;
}
.lbl-chk span:nth-of-type(1) {
  transform-origin: top left;
}
.lbl-chk span:nth-of-type(2) {
  transform-origin: top right;
}
.lbl-chk span:nth-of-type(5) {
  transform-origin: bottom left;
}
.lbl-chk span:nth-of-type(6) {
  transform-origin: bottom right;
}
/* #btn-chk:checked ~ label span:nth-child(even) { background: green; }
#btn-chk:checked ~ span:nth-child(odd) { background: yellow; } */
#btn-chk:checked ~ .toggle .lbl-chk span:nth-of-type(1) {
  transform: rotate(45deg);
  top: 3px;
  left: 8px;
}
#btn-chk:checked ~ .toggle .lbl-chk span:nth-of-type(2) {
  transform: rotate(-45deg);
  top: 3px;
  left: calc(50% - 8px);
}
#btn-chk:checked ~ .toggle .lbl-chk span:nth-of-type(3) {
  transform: translateX(-50%);
  opacity: 0;
}
#btn-chk:checked ~ .toggle .lbl-chk span:nth-of-type(4) {
  transform: translateX(50%);
  opacity: 0;
}
#btn-chk:checked ~ .toggle .lbl-chk span:nth-of-type(5) {
  transform: rotate(-45deg);
  bottom: 3px;
  left: 8px;
}
#btn-chk:checked ~ .toggle .lbl-chk span:nth-of-type(6) {
  transform: rotate(45deg);
  bottom: 3px;
  left: calc(50% - 8px);
}

@media (max-width: 768px) {
  #mainmenu {
    height: 50px;
    display: inline-block;
  }
  #menulist a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid #333;
  }
  .toggle {
    display: block;
  }
  #menulist {
    display: none;
    margin-top: 50px;
    background: #101010;
  }
  #btn-chk:checked ~ #menulist {
    display: block!important;
  }
}

<div class="menubar-wrap">
     <div class="menu-bar" id="mainmenu">
        <input type="checkbox" id="btn-chk"/>
      <div class="toggle">
          <label class="lbl-chk" for="btn-chk" onclick>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </label>
        </div>
        <div class="menu" id="menulist">
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
        </div>
    </div>
  </div>

JSFiddle

Answer 2

菜单列表和输入不是兄弟，因为输入是 div 的子项。

如果您将输入设为输入的同级，它将起作用

https://codepen.io/jabbamonkey/pen/eYRYzyG?editors=1100

#mainmenu {
  width: 100%;
  background: #000;
  position: relative;
}

#menulist a {
  display: inline-block;
  padding: 10px;
  color: white;
  text-decoration: none;
  text-align: center;
}

#menulist a:hover {
  background: #401408;
}

#btn-chk {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  display: inline-block;
  background: rgba(0, 0, 0, 0);
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  user-select: none;
  color: white;
}

.lbl-chk span {
  position: absolute;
  background: white;
  display: block;
  width: 51%;
  height: 6px;
  transition: 0.3s;
}

.lbl-chk span:nth-child(even) {
  left: 50%;
  border-radius: 0px 2px 2px 0px;
}

.lbl-chk span:nth-child(odd) {
  border-radius: 2px 0px 0px 2px;
}

.lbl-chk span:nth-of-type(1),
.lbl-chk span:nth-of-type(2) {
  top: 3px;
}

.lbl-chk span:nth-of-type(3),
.lbl-chk span:nth-of-type(4) {
  top: 17px;
}

.lbl-chk span:nth-of-type(5),
.lbl-chk span:nth-of-type(6) {
  bottom: 3px;
}

.lbl-chk span:nth-of-type(1) {
  transform-origin: top left;
}

.lbl-chk span:nth-of-type(2) {
  transform-origin: top right;
}

.lbl-chk span:nth-of-type(5) {
  transform-origin: bottom left;
}

.lbl-chk span:nth-of-type(6) {
  transform-origin: bottom right;
}

#btn-chk:checked ~ .lbl-chk span:nth-of-type(1) {
  transform: rotate(45deg);
  top: 3px;
  left: 8px;
}

#btn-chk:checked ~ .lbl-chk span:nth-of-type(2) {
  transform: rotate(-45deg);
  top: 3px;
  left: calc(50% - 8px);
}

#btn-chk:checked ~ .lbl-chk span:nth-of-type(3) {
  transform: translateX(-50%);
  opacity: 0;
}

#btn-chk:checked ~ .lbl-chk span:nth-of-type(4) {
  transform: translateX(50%);
  opacity: 0;
}

#btn-chk:checked ~ .lbl-chk span:nth-of-type(5) {
  transform: rotate(-45deg);
  bottom: 3px;
  left: 8px;
}

#btn-chk:checked ~ .lbl-chk span:nth-of-type(6) {
  transform: rotate(45deg);
  bottom: 3px;
  left: calc(50% - 8px);
}

@media (max-width: 768px) {
  #mainmenu {
    height: 50px;
    display: inline-block;
  }
  #menulist a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid #333;
  }
  #menulist {
    display: none;
    margin-top: 50px;
    background: #101010;
  }
  #btn-chk:checked ~ #menulist {
    display: block;
  }
}

<div class="menubar-wrap">
     <div class="menu-bar" id="mainmenu">
      <input type="checkbox" id="btn-chk"/>
      <label class="lbl-chk" for="btn-chk">
        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
      </label>
        <div class="menu" id="menulist">
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
            <a href="#">Menu Item</a>
        </div>
    </div>
  </div>