Как сделать открывающееся меню для телефонной версии сайта на JavaScript?
Меню это неотъемлемая часть любого сайта. Оно выполняет навигационную функцию и помогает пользователю ориентироваться на сайте. На нашем любимом Хабре оно так же есть и на многих других сайтах. Frontend разработчики знают, что после того, как они сделают страницу для сайта, им нужно протестировать свою страницу на других устройствах: Десктоп, планшет, телефон. Это очень важно, так как при разных расширениях элементы сайта могут вести себя по разному и ломать вёрстку. Очень часто из за маленького расширения экрана на телефоне приходиться делать меню, которые открываются по нажатию на кнопку.
Это очень просто сделать при помощи JavaScript. Для начала нужно написать разметку кнопки и самого меню. Для кнопки можно сделать класс "menu__button", а для меню их сразу два: "menu" и "menu-open". Второй класс будет состоянием меню, которое будет заставлять его быть открытым.
Дальше нужно добавить стили CSS. Стиль для контейнера меню, в нём можно задать свойство display, без него элементы неправильно выстроятся. Настраиваем нашу кнопку, ширину, высоту, границы и конечно же картинку для неё. Настраиваем само меню, тоже делаем размер и границы.
Так же создаём стили для двух состояний нашего меню, открытого и закрытого. В стиле для открытого меню пишем "display: inline-block", у вас может быть другое состояние, главное чтобы меню отображалось корректно.
В стиле для закрытого состояния просто нужно написать "display: none", тогда элемент будет скрыт.
Дальше можете дописать какие-либо стили для других элементов меню по вашему желанию, ну или если вы делаете вёрстку на заказ, то по желанию заказчика.
Теперь нужно сделать так, чтобы кнопка открывала и закрывала наше меню. Пишем строчку, которая проверяет, загружено ли DOM дерево, ну или же разметка.
Дальше ищем нашу кнопку по классу и создаём функцию "menubut", которая будет применяться для всех объектов с этим классом(без этого можно только с элементами по id).
В нашей функции "menubut" проверяем, была ли нажата кнопка, если да, то будет выполняться ещё одна функция.
Ищем наше меню и выполняем функцию "menuopen", которая будет менять класс "menu-open" на "menu-close" и наоборот.
Готово!!! Теперь у нас есть меню и кнопка. На JavaScript мы написали простой скрипт, который путём изменения классов элемента открывает и закрывает наше меню. Можно сделать гораздо сложнее открытие меню, можно сделать так, чтобы оно выезжало, медленно появлялось, увеличивалось и уменьшалось, Много разных эффектов можно применить к меню
