function menuToggle() { document.getElementById('navbar').style.display = 'flex'; } 
 header { text-align: right; } header>i.header__menu-toggle { display: inline-block; margin: 20px; } ul { border-bottom: 1px #dadad8 solid; display: none; } ul>a { height: 165px; display: flex; justify-content: space-around; align-items: center; flex: 1 1 384px; text-align: center; } ul>a.header__item-active { background-color: rgba(45, 204, 176, 0.25); } ul>a:hover { background-color: rgba(45, 204, 176, 0.25); } 
 <header> <button class="header__menu-toggle" onclick="menuToggle()">Menu</button> <nav> <ul id="navbar"> <a href=""> <li>Link</li> </a> <a href=""> <li>Link</li> </a> <a href=""> <li>Link</li> </a> </ul> </nav> </header>

There is such a code. I was able to open the menu, but I can’t understand how to close it.

    1 answer 1

    Check for display display type. If it is flex , then you need to change it to none , otherwise - put it.

     function menuToggle() { var navBar = document.getElementById('navbar'); navBar.style.display = (navBar.style.display == 'flex') ? 'none' : 'flex'; } 
     header { text-align: right; } header>i.header__menu-toggle { display: inline-block; margin: 20px; } ul { border-bottom: 1px #dadad8 solid; display: none; } ul>a { height: 165px; display: flex; justify-content: space-around; align-items: center; flex: 1 1 384px; text-align: center; } ul>a.header__item-active { background-color: rgba(45, 204, 176, 0.25); } ul>a:hover { background-color: rgba(45, 204, 176, 0.25); } 
     <header> <button class="header__menu-toggle" onclick="menuToggle()">Menu</button> <nav> <ul id="navbar"> <a href=""> <li>Link</li> </a> <a href=""> <li>Link</li> </a> <a href=""> <li>Link</li> </a> </ul> </nav> </header>

    • Thank you very much) Sorry, but how to make the menu close not only when you press the button, but also when you press the screen in any part except the menu? - Nikita Knyazev
    • one
      @NikitaKnyazev ru.stackoverflow.com/a/670046/191482 .... only a couple of moments with jquery replaced with pure js - Alexey Shimansky
    • Thank you, once again) Very much helped out - Nikita Knyazev