在较大的屏幕尺寸上删除了汉堡菜单答案

【问题标题】：Hamburger Menu removed on larger screen sizes在较大的屏幕尺寸上删除了汉堡菜单
【发布时间】：2021-03-09 14:26:46
【问题描述】：

我为我的网站创建了一个汉堡菜单，我希望它在更大的屏幕尺寸下完全消失。我想在更大的屏幕尺寸上删除我所有导航元素上的 .show 类。当我在更大的屏幕上大小我的汉堡菜单保持打开状态。我不知道这个问题的解决方案是否简单，但我是 js 的资深人士，我不知道如何解决它。 [小汉堡菜单][1]

// Select DOM Items
const menuBtn = document.querySelector('.menu-btn');
const menu = document.querySelector('.nav-menu');
const menuNav = document.querySelector('.nav-ul');
const navItems = document.querySelectorAll('.nav-item');

// Seti Initial State Of Menu
 let showMenu = false;  

menuBtn.addEventListener('click', toggleMenu);

function toggleMenu() {
    if(!showMenu) {
menuBtn.classList.add('close');
menu.classList.add('show');
menuNav.classList.add('show');
navItems.forEach(item => item.classList.add('show'));


// Set menu state
showMenu = true;
    } else {
        menuBtn.classList.remove('close');
        menu.classList.remove('show');
        menuNav.classList.remove('show');
        navItems.forEach(item => item.classList.remove('show'));
        
        // Set Menu State
        showMenu = false;
    }
}

.nav-logo-wrapper {
  .menu-btn {
    position: absolute;
    position: fixed;
    z-index: 3;
    right: 35px;
    top: 100px;
    cursor: pointer;
    @include easeOut;

    .btn-line {
      width: 28px;
      height: 3px;
      margin: 0 0 5px 0;
      background: white;
      @include easeOut;
    }
    //   Rotate Into X With Menu Lines
    &.close {
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: translate(180deg);

      .btn-line {
        // Line 1 - Rotate
        &:nth-child(1) {
          transform: rotate(45deg) translate(5px, 5px);
        }
        // Line 2 - Hide
        &:nth-child(2) {
          opacity: 0;
        }
        // Line 3 - Rotate

        &:nth-child(3) {
          transform: rotate(-45deg) translate(6.5px, -6.5px);
        }
      }
    }
  }
}

<!-- navigation mobile menu -->
    <nav class="nav-menu animate__animated animate__fadeInRight">
        <ul class="nav-ul">
            <li class="nav-item">
            <a class="nav-link  current" href="index.html">
                Home
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link"  href="products.html">
        Products
            </a>
        </li>
         <li  class="nav-item">
             <a class="nav-link" href="#features">
                 About us
             </a>
         </li>
         
         <li  class="nav-item"><a class="nav-link" href="">
        Pricing
         </a></li>
        </ul>
        </nav>

【问题讨论】：

请修复您的 sn-p。它实际上是在返回一个错误。
主要是我对在更大的屏幕尺寸上删除 .show 类感兴趣，我不知道如何修改 js 来做到这一点。
@dickdastardly 您提供的代码不起作用。另外，添加已编译的CSS，而不是未编译的SCSS。

标签： javascript html css responsive hamburger-menu

【解决方案1】：

您是否考虑过为此使用 CSS 媒体查询而不是 JavaScript？

.small {
  display: block;
}
.large {
  display: none;
}

@media only screen 
and (min-width : 500px)  {
  .small {
    display: none;
  }
  .large {
    display: block;
  }
}

<div class="small">Small/medium browser width only</div>
<div class="large">Larger browser width only</div>

这里有一篇关于这个主题的精彩文章：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

【讨论】：