Мобильная версияМое гамбургер-меню не открывается, когда я нажимаю на него. Кажется, я добавил соответствующий код, но когда я нажимаю на меню, оно не открывается и не показывает элементы навигации:
Вот мой код ниже:
HTML
- ДОМ
- ОБО МНЕ
- ПРОЕКТЫ
- НАВЫКИ
- [url=mailto:me@derrickogole.com]КОНТАКТЫ[/url]
/* Навигация */ .nav { дисплей: гибкий; оправдание-содержание: правильно; } .nav-item { стиль списка: нет; отступ: 12 пикселей; } .nav-ссылка { размер шрифта: 14 пикселей; текстовое оформление: нет; цвет: var (--clr-вторичный); дисплей: блок; } .nav-список { дисплей: гибкий; заполнение: 0; маржа: 0; } .nav-item:hover { отступ: 12 пикселей; } /* Стили гамбургер-меню */ .Кнопка-переключатель { дисплей: нет; /* Скрыть значок гамбургер-меню по умолчанию */ курсор: указатель; } .toggle-button .bar { дисплей: блок; ширина: 25 пикселей; высота: 3 пикселя; цвет фона: var (--clr-вторичный); поле: 5 пикселей авто; переход: 0,4 с; } Медиа-запрос
@media (макс. ширина: 768 пикселей) { .navbar-ссылки { дисплей: нет; /* Скрываем обычные навигационные ссылки */ максимальная высота: 0; переполнение: скрыто; переход: максимальная высота 0,3 с, легкость входа и выхода; /* Добавляем эффект перехода */ } .Кнопка-переключатель { дисплей: блок; /* Показать значок гамбургер-меню */ } /* Оформление значка гамбургер-меню */ .toggle-button .bar { дисплей: блок; ширина: 25 пикселей; высота: 3 пикселя; цвет фона: var (--clr-вторичный); поле: 5 пикселей авто; переход: 0,4 с; } } /* Добавляем стили для меню навигации, когда оно открыто */ .nav.open { гибкое направление: столбец; выровнять-элементы: гибкий старт; цвет фона: #fff; /* Вы можете изменить цвет фона */ } .nav.open .navbar-links { максимальная высота: 500 пикселей; } .nav.open .toggle-button .bar:nth-child(1) { преобразование: поворот (-45 градусов) перевод (-5 пикселей, 6 пикселей); } .nav.open .toggle-button .bar:nth-child(2) { непрозрачность: 0; } .nav.open .toggle-button .bar:nth-child(3) { преобразование: поворот (45 градусов) перевод (-5 пикселей, -6 пикселей); } JS
document.addEventListener("DOMContentLoaded", function () { const MenuToggle = document.querySelector(".toggle-button"); const navbarLinks = document.querySelector(".navbar-links"); MenuToggle.addEventListener("click", function () { navbarLinks.classList.toggle("открыть"); }); }); В чем проблема и как ее устранить самым простым способом - включить отображение меню при нажатии и отображение элементов навигации?
Спасибо.
