JSFiddle - React, Tailwind, and code Playground

by Юрий Литвиненко

HTML

<nav class="main-nav">
        <div class="main-nav__inner">
            <button class="burger" aria-label="Показать главное меню">
                <span>Показать главное меню</span>
            </button>
        </div>
        <ul class="main-nav__list" id="main-nav__list">
            <li class="main-nav__item"><a class="main-nav__link" href="#">Пункт меню 1</a></li>
            <li class="main-nav__item"><a class="main-nav__link" href="#">Пункт меню 2</a></li>
            <li class="main-nav__item"><a class="main-nav__link" href="#">Пункт меню 3</a></li>
            <li class="main-nav__item"><a class="main-nav__link" href="#">Пункт меню 4</a></li>
        </ul>
    </nav>

CSS

body {
  background-color: #303030;
  margin: 0;
}

.main-nav {
  outline: 1px dotted red;
}

@media (min-width: 1024px) {
  .main-nav .burger {
    display: none;
  }
}

.main-nav__list {
  outline: 1px dotted green;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .main-nav__list {
    display: flex;
    flex-wrap: wrap;
    background-color: red;
  }
}

/*уменьшение высоты меню*/
@media (max-width: 1023px) {
  .main-nav__list--js {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s;
  }
}

/*величение высоты меню*/
@media (max-width: 1023px) {
  .main-nav__list--show {
    max-height: 800px;
    overflow: hidden;
    transition: max-height 1s;
  }
}

.main-nav__link {
  display: block;
  padding: 0.5em 1em;
}

.main-nav__link:hover {
  text-decoration: none;
  background-color: gray;
}

JavaScript

/*Скрипт для открытия-закрытия меню.*/
const btn = document.querySelector('.main-nav .burger'),
    mainNavList = document.querySelector('#main-nav__list');

/*скрываем пункты меню*/
mainNavList.classList.add('main-nav__list--js');

/*=========================*/
/*события по клику на .burger в .main-nav*/
btn.addEventListener('click', function (event) {
    event.preventDefault();

    /*показать .main-nav*/
    mainNavList.classList.toggle('main-nav__list--show');
});