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

Posted 2023-03-06

【中文标题】汉堡菜单仅使用 CSS 不起作用

【英文标题】：Hamburger menu not working using CSS only

【发布时间】：2022-01-09 14:13:51

【问题描述】：

我有以下代码。无论复选框是否被选中，汉堡菜单都会一直显示。

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。

【问题讨论】：

我假设您想要汉堡包进入视野时的动画效果。您不能使用 display ，因为它不是动画的，但您可以使用 opacity 使汉堡包更逐渐出现。合适吗？

【参考方案1】：

问题出在您的 css 选择器 input[type=checkbox]:checked .hamburger-menu。

该选择器在状态为:checked 的input[type=checkbox] 元素内选择一个类为.hamburger-menu 的元素。

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

无论如何，即使它会正确选择，您也正在尝试为is not possible 的display css 属性设置动画。

放弃该动画尝试，您可以使用 javascript 显示/隐藏菜单。

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>

【讨论】：

那么，当复选框被选中时，如何选择类hamburger-menu？

您可以使用 css ~ 选择器，但这需要重新构建您的 html（@ANDO Andriamalala 刚刚添加了一个使用它的解决方案）。我建议将 javascript 与菜单的可见性类结合使用。通过这样做，您根本不需要更改您的 html。我添加了一个 sn-p。

【参考方案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>