Боковое раскрывающееся меню. Красивое выдвигающееся меню. Вертикальное меню с заголовком
В этом уроке мы покажем вам, как создавать боковое выпадающее меню для еще более простой навигации по сайту. Такое меню - популярная тенденция в современном веб-дизайне. На многих сайтах используется этот тип меню. С его помощью можно избавиться от хаоса на страницах проекта, сделать его более читаемым, сосредотачивая внимание пользователей на основном контенте.
Это прекрасный способ добиться минимализма без отвлекающих факторов. Сегодня создадим такое меню самостоятельно.
Чтобы создать меню навигации, давайте сначала ознакомимся с настройками:
Animation Menu Demo
Для начала необходимо загрузить Normalize.css и настроить стили браузера по умолчанию, убедиться, что меню выглядит одинаково во всех браузерах. Для отображения стрелки перед элементами меню с подпунктами будем использовать FontAwesome . Для переключения классов в меню загружаем jQuery и перемещаем весь пользовательский jQuery код в script.js. Последняя ссылка является основной таблицей для веб-проекта.
Иконка-гамбургерИконка-гамбургер является общим атрибутом навигации по сайту. Часто она создается при помощи иконочного шрифта, такого как FontAwesome, но в этом уроке мы добавим некоторую анимацию, а потому будем создавать ее с нуля. Наша иконка-гамбургер представляет собой тег span, содержащий три div класса, отображающийся в виде горизонтальных полос.
Стили выглядят следующим образом:
Toggle-button { position: fixed; width: 44px; height: 40px; padding: 4px; transition: .25s; z-index: 15; } .toggle-button:hover { cursor: pointer; } .toggle-button .menu-bar { position: absolute; border-radius: 2px; width: 80%; transition: .5s; } .toggle-button .menu-bar-top { border: 4px solid #555; border-bottom: none; top: 0; } .toggle-button .menu-bar-middle { height: 4px; background-color: #555; margin-top: 7px; margin-bottom: 7px; top: 4px; } .toggle-button .menu-bar-bottom { border: 4px solid #555; border-top: none; top: 22px; } .button-open .menu-bar-top { transform: rotate(45deg) translate(8px, 8px); transition: .5s; } .button-open .menu-bar-middle { transform: translate(230px); transition: .1s ease-in; opacity: 0; } .button-open .menu-bar-bottom { transform: rotate(-45deg) translate(8px, -7px); transition: .5s; }
Иконка имеет фиксированное положение и не меняет его при прокрутке страницы. Также имеет z-index 15, а это значит, что она всегда будет поверх других элементов. Состоит из трех bars, каждый из которых разделяет другие стили. Поэтому мы переместим каждый bar в класс.menu-bar. Остальные стили перемещаем в отдельные классы. Магия происходит тогда, когда мы добавляем другой класс в тег span, который является открытым. Мы добавляем его с помощью jQuery следующим образом:
$(document).ready(function() { var $toggleButton = $(".toggle-button"); $toggleButton.on("click", function() { $(this).toggleClass("button-open"); } ); } );
Для тех, кто не знаком с jQuery - мы инициализируем переменную с $toggleButton, которая содержит нашу иконку. Сохраняем ее в переменной без необходимости использования JavaScript. Затем мы создаем event listener, который учитывает клики по иконке. Каждый раз, когда пользователь кликает по иконке-гамбургеру, event listener запускает функцию toggleClass() , которая переключает класс.button-open.
Когда добавлен класс.button-open, мы можем использовать его для изменения способов отображения элементов. Мы используем CSS3 translate() и rotate() функции, чтобы верхняя и нижняя полосы вращались на 45 градусов, а средняя полоса сдвигалась вправо и исчезала. Вот какую анимацию можно настроить:
Выпадающее меню навигацииТеперь, когда у вас есть иконка-гамбургер, давайте сделаем ее полезной и создадим выпадающее меню при нажатии на нее. Вот как выглядит разметка меню:
Сейчас не будем подробно останавливаться на каждом стиле для этого меню, вместо этого сосредоточимся на нескольких важных моментах. Прежде всего, это div и класс.menu-wrap. Посмотрите на его стили:
Menu-wrap { background-color: #6968AB; position: fixed; top: 0; height: 100%; width: 280px; margin-left: -280px; font-size: 1em; font-weight: 700; overflow: auto; transition: .25s; z-index: 10; }
Положение фиксированное, поэтому при прокрутке страницы меню всегда остается в одном положении. Высота 100% позволяет меню занимать все вертикальное пространство на странице. Обратите внимание, что в поле margin-left установлено отрицательное число, равное ширине меню. Это значит, что меню будет исчезать из окна просмотра. Чтобы сделать его снова видимым, мы создаем другой класс toggler с jQuery. Наш файл JavaScript будет выглядеть так:
$(document).ready(function() { var $toggleButton = $(".toggle-button"), $menuWrap = $(".menu-wrap"); $toggleButton.on("click", function() { $(this).toggleClass("button-open"); $menuWrap.toggleClass("menu-show"); } ); } );
Добавляем другую переменную $menuWrap, которая содержит оболочку меню. Используйте тот же обработчик событий, который мы создали ранее. Только на этот раз переключаем два класса: один для кнопки и один для оболочки меню. Значение левого поля класса.menu-show равно 0, это добавит эффект тени.
Menu-show { margin-left: 0; box-shadow: 4px 2px 15px 1px #B9ADAD; }
Подменю и ссылкиВы можете заметить, что в одном из элементов списка есть класс.menu-item-has-children, который содержит подменю. Кроме того, сразу под ссылкой размещен тег span с классом.sidebar-menu-arrow.
span имеет::after pseudo-element и содержит стрелку FontAwesome. По умолчанию подменю скрыто и будет видно только при нажатии на стрелку. Вот как мы это можем сделать с jQuery:
$(document).ready(function() { var $sidebarArrow = $(".sidebar-menu-arrow"); $sidebarArrow.click(function() { $(this).next().slideToggle(300); } ); } );
Когда мы нажимаем на стрелку, мы вызываем функцию, которая в свою очередь нацелена на следующий элемент сразу после span (в нашем случае это подменю) и делает его видимым. Функцию, которую мы используем - slideToggle . Она заставляет элемент появляться и исчезать. Функция в нашем примере имеет один параметр - длительность анимации.
Элементы меню в примере имеют hover-эффект. Он создается с использованием::after pseudo-element. Код выглядит так:
Menu-sidebar li > a::after { content: ""; display: block; height: 0.15em; position: absolute; top: 100%; width: 102%; left: 50%; transform: translate(-50%); background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%); transition: background-position .2s .1s ease-out; background-size: 200% auto; } .menu-sidebar li > a:hover::after { background-position: -100% 0; }
::after pseudo-element содержит элемент block level внизу каждой ссылки с полной шириной и высотой 0.15em. Выглядит все это как подчеркивание. Особенность заключается в том, что мы не просто применяем цвет фона к линии, мы используем функцию linear-gradient() на фоновом изображении. Хотя эта функция предназначена для создания цветовых градиентов, мы можем менять цвет, указав нужные проценты.
Menu-sidebar li > a::after { background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%); }
Половина лини здесь прозрачная, а вторая половина - желтая. Сделав размер фона 200%, мы удваиваем ширину нашего блока. Теперь прозрачная часть занимает всю ширину ссылки, а желтая часть перемещается влево и становится незаметной. Мы меняем положение фона при наведении на -100%. Теперь желтая часть становится видимой, а прозрачная - скрыта.
Вместо прозрачной части вы можете использовать любой другой цвет. Вы также можете поэкспериментировать с градиентами.
Каждый из рассмотренных нами элементов работает как единое целое. Вы можете создать такое меню, используя любой дизайн сайта из коллекции TemplateMonster. Как видите, сделать это проще, чем можно себе представить. Удачи в создании профессиональных и удобных для пользователей сайтов!
В этом уроке мы расскажем, как создать боковое меню, такое, как у приложений для смартфона, но для веб-сайта. Мы опишем, как шаг за шагом создать меню, пригодное как для компьютеров, так и для смартфонов, начиная от структуры разметки и заканчивая добавлением эффекта вытягивания при открытии и закрытии меню.
Заметьте: для этого урока Вам потребуется библиотека jQuery, так что убедитесь, что последняя библиотека jQuery подключена на Вашей странице.
1. Структура
Body, html { height : 100 % 100 % ; width : 100 % ; } #sidebar { position : absolute ; background : #DF314D ; width : 240px ; height : 100 % ; box-sizing: border-box; -moz-box-sizing: border-box; } #sidebar ul { margin : 0 ; padding : 0 ; list-style : none ; } #sidebar ul li { margin : 0 ; } #sidebar ul li a { padding : 15px 20px ; font-size : 16px ; font-weight : 100 ; color : white ; text-decoration : none ; display : block ; border-bottom : 1px solid #C9223D ; -webkit-transition: background 0 .3s ease-in-out; -moz-transition: background 0 .3s ease-in-out; -ms-transition: background 0 .3s ease-in-out; -o-transition: background 0 .3s ease-in-out; transition: background 0 .3s ease-in-out; } #sidebar ul li:hover a { background : #C9223D ; }
Для начала мы создадим структуру для левого бокового меню, которую мы в результате спрячем влево. Мы добавили несколько основных стилей в пример, так что не стесняйтесь изменять вид Вашего бокового меню. Мы также добавили пустой блок под названием main-content . Этот блок будет содержать все элементы, которые Вы хотите показать на этой странице. Мы заполним его в следующем шаге.
2. Создание простого бокового меню
Body, html { height : 100 % ; margin : 0 ; overflow:hidden ; font-family : helvetica; font-weight : 100 ; } .container { position : relative ; height : 100 % ; width : 100 % ; left : 0 ; -webkit-transition: left 0 .4s ease-in-out; -moz-transition: left 0 .4s ease-in-out; -ms-transition: left 0 .4s ease-in-out; -o-transition: left 0 .4s ease-in-out; transition: left 0 .4s ease-in-out; } .container .open-sidebar { left : 240px ; } #sidebar { position : absolute ; left : -240px ; background : #DF314D ; width : 240px ; height : 100 % ; box-sizing: border-box; } #sidebar ul { margin : 0 ; padding : 0 ; list-style : none ; } #sidebar ul li { margin : 0 ; } #sidebar ul li a { padding : 15px 20px ; font-size : 16px ; font-weight : 100 ; color : white ; text-decoration : none ; display : block ; border-bottom : 1px solid #C9223D ; -webkit-transition: background 0 .3s ease-in-out; -moz-transition: background 0 .3s ease-in-out; -ms-transition: background 0 .3s ease-in-out; -o-transition: background 0 .3s ease-in-out; transition: background 0 .3s ease-in-out; } #sidebar ul li:hover a { background : #C9223D ; } .main-content { width : 100 % ; height : 100 % 100 % 100 % ; line-height : 160 % ; } .main-content #sidebar-toggle { background : #DF314D ; border-radius: 3px ; display : block ; position : relative ; padding : 10px 7px ; float : left ; } .main-content #sidebar-toggle .bar { display : block ; width : 18px ; margin-bottom : 3px ; height : 2px ; background-color : #fff ; border-radius: 1px ; } .main-content #sidebar-toggle .bar :last-child { margin-bottom : 0 ; }
;Теперь мы спрячем боковое меню влево с помощью свойств position:relative и left: -240px, это значение равняется ширине бокового меню. Мы добавили кнопку и скрипт jQuery, что позволит нам вызвать боковое меню по нажатию, переключая класс open-sidebar для контейнера, в котором находятся боковое меню и блок main-content.
После этого мы просто передвигаем весь контейнер влево на 240px, и это заставит появиться левое боковое меню. Если пользователь снова нажмет на кнопку, скрипт jQuery удалит класс у контейнера, и боковое меню исчезнет. Чтобы анимировать боковое меню так, как будто оно приезжает из левого края экрана, мы добавили переход стиля, чтобы создать такую же функциональность, как у приложений для смартфонов.
Теперь у нас есть простое боковое меню, которое вызывается нажатием кнопки мыши.
3. Делаем меню вытягиваемымCreating Swipeable Side Menu For the Web
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Body, html { height : 100 % ; margin : 0 ; overflow:hidden ; font-family : helvetica; font-weight : 100 ; } .container { position : relative ; height : 100 % ; width : 100 % ; left : 0 ; -webkit-transition: left 0 .4s ease-in-out; -moz-transition: left 0 .4s ease-in-out; -ms-transition: left 0 .4s ease-in-out; -o-transition: left 0 .4s ease-in-out; transition: left 0 .4s ease-in-out; } .container .open-sidebar { left : 240px ; } .swipe-area { position : absolute ; width : 50px ; left : 0 ; top : 0 ; height : 100 % ; background : #f3f3f3 ; z-index : 0 ; } #sidebar { background : #DF314D ; position : absolute ; width : 240px ; height : 100 % ; left : -240px ; box-sizing: border-box; -moz-box-sizing: border-box; } #sidebar ul { margin : 0 ; padding : 0 ; list-style : none ; } #sidebar ul li { margin : 0 ; } #sidebar ul li a { padding : 15px 20px ; font-size : 16px ; font-weight : 100 ; color : white ; text-decoration : none ; display : block ; border-bottom : 1px solid #C9223D ; -webkit-transition: background 0 .3s ease-in-out; -moz-transition: background 0 .3s ease-in-out; -ms-transition: background 0 .3s ease-in-out; -o-transition: background 0 .3s ease-in-out; transition: background 0 .3s ease-in-out; } #sidebar ul li:hover a { background : #C9223D ; } .main-content { width : 100 % ; height : 100 % ; padding : 10px ; box-sizing: border-box; -moz-box-sizing: border-box; position : relative ; } .main-content .content { box-sizing: border-box; -moz-box-sizing: border-box; padding-left : 60px ; width : 100 % ; } .main-content .content h1{ font-weight : 100 ; } .main-content .content p{ width : 100 % ; line-height : 160 % ; } .main-content #sidebar-toggle { background : #DF314D ; border-radius: 3px ; display : block ; position : relative ; padding : 10px 7px ; float : left ; } .main-content #sidebar-toggle .bar { display : block ; width : 18px ; margin-bottom : 3px ; height : 2px ; background-color : #fff ; border-radius: 1px ; } .main-content #sidebar-toggle .bar :last-child { margin-bottom : 0 ; }
; $(".swipe-area" ) .swipe ({ swipeStatus:function (event, phase, direction, distance, duration, fingers) { if (phase=="move" && direction =="right" ) { $(".container" ) .addClass ("open-sidebar" ) ; return false ; } if (phase=="move" && direction =="left" ) { $(".container" ) .removeClass ("open-sidebar" ) ; return false ; } } } ) ;Самая сложная часть этого урока - сделать боковое меню вытягиваемым как на браузерах для смартфонов, так и на веб-браузерах для настольных компьютеров. На этом этапе нам нужно подключить хороший плагин, под названием TouchSwipe , созданный Matt Bryson для управления процессом вытягивания меню. Убедитесь, что этот плагин подключен в Вашем HTML файле.
Теперь, когда у нас есть возможность обнаружить жесты вытягивания и перетаскивания на смартфоне, мы воспользуемся этим, чтобы вызвать боковое меню. Ранее мы столкнулись с проблемой, так как мы применили обнаружение действия вытягивания для страницы целиком, то на смартфонах стало невозможно прокручивать страницу при увеличении, потому что открывалось боковое меню.
Так как это неприемлемо, мы добавили пустой блок класса swipe-area, чтобы определить область обнаружения жеста вытягивания. Область определения вытягивания расположена у левого края страницы, так что пользователь сможет вызвать боковое меню вытягиванием направо у левого края экрана. Это решает проблему случайного открытия меню при прокрутке страницы.
В нашем скрипте JS мы определяем действие вытягивания, использую функцию swipe(), выполняемую плагином TouchSwipe. Мы обнаруживаем две части действия вытягивания: движение и направление. Мы просто добавляем класс open-sidebar, чтобы вызвать меню, когда курсор мыши или палец пользователя движется вправо. Мы удаляем этот класс, если курсор мыши или палец пользователя движется в противоположном направлении.
В нашем эксперименте эта функция отлично работает на смартфонах, но не очень хорошо работает в браузерах на настольных компьютерах, так как когда мы двигаем мышку с зажатой кнопкой, браузеры запускают инструмент по выделению текста, который перебивает наше действие по определению вытягивания. Нам это не нужно, поэтому мы возвращаем false после того, как мы добавляем или удаляем класс open-sidebar. И это предотвращает запуск инструмента по выделению текста по умолчанию.
ЗаключениеИ это все! У нас теперь есть вытягиваемое боковое меню, которое работает как в браузерах на настольных компьютерах, так и на смартфонах. Надеемся, что Вам понравился этот урок.
Перевод — Дежурка
На данный момент с помощью jQuery можно сделать на сайте всё что угодно, нужно лишь определиться надо ли это вашему сайту. Мы все стремимся сделать сайт наиболее удобный для пользователя, чтобы ему было приятно перемещаться по сайту и это было максимально легко. Меню играет большую роль когда посетитель «гуляет» по вашему сайту. И в этом уроке мы создадим выдвигающееся меню, которое может прятаться и появляться когда это необходимо пользователю.
Также интересные выдвигающиеся меню:
Пример можно увидеть здесь:
СкачатьВ этом уроке мы будем использовать jQuery плагин — «jQuery.mmenu.js». Его можно скачать по ссылке — скачать .
Как пользоваться? HTML частьСперва подключим необходимые библиотеки и стили:
| 1 2 3 4 5 |
Затем определимся со структурой меню. Для примера, чтобы показать как оно работает, я сделаю меню с вложенными элементами. Но у вас оно может быть и более простое:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | Страница 1 Страница 2 Страница 10 Страница 11 Страница 13 Страница 14 Страница 15 Страница 12 Страница 3 Страница 4 Страница 5 Страница 6 Страница 7 Страница 8 Страница 9 |
Немного выше меню вставим переключатель, чтобы пользователь мог открыть/закрыть его:
С HTML структурой закончили, сейчас переходим к стилям.
В продолжение примеров различных UI-элементов сайтов, которые можно сделать без Javascript, сегодня распишу как можно сделать выезжающее меню на чистом CSS.
И снова ДЕМО , для начала.
Начнем пожалуй со HTML -структуры:
input нам необходим для определения видимости меню: то есть если он выбран, то меню видно и наоборот.
label – это наша кнопка-бургер, которая привязана к инпуту.
ul – сам блок меню.
Теперь CSS (писал только для WebKit -браузеров: Opera 16+, Safari, Chrome).
Наше меню:
Hidden-menu { display: block; position: fixed; list-style:none; padding: 10px; margin: 0; box-sizing: border-box; width: 200px; background-color: #eee; height: 100%; top: 0; left: -200px; transition: left .2s; z-index: 2; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; }
Здесь много раздолья для креативных людей, но главные параметры – это width и left . Он должны иметь одинаковое значение, но left при этом является отрицательным. Тем самым мы прячем нашу меню слева от экрана. Также добавил анимацию transition: left .2s для красоты процесса выезда из-за пределов экрана.
Наш чекбокс:
Hidden-menu-ticker { display: none; }
Его просто делаем невидимым.
Кнопка-бургер:
Btn-menu { color: #fff; background-color: #666; padding: 5px; position: fixed; top: 5px; left: 5px; cursor: pointer; transition: left .23s; z-index: 3; width: 25px; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .btn-menu span { display: block; height: 5px; background-color: #fff; margin: 5px 0 0; transition: all .1s linear .23s; position: relative; } .btn-menu span.first { margin-top: 0; }
Оформлять также можно как угодно. Я сделал просто серую кнопку с белыми полосками в левом верхнем углу. Сюда тоже добавил анимации для самой кнопки и для полосок (просто для красоты).
Теперь, так называемая «магия»:
Hidden-menu-ticker:checked ~ .btn-menu { left: 160px; } .hidden-menu-ticker:checked ~ .hidden-menu { left: 0; } .hidden-menu-ticker:checked ~ .btn-menu span.first { -webkit-transform: rotate(45deg); top: 10px; } .hidden-menu-ticker:checked ~ .btn-menu span.second { opacity: 0; } .hidden-menu-ticker:checked ~ .btn-menu span.third { -webkit-transform: rotate(-45deg); top: -10px; }
CSS3-селекторы позволяют нам определять состояние чекбокса и применять, в зависимости от этого те или иные свойства для соседних элементов:checked ~ . В данном примере мы при «чекнутом» инпуте сдвигаем кнопку меню.hidden-menu-ticker:checked ~ .btn-menu влево на 160 пикселей, меню до левого края.hidden-menu-ticker:checked ~ .hidden-menu . Остальные стили написаны для полосок кнопки меню, чтобы они при нажатии превращались в крестик и наоборот.
Мы сейчас быстро и легко сделаем вертикальное меню, которое будет анимировано выезжать с боку при нажатии на кнопку его вызова.
ШАГ 1. Добавление меню в HTML файлВставьте в html файл код ниже:
МЕНЮ
Вы видите, что для всех кнопок меню, учитывая и кнопку самого вызова меню, был добавлен класс openButton . Это сделано для того, чтобы наш скрипт, который мы будет подключать, мог привязать нажатия этих кнопок к действиям открытия и закрытия меню.
ШАГ 2. Добавление стилейСейчас мы немного стилизуем наше меню и все кнопки. Вставьте в ваш css файл код ниже:
Button { background: transparent; border: transparent; outline: none; cursor: pointer; margin: 50px 90px; font-weight: bold; font-size: 24px; color: #6c7d96; transition: 0.2s; } button:hover { transition: 0.2s; opacity: 0.7; } button:active { transition: 0.2s; opacity: 0.4; } nav { background-color: #6c7d96; width: 250px; position: relative; left: -999px; transition: 0.5s ease; } nav ul li { padding: 20px 0; text-align: center; transition: 0.2s; } nav ul li:hover { cursor: pointer; background-color: #454954; transition: 0.2s; } nav ul li:active { background-color: #23252b; transition: 0.2s; } nav ul li a { color: white; text-decoration: none; font-weight: bold; font-size: 21px; }
Самая важная часть кода записана в селекторе nav . С помощью относительного позиционирования мы скрываем наше меню за пределы видимой части страницы прописывая негативное значение для left .
Примечание . Вы можете использовать и фиксированное позиционирование если вам необходимо прилепить меню к экрану при прокрутке. Работать это будет идентично нашему варианту.
ШАГ 3. Подключение скриптаВ ваш js файл вам необходимо вставить этот код:
$(document).ready(function() { $(".openButton").click(function() { if(!$(".openButton").hasClass("openDone")) { $(".openButton").addClass("openDone"); $("nav").css("left", "0px"); } else { $(".openButton").removeClass("openDone"); $("nav").css("left", "-999px"); } }); /* Подключать тогда, когда вы изначально хотите делать меню адаптивным после определённого размера экрана Этот код решает проблему случайно исчезающего меню при изменении размера экрана браузера Здесь ставьте ширину при которой включается адаптивный дизайн вашего меню $(window).resize(function() { if ($(window).width() > 1200) { $("nav ul li").removeAttr("style"); } }); */ });
Скрипт проверяет событие click у кнопок с классом openButton, который мы им давали ранее. Сразу же идет проверка на присутствие класса openDone. В зависимости от наличия этого класса у кнопок, данный скрипт решает, закрывать ли меню или открывать.
К слову, этот класс мы нигде не прописывали. Он выполняет роль некого переключателя. Это работает таким образом, что когда идет нажатие на кнопку «МЕНЮ «, всем кнопкам с классом openButton добавляется класс openDone. И когда пользователь снова нажимает на какую-то из кнопок меню, скрипт убирает класс openDone у этих кнопок.
Соответственно, этот класс нужен только для скрипта, чтобы он понимал в какие моменты нужно выводить меню, а в какие закрывать его. Если бы мы не добавляли класс openDone, скрипт бы работал некорректно, а меню, при нажатии на кнопку его открытия, просто бы открывалось и моментально закрывалось.
Примечание . Закомментированный внизу код нужно подключать в том случае, если вы используете этот скрипт для анимации адаптивной версии вашего горизонтально меню. Он решает проблему исчезающего меню при увеличении размера экрана.
РезюмеМы сделали максимально простое анимированно появляющееся меню с боку при нажатии на кнопку. Как вы видите здесь нет абсолютно ничего сложного. Вы можете улучшать этот код и видоизменять его как вам только заблагорассудится.
