如何使用：使用 css 检查响应式导航栏答案

【问题标题】：how to use :checked for responsive navbar using css如何使用：使用 css 检查响应式导航栏
【发布时间】：2020-12-28 10:42:34
【问题描述】：

我添加了一个带有类 checkButton 的复选框。

      <div class="hamburger">
        <input type="checkbox" id="check"/>
        <label for="check" class="checkButton">
          <i class="fas fa-bars" style="font-size: 35px"></i>
        </label>
      </div>
    </div>
    <div>
      <ul class="navItems">
        <li><a href="#home" class="navItem active">HOME</a></li>
        <li><a href="#services" class="navItem">SERVICES</a></li>
        <li><a href="#projects" class="navItem">PROJECTS</a></li>
        <li><a href="#ourTeam" class="navItem">OUR TEAM</a></li>
        <li><a href="#contact" class="navItem">CONTACT</a></li>
      </ul>
    </div>

然后我添加了一些 CSS 来说明单击时的外观。

    ul{
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        z-index: 0;
        right: 100%;
        background-color: #e54136;
        transition: all .5s;
    }

您能否告诉我如何使用:clicked 并链接它，以便我的ul 在单击checkButton 类时发生变化。这是我所做的，但它不起作用。

    ul{
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        z-index: 0;
        right: 100%;
        background-color: #e54136;
        transition: all .5s;
    }

勾选的时候一定要把right: 0;带入ul。

.checkButton:checked ~ ul{
    right: 0%;
}

【问题讨论】：

ul 放在 html 中的什么位置？勾选复选框后会发生什么？
请告诉我如何正确：0；检查时。 @MajiD
如果你需要在点击时显示菜单，它需要一点点javascript。只需告诉我您的ul 在 html 中的位置，以便我可以帮助您
@MajiD 请立即查看。我已将其添加到问题中。

标签： html css checked unchecked

【解决方案1】：

这应该可行

var check = document.querySelector('.hamburger > .checkButton');
var menu = document.querySelector('.navItems');

check.addEventListener('click', function(e) {
  e.preventDefault();
  menu.classList.toggle('show');
});

ul {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  z-index: 0;
  right: 100%;
  background-color: #e54136;
  transition: all .5s;
}

ul.show {
  right: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<div class="hamburger">
  <button class="checkButton">
      <i class="fas fa-bars"></i>
  </button>
</div>
<ul class="navItems">
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ul>

【讨论】：

【解决方案2】：

General Sibling Combinator 引用左侧元素的同级元素。

您的ul 不是您的input 的兄弟。它是输入的祖父母（或第一个表亲，一旦删除）的兄弟姐妹的孩子。

有no way 可以从input 中选择ul，因此要使其正常工作，您需要重新排列标记。

……但不要。单独的 CSS 不是解决这个问题的好工具。使用 JavaScript。利用 ARIA 等无障碍工具。

【讨论】：

【解决方案3】：

这是一个非常简单的例子，说明它应该如何在没有 JS 的情况下工作：

label {
  cursor:pointer;
}
input +  nav {
  visibility:hidden;
}
input:checked + nav {
  visibility:visible;
}

<label for="a1">Hamburger button, click me</label>
<input type="checkbox" id="a1">
<nav>Hidden menu</nav>

【讨论】：

【解决方案4】：

ul ~p 选择前面有

的每个元素

元素。为了更好地理解，请阅读https://www.w3schools.com/cssref/css_selectors.asp

但是如果你不想使用 jQuery 的 js

这里是带有复选框的代码

ul.navItems{
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        z-index: 0;
        right: 100%;
        background-color: #e54136;
        transition: all .5s;
    }
    .hamburger input:checked + ul.navItems {
        right: 0%;
    }

<div>
    <div class="hamburger">
        <input type="checkbox" id="check"/>
        <ul class="navItems">
            <li><a href="#home" class="navItem active">HOME</a></li>
            <li><a href="#services" class="navItem">SERVICES</a></li>
            <li><a href="#projects" class="navItem">PROJECTS</a></li>
            <li><a href="#ourTeam" class="navItem">OUR TEAM</a></li>
            <li><a href="#contact" class="navItem">CONTACT</a></li>
        </ul>
    </div>
</div>

【讨论】：