Всем привет, сегодня я вам расскажу, как сделать выдвигающееся меню на чистом JavaScript без использования всяких библиотек.
Выдвигающееся меню можно встретить на разных сайтах довольно часто, поэтому если вы веб-разработчик, вам необходимо уметь делать такие меню. Если вы начинающий веб-разработчик, который выучил HTML и CSS и решил идти верстать сайты, вам срочно нужно разобраться, как делаются такие меню, потому что очень маловероятно, что незнание JavaScript освободит вас от этой работы, если такое попадётся.
В сегодняшней статье я расскажу вам, как делаются такие меню, и покажу, как сделать появление меню несколькими способами. Если вам не понравится какой-то один способ, можете воспользоваться другим.
Начинаем делать меню
У нас есть вот такой сайт, именно для него мы будем делать наше меню, особенно для его мобильной версии.
В компьютерной версии у нашего сайта большой экран, если мы хотим разместить какие-то элементы в хедере, то, возможно, мы это сможем сделать без проблем. На мобильной же версии сайта наш экран не настолько широкий, поэтому нам нужно экономить место и делать вот такое меню.
Для начала определимся с пунктами этого меню и сверстаем это самое меню.
Для нашего меню нам нужно задать нужные стили.
Наше меню не такой объект, как остальные, наше меню будет поверх остальных HTML объектов. Задаём стили нашему меню и устанавливаем "position: absolute". Я собираюсь сделать так, чтобы наше меню открывалось и находилось рядом с кнопкой.
К стилю кнопки я добавил "position: relative", а само меню вложил в неё, чтобы меню устанавливало положение относительно кнопки.
Также я задал стили остальным объектам меню, если кому интересно.
В итоге получилось нечто такое, что более красиво смотрится на компьютерной версии.
Приступаем к разработке функционала
Прежде чем мы начнём, и я расскажу про несколько способов открытия меню (чисто визуальных), я расскажу в теории, как это будет работать.
У нас будет класс, который будет назначаться нашему меню, когда оно должно быть закрыто. У этого класса будут свойства, которые будут заставлять наше меню исчезать. В зависимости от того, какой эффект исчезновения и появления мы хотим сделать нашему меню, такие свойства будут указываться. Каждый раз, когда мы будем нажимать на кнопку, класс, отвечающий за скрытие нашего меню, будет удаляться и добавляться.
Чтобы ничего не напутать в будущем, мы нашей кнопке и нашему меню добавим свой id. По классу обращаться мы не будем, там свои нюансы, эта статья скорее для тех, кто плохо разбирается в JavaScript, по id обращаться проще, я хочу показать вам максимально простой способ.
Приступаем к написанию кода.
Мы обращаемся к нашему документу и ищем элемент по его селектору, селекторы здесь, как в CSS. Мы ищем элемент с id "header__button". После этого мы обращаемся к его параметру onclick и записываем в него функцию, которая будет вызываться после клика на объект. Я записал туда стрелочную функцию, я люблю их, они короткие "() => { ... }"
Внутри этой функции обращаемся к элементу с id "header__menu" и обращаемся к его свойству classList. При помощи него можно менять классы элемента. Есть три функции для этого: ".add(название класса)", ".remove(название класса)", и ".toggle(название класса)". Add и remove добавляют и удаляют класс, а toggle по интереснее. Toggle это переключатель, который добавляет класс, если его нету, и убирает класс, если он есть. Прикольная функция, которая упрощает процесс.
Переходим к коду и убеждаемся, что скрипт подключен
Я хоть и веб-разработчик с опытом, но даже я умудрился накосячить в этом. Сначала я подключил скрипт и разместил для этого тег в самом верху файла. Но такой скрипт работать не будет, он запускается до того, как объявляются наши теги. Из за этого он попытается добавить функцию к кнопке, которой нет, не сможет этого сделать, а после чего появится сама кнопка (без функции).
Поэтому я разместил тег со скриптом в самом низу файла. Если я умудрился здесь накосячить, значит, новички в JavsScript могут тем более. Будет очень забавно, если у вас не получалось, и решить задачу вам помог конкретно этот момент. 😁
Чтобы проверить работоспособность нашего скрипта, заходим на страничку, кликаем по кнопке, заходим в код элемента и смотрим, добавился ли наш класс
Всё работает корректно. Но нам надо учитывать, что меню изначально скрыто, а у нас получается наоборот, класс добавляется при первом нажатии на кнопку. Для этого просто добавляем класс в самом HTML.
Приступаем к нашим эффектам
Осталось поработать над самим классом "hide-menu". В зависимости от того, какое появление для нашего меню мы хотим сделать, мы должны добавить нужные свойства.
Начнём с простого
1. Обычное появление и исчезновение
Для того, чтобы просто скрыть меню, нам понадобится "display: none". Свойство "display" определяет, как именно будут располагаться наши элементы, "none" же означает, что никак.
И даже так у нас уже появилось нормально работающее появляющееся меню.
На мобильной версии тоже нормально работает (ну а почему нет).
Но это как-то просто, можно придумать и другие способы для открытия меню.
2. Плавное появление меню
Вот здесь мы уже начинаем работать с анимацией. Чтобы сделать так, чтобы какие-то свойства объекта плавно изменялись, нужно свойство "transition-duration", которое указывает на длительность таких изменений.
Вместо нашего свойства задаём "opacity: 0" и смотрим, что у нас получилось:
3. Меню, которое уезжает
А вот это уже более интересно. Для этого мы будем использовать свойство "transform".
Это свойство, у которого есть много крутых параметров, с которыми можно поиграться и создать свою анимацию. Мы будем использовать "translateX" для передвижения меню по иксу. Если у нас меню прилегает к одному из краёв экрана, то можно поставить 100%, либо -100%, чтобы меню уехало в какую-либо сторону и скрылось за экран. Если у вас меню по середине экрана, допустим, так устроено это, будет довольно странно))
Но есть небольшой нюанс
Свойство "position: absolution" у меню позволяет ему двигаться относительно кнопки, что может быть полезно в некоторых ситуациях. Но в ситуации, когда мы прячем меню за экран, наш объект расширяет наш сайт самим собой, из за чего у нас появляется ползунок и можно залезать за край сайта. Так быть не должно.
Есть несколько способов это исправить:
1) Задать меню "position: fixed", тогда оно будет двигаться относительно окна, а не кнопки. Способ немного ненадёжный, если на экране произойдёт что-то такое, что заставит изменить положение и порядок элементов (нововведения от разработчиков, изменение ширины экрана), окно меню останется на своём месте и уедет от кнопки по дальше. Это будет плохо, если нужно, чтобы меню было конкретно рядом с кнопкой. Нам это не грозит, наше меню по идее будет всегда находиться справа.
2) Задать элементу "body" свойство "overflow: hidden", что скроет все элементы, которые выходят за его рамки. Способ хороший, но иногда из за него может что-нибудь сломаться, это бывает редко, но бывает. (Например, в какой-нибудь админ-панели, которая немного криво спроектирована и элементы выходят за границы "body", но при этом возникает тот самый ползунок, позволяющий перелистывать вправо и всё работает)
4. Меню, которое разворачивается
Для того, чтобы это сделать, мы в момент закрытия окна зададим ему "height: 0px".
Если мы сплющим наше окно до 0 пикселей в высоту, его кнопки останутся и вылезут на пределы. Чтобы этого не было, к классу этого окна зададим свойство overflow: hidden.
Вот так открывается и закрывается наше меню. Правда есть недостаток, линия от границ остаётся после закрытия. Это можно как-нибудь исправить, например, убрать границы для класса "hide-menu", или перекрасить и сделать тоньше границы оригинального меню.
Закругляемся. Подводим итоги
Подведём итоги. Сегодня я вам объяснил, как делать открывающиеся окна с меню на JavaScript и CSS, и показал вам несколько стилей для открытия и закрытия этих самых окон.
Если хотите, можете поставить лайк и подписаться на канал, успехов вам