Всем привет!! Для каждого сайта очень важно меню, через которое будет осуществятся навигация по сайту. Но на сайт можно зайти с любого устройства, как с компьютера так и с телефона. И для разных экранов устройств сайт подстраивается и выглядит по разному. На телефоне ширина сайта уменьшается и надо вместить туда все. Изменяется вид элементов, они изменяются в размере, расположении, и иногда бывает так, что на мобильных устройствах они не отображаются вообще.
Так же на мобильных версиях сайтов очень часто меняется меню. Оно больше не отображается открыто на экране, а сворачивается и открывается по нажатию на кнопку. Многие Frontend разработчики сталкиваются с этим, когда верстают страницу и приходит время делать её под экраны телефонов. Для тех, кто не впервые верстает сайты, для них нет ничего сложного, но у новичков, которые не знают JavaScript, возникают трудности.
Раньше, когда я учился на веб вёрстку, то есть на Frontend разработку я дошёл до изучения JavaScript и создания простых меню. Тогда меня отлично обучили вёрстке сайта по макету, но очень слабо JavaScript. Тогда мне оставалось только переписывать код и пытаться понять, как это работает. После обучения на веб вёрстку я решил ещё дополнительно обучаться. Я решил начать учить JavaScript, и как оказалось научиться самым простым базовым вещам не очень сложно. Теперь я могу сделать не только такое меню, но и слайдеры, кнопки, полезные функции для сайта и многое другое. Сегодня я вам расскажу как сделать меню для мобильной версии сайта, я буду делать HTML разметку меню, накладывать стили и писать для него скрипт открытия.
Чтобы сделать меню, для начала нужно сделать HTML-разметку с этим самым меню и кнопкой, которая будет его открывать и закрывать.
Прогресс у нас есть, и это хорошо. У нас есть меню, и теперь нам надо добавить стилей. Думаю если вы читаете статьи по JavaScript, то вы точно знаете что такое CSS и как его подключить, ну а если вы не знаете, рекомендую погуглить про него, тема интересная и стоит изучения
Нам нужно добавить CSS стили. Их я взял с сайта Figma, на котором можно найти множество макетов с готовым дизайном для сайта и который используют Frontend разработчики при разработке сайтов по макету. Мне понравилось вот такое меню, у него приятный дизайн, и я добавлю его к себе на страницу.
Копируем стили и вставляем к себе в CSS. Главное скопировать нужные стили с Figma, стили "position: absolute" не всегда помогут, а размер элемента лучше подбирать самому, поэтому выбирайте стили с умом. Если что, с Figma можно скачать любой шрифт или изображение. Вот такой небольшой CSS код у меня получился
Вот такое у меня получилось меню. Оно прекрасное. Самое главное не забудьте добавить выбранный пункт меню и добавить к нему класс, который отвечает за этот стиль. Лично у меня в коде это делает класс menu__button-active. Он у определённого пункта изменяет цвет текста и добавляет две линии по краям, но это уже нужно делать в соответствии с макетом
Теперь приступаем к самому главному, а именно к добавлению функционала. Нам нужно сделать так, чтобы по нажатию на кнопку меню появлялось и исчезало. Для этого нужно сделать код на JavaScript. Добавляем первую строчку, которая в нашем HTML документе "document" будет искать через "querySelectorAll()" элемент по CSS селектору ".menu__button", то есть по определённому классу.
Дальше нам нужно применить поиск для каждого элемента. Запомните как это делается, так как это будет часто встречаться. Для этого нам поможет ".forEach()". Внутри него мы создаём функцию, по названию которой можно будет получать доступ к каким-либо элементам.
После чего надо от этой функции создать счётчик события через "addEventListener()". Нужно указать событие, в нашем случае это клик, и указать функцию, в которой это будет всё передаваться.
Дальше повторяем конструкцию и ищем элемент с классом "menu", и для каждых элементов с этим классом "forEach()" применяем какое-либо действие. Мы к функции menu1 применяем classList, для действий с классом. Теперь нам нужно добавить свой класс, который будет закрывать меню, у меня это "menu-close". Менять классы можно через add() - добавить класс, remove() - удалить класс, и конечно же toggle() - добавить класс, если его нету, и убрать класс, если он есть, проще говоря переключатель.
Не забудьте написать стили для класса закрытия меню. Всё делается просто, добавляем свойство display, которое изменяет позиционирование элементов на экране, и задаём значение none, чтобы элемент не отображался вообще.
Ну вот. Мы сделали так, чтобы класс "menu-close", который когда добавляется к нашему меню, изменяет его свойство "display" на "none". Самое главное, чтобы этот класс был внизу в коде от класса меню, чтобы если у меню уже было свойство "display", оно перекрывало его. Теперь у нас меню открывается и закрывается.
К классу menu-close можно применить любые свойства. Нам нужно сделать такие свойства, чтобы меню исчезало, но как то по необычному, это конечно же уже по желанию. Для того, чтобы было плавное изменение элемента, нам нужно свойство transition. Оно делает плавное изменение элемента и настраивает время изменения. Изучайте CSS, такая интересная вещь!!! Давайте поэкспериментируем и добавим классу закрытого окна свойство "opacity" вместо "display."
Теперь наше меню будет не мгновенно исчезать, а плавно скрываться. Свойство opacity отвечает за прозрачность элемента
Так же можно добавить стиль, который изменяет положение меню и делает так, чтобы оно выезжало из за границ экрана. Для этого есть свойство "transform", которое отвечает за изменение элемента, его положения, вращения, размера и т.д. Нам нужен "transform: translateY()". Я поставлю значение на -300 пикселей, вы можете выбрать перемещение по другим координатам. Плавное открытие меню выглядит лучше и используется на многих сайтах.
Ну а теперь я вам расскажу ещё про одну важную проблему, это то, как из обычного меню сделать меню для мобильных устройств. Можно сделать два отдельных меню, но это будет очень неудобно, лишняя нагрузка на HTML, а так же будет тяжело менять два меню сразу. Но как это делать и с чего начать? Именно это я спрашивал у своего учителя, на что он мне ответил: "Начни с чего-нибудь". Я сам научился, как это делать, и сейчас я вам про это расскажу.
Давайте представим, что вот это наше меню, и нам нужно сделать из него меню для мобильных устройств.
Для начала нам нужно перейти к классу нашего меню в CSS и просто его скопировать. Добавляем медиа запрос в наш CSS. Он нужен для проверки характеристик устройства и изменения стилей, если характеристики совпадают. В данном случае мы проверяем ширину экрана. Задаём запрос "@media" с "max-width: 720px"
Изменяем стили. В первую очередь я бы перенёс стиль, который отвечает за скрытие меню сюда. Потому что если каким то образом кнопка закроет меню, а версия сайта будет компьютерная, то меню пропадёт, а нам такого не нужно.
Копируем стиль кнопки в медиа запрос, а снаружи скрываем её через "display: none". Если медиа запрос сработает, то он просто перезапишет свойство и кнопка снова будет видимой.
Дальше нам нужно сделать самое основное, а именно перевести меню из вида строки в квадрат, как это бывает на телефонах. Убираем в медиа запросе у нашего меню параметр "height", так как это закреплённая высота для компьютера 35px, и ставим на "auto", чтобы она сама подстраивалась. Переходим к самому списку, ведь теперь он влияет на размер меню, в зависимости от его высоты будет меняться высота меню. Он сейчас тоже в виде строки, поэтому вы ставим значение "flex-direction" на "column"(колонка), так же часто бывает, что ещё влияет и само значение "display".
Теперь на мобильной версии у нас меню выстроилось правильно, но чего то не хватает. У нас раньше были отступы, давайте их добавим. Так же, чтобы сократить место в коде, давайте уберём не нужные свойства из медиа запросов, которые и так есть в коде и их менять не нужно.
Готово!!! Теперь вот так выглядит наше меню с компьютера и с телефона!!!
Ну вот и всё. Вот так можно сделать своё меню, сделать красивое оформление, через JavaScript сделать для него кнопку, а так же переделать обычное меню для телефонной версии. На этом всё, всем удачи, всем пока!!!
*не забудь подписаться!!*