Как я могу реализовать переключение меню гамбургера с чистым CSS и ванильным JavaScript? (JSH2) ⇐ Html

[Anonymous]

Я строю простую отзывную навигационную панель, которая падает в кнопку «Гамбургер» на маленьких экранах. Когда пользователь нажимает кнопку, я хочу переключить видимость меню. Вот мой код:
css < /p>
.navbar {
position: relative;
padding: 0.5rem 1rem;
background: #333;
}

/* hamburger ikon */
.hamburger {
background: none;
border: none;
width: 30px;
height: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}
.hamburger span {
display: block;
height: 4px;
background: #fff;
border-radius: 2px;
}

.menu {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #444;
display: none;
flex-direction: column;
}
.menu li {
padding: 0.75rem;
border-bottom: 1px solid #555;
}
.menu li:last-child {
border-bottom: none;
}
.menu a {
color: #fff;
text-decoration: none;
}

.menu.open {
display: flex;
}
< /code>
html < /p>





[*]
Document

• Kezdőlap
• Rólunk
• Szolgáltatások
• Kapcsolat

const btn = document.getElementById('hamburger');
const menu = document.getElementById('menu');

btn.addEventListener('click', () => {
menu.classList.toggle('open');
});



< /code>
Чего я пытаюсь достичь: < /p>
Список .menu должен быть скрыт по умолчанию и появляется только при добавлении .Open. < /p>
Нажимая кнопку, включающие открытый класс. Горизонтально по умолчанию, и кнопка гамбургера скрыта.
Вопросы:
Это самый простой, наиболее поддерживаемый шаблон для переключения отзывчивого выпадающего меню без внешних библиотек? /> Как я могу плавно оживить меню, появляющееся/исчезающее, используя только CSS?>

Подробнее здесь: https://stackoverflow.com/questions/796 ... nd-vanilla