Основное c меню бургера можно получить, выполнив следующие шаги:
1) Создайте класс с бургер-меню в качестве предыдущего элемента-брата навигации, на которой вы хотите скрыть ширина экрана мобильного телефона.
a) Вы не хотите, чтобы это отображалось на носителях рабочего стола, поэтому в css введите его как display: none;
2) Создайте медиазапрос для нужного устройства. Скажем, 480px для мобильного устройства.
3) В этом медиазапросе стиль навигации, который вы хотите отображать при наведении (или нажатии), как display: none;
4) В этом медиа запрос, стиль вашего бургер-меню. В моем примере я изобразил что-то очень простое c по временным причинам, но вы можете исследовать использование диапазонов для создания адаптивного бургерного меню.
5) В этом медиазапросе объявите псевдо при наведении курсора. -класс для вашего бургер-меню, которое обращается к скрытой навигации. Так как вы поместили бургер-меню в качестве предыдущего родственного элемента вашей навигации, вы можете использовать правило + css для его нацеливания следующим образом:
.burger-menu:hover + .menu {
}
Это означает, что когда при наведении курсора на меню бургера, вы будете влиять на css .menu. Вы можете указать, как стили .menu будут затронуты в селекторе CSS.
Вот базовый c пример того, как этот процесс работает с вашим кодом.
Добавьте это к ваш html, перед вашим .menu <div>
<div class="burger-menu"></div>
<div class="menu">
Добавьте это к вашему css файлу, внизу
.burger-menu {
display: none;
}
@media (max-width: 480px) {
.menu {
display: none;
}
.burger-menu {
display: block;
background-color: white;
height: 30px;
width: 30px;
position: fixed;
top: 10px;
right: 10px;
}
.burger-menu:hover + .menu {
display: block;
}
}
Как правило, вы продвигаете это с помощью toggleClass с помощью JQuery для добавления и удаления отображения в вашем меню навигации при нажатии на меню бургера.
Ps преимущество использования интервалов для создания вашего бургер-меню будет тогда, когда вы хотите, чтобы оно имело хорошую анимацию, изменяя от меню бургера до креста или стрелки и т. д. c.