仅使用 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;
  }
}

您可以根据自己的喜好将剪辑路径替换为变换、显示...