仅使用 CSS 汉堡包菜单不起作用

Question

我有以下代码。汉堡包菜单始终显示，无论复选框是否被选中。

input[type=checkbox]:checked .hamburger-menu {
  animation: menu-display 0.3s forwards ease-in-out;
}

@keyframes menu-display {
  from {
    display: none;
  }
  to {
    display: block;
  }
}

<div class='navbar-div-outside'>
  <nav class='navbar'>
    <div class='logo-div'>
      <a href="{% url 'home' %}" class='navbar-brand'>DevByAnirudh</a>
    </div>
    <div class='menu-div'>
      {% block navbar %}{% endblock navbar %}
    </div>
    <div class='nav-icons'>
      <p><a target='_blank' href="https://www.instagram.com/devbyanirudh/"><i class="fab fa-instagram"></i></a></p>
      <p><a target='_blank' href="https://twitter.com/devbyanirudh"><i class="fab fa-twitter"></i></a></p>
      <p><a target='_blank' href="https://www.youtube.com/channel/UCefdYcnQIHbRhPp0N8UIQsw"><i class="fab fa-youtube"></i></a></p>
    </div>
    <!-- hamburger menu part -->
    <div class='hamburger'>
      <label for="checkbox"><i class="fas fa-bars bars"></i></label>
      <input class='checkbox' type="checkbox" id="checkbox">
    </div>
  </nav>
  <!-- end of navbar -->
  <div class='hamburger-menu'>
    <li><a href="{% url 'home' %}">Home</a></li>
    <li><a href="{% url 'BlogListView' %}">Blog</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </div>
</div>

我希望在选中复选框时显示 .hamburger-menu。

Answer 1

问题出在你的cssselect或input[type=checkbox]:checked .hamburger-menu。

select 或 select 是一个带有 class .hamburger-menu 的元素，它位于 input[type=checkbox] 状态为 :checked 的元素内。

您的标记不包含这样的构造（无论如何这都是无效的，因为您实际上不能将内容放入 <input/> 标记中）。

无论如何，即使 select 正确，您也在尝试为 display css 属性制作动画，其中 is not possible.

放弃该动画尝试，您可以使用 JavaScript 到 show/hide 菜单。

let checkbox = document.querySelector('#checkbox');
let menu = document.querySelector('.hamburger-menu');

checkbox.addEventListener('change', (event) => {
  if (event.target.checked === true)
    menu.classList.add('visible');
  else
    menu.classList.remove('visible');
});

.hamburger-menu {
  display: none;
}

.hamburger-menu.visible {
  display: block;
}

<div class='navbar-div-outside'>
  <nav class='navbar'>
    <div class='logo-div'>
      <a href="{% url 'home' %}" class='navbar-brand'>DevByAnirudh</a>
    </div>
    <div class='menu-div'>
      {% block navbar %}{% endblock navbar %}
    </div>
    <div class='nav-icons'>
      <p><a target='_blank' href="https://www.instagram.com/devbyanirudh/"><i class="fab fa-instagram"></i></a></p>
      <p><a target='_blank' href="https://twitter.com/devbyanirudh"><i class="fab fa-twitter"></i></a></p>
      <p><a target='_blank' href="https://www.youtube.com/channel/UCefdYcnQIHbRhPp0N8UIQsw"><i class="fab fa-youtube"></i></a></p>
    </div>
    <!-- hamburger menu part -->
    <div class='hamburger'>
      <label for="checkbox"><i class="fas fa-bars bars"></i></label>
      <input class='checkbox' type="checkbox" id="checkbox">
    </div>
  </nav>
  <!-- end of navbar -->
  <div class='hamburger-menu'>
    <li><a href="{% url 'home' %}">Home</a></li>
    <li><a href="{% url 'BlogListView' %}">Blog</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </div>
</div>

Answer 2

试试这个

input[type=checkbox] ~ .hamburger-menu {
  display: none;
}

input[type=checkbox]:checked ~ .hamburger-menu {
  display: block;
}

<div class='navbar-div-outside'>
  <nav class='navbar'>
    <div class='logo-div'>
      <a href="{% url 'home' %}" class='navbar-brand'>DevByAnirudh</a>
    </div>
    <div class='menu-div'>
      {% block navbar %}{% endblock navbar %}
    </div>
    <div class='nav-icons'>
      <p><a target='_blank' href="https://www.instagram.com/devbyanirudh/"><i class="fab fa-instagram"></i></a></p>
      <p><a target='_blank' href="https://twitter.com/devbyanirudh"><i class="fab fa-twitter"></i></a></p>
      <p><a target='_blank' href="https://www.youtube.com/channel/UCefdYcnQIHbRhPp0N8UIQsw"><i class="fab fa-youtube"></i></a></p>
    </div>
    <!-- hamburger menu part -->
    <div class='hamburger'>
      <label for="checkbox"><i class="fas fa-bars bars"></i></label>
      <input class='checkbox' type="checkbox" id="checkbox">
      <div class='hamburger-menu'>
        <li><a href="{% url 'home' %}">Home</a></li>
        <li><a href="{% url 'BlogListView' %}">Blog</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </div>
    </div>
  </nav>
  <!-- end of navbar -->
</div>

仅使用 CSS 汉堡包菜单不起作用

Hamburger menu not working using CSS only

html

css

animation