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

[Anonymous]

Я строю простую отзывную навигационную панель, которая падает в кнопку «Гамбургер» на маленьких экранах. Когда пользователь нажимает кнопку, я хочу переключить видимость меню. Вот мой код: < /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>






[*]
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>
< /div>
< /div>
< /p>
Чего я пытаюсь достичь:

-Список .menu < /code> должен быть скрыт по умолчанию и появляется только при. />
-на более широких экранах (например, на рабочем столе) я планирую переопределить CSS, чтобы .menu < /code> по умолчанию отображается горизонтально, а кнопка гамбургера скрыта. < /p>
Вопросы: < /h4>
-это простой, наиболее подходящая картина для перегрузки. />
Есть ли какие -либо улучшения доступности, которые я должен добавить (например, атрибуты ARIA), когда переключать состояние меню?>

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