Как скрыть меню?

Question

Помогите скрыть меню на чистом JS. На мобильной версии не исчезает, только если опять по бургер меню кликать.

.burger-menu
    display:  none
.menu-btn

    display: flex
    align-items: center
    position: absolute
    top: 0
    right:0
    width: 20px
    height: 20px
    cursor: pointer
    z-index: 1

 
.menu-btn > span,
.menu-btn > span::before,
.menu-btn > span::after 

    display: block
    position: absolute
    width: 100%
    height: 2px
    background-color: #616161
    transition-duration: .25s

.menu-btn > span::before 
    content: ''
    top: -8px

.menu-btn > span::after 
    content: ''
    top: 8px

.menubox
    display: block
    position: fixed
    visibility: hidden
    top: 0
    left: -100%
    width: 200px
    height: 100%
    margin: 0
    padding: 80px 0
    list-style: none
    background-color: #FFF5F4
    box-shadow: 1px 0px 6px rgba(0, 0, 0, .2)
    transition-duration: .25s
.menu-item 
    display: block
    padding: 12px 24px
    color: #333
    font-family: 'Snell Roundhand'
    font-size: 20px
    font-weight: 600
    text-decoration: none
    transition-duration: .25s

.menu-item:hover 
    background-color: #CFD8DC

 
 
#menu-toggle
    opacity: 0

 
#menu-toggle:checked ~ .menu-btn > span
    transform: rotate(45deg)

#menu-toggle:checked ~ .menu-btn > span::before
    top: 0
    transform: rotate(0)

#menu-toggle:checked ~ .menu-btn > span::after
    top: 0
    transform: rotate(90deg)

#menu-toggle:checked ~ .menubox
    visibility: visible
    left: 0

<div class="burger-menu">
    <input id="menu-toggle" type="checkbox" />
    <label class="menu-btn" for="menu-toggle">
      <span></span>
    </label>
 
    <ul class="menubox">
            <li><a class="menu-item" href="#about">О нас</a></li>
            <li><a class="menu-item" href="#service">Услуги</a></li>
            <li><a class="menu-item" href="#specialist">Специалисты</a></li>
            <li><a class="menu-item" href="#advantage">Наши преимущества</a></li>
            <li><a class="menu-item" href="#planet">Галлерея</a></li>
    </ul>
  </div>

Answer 1

добавьте новый класс, например:

.menu-hidden {
    display: none;
}

и переключайте его (добавлен к элементу, убран из элемента)

let menu = document.querySelector('.menubox');

menu.classList.toggle('menu-hidden');

или добавляйте

menu.classList.add('menu-hidden');

а когда надо - удаляйте

menu.classList.remove('menu-hidden');

БЛОГ НА HUSL

Как скрыть меню?

Ответы (1 шт):