僅使用 CSS 的響應式導航

Question

如何在沒有任何 JavaScript 的情況下僅使用 CSS 為桌面和移動設備創建響應式導航欄。 我想要菜單中的切換功能。

Answer 1

你可以這樣做。

查看代碼筆： https://codepen.io/ikramulhaqdev24/pen/vYLpzQp

在 html 中，編寫以下代碼：

<input type="checkbox" id="toggler" />
<label for="toggler" class="toggler-icons">
    <i class="fas fa-bars" aria-hidden="true"></i>
    <i class="fas fa-times" aria-hidden="true"></i>
</label>

在 CSS 中：

#toggler {
  display: none;
}

.toggler-icons :where(.fa-bars, .fa-times) {
  font-size: 2rem;
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  border: 0.1rem solid #fff;
  display: none;
}

@media (max-width: 768px) {
  .navbar ul {
    position: absolute;
    flex-direction: column;
    top: 99%;
    left: 0;
    right: 0;
    background: #333;
    border-top: 0.1rem solid #ccc;
    transition: all 0.3s linear;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }

  .navbar ul li a {
    margin: 0.5rem;
    margin-left: 2rem;
    padding: 0.5rem;
    display: block;
  }

  .toggler-icons .fa-bars {
    display: block;
  }

  #toggler:checked ~ ul {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  #toggler:checked ~ .toggler-icons .fa-times {
    display: block;
  }

  #toggler:checked ~ .toggler-icons .fa-bars {
    display: none;
  }
}

您可以根據自己的喜好將剪輯路徑替換為變換、顯示...