Question

我正在尝试为移动设备设置一个导航栏，该导航栏仅在您单击图标时显示。我正在尝试使用隐藏的复选框来执行此操作，但是列表/导航不起作用。我知道可以用JavaScript做到这一点，但这是针对一个项目的，我只能使用HTML和CSS。这是代码：

.fa-bars {
  float: right;
  margin-right: 19px;
  margin-top: 16px;
}

.navegador ul {
  font-family: $font-texto;
  float: right;
  text-transform: uppercase;
  list-style-type: none;
  text-decoration: none;
  color: inherit;
  display: none;
}

.oculto {
  display: none;
}

input[type="checkbox"]:checked {
  .navegador ul {
    display: block;
  }
}

.navegador a {
  text-decoration: none;
  color: inherit;
}

.logo {
  float: left;
  margin-left: 16px;
  position: relative;
  margin-top: 10px;
}

<div class="navegador">
  <img src="assets/logo.svg" alt="logo" class="logo">
  <nav>
    <label id="barras">
        <input type="checkbox" id ="barras" class="oculto">
        <i class="fas fa-bars"></i></label>
    <ul class="menu-lista">
      <li><a href="#episodios">Episodios</a></li>
      <li><a href="#">Nosotros</a></li>
      <li><a href="#">Entrevistas</a></li>
      <li><a href="#">Tópicos</a></li>
      <!-- Arreglar la nav en desktop (se ve muy a la izquierda y vertical) -->
    </ul>
  </nav>
</div>

CSS：选中的选择器不显示导航

0 个答案: