Наверняка вы видели на многих сайтах кнопку в виде иконки с тремя горизонтальными полосками, напоминающий гамбургер. В большинстве случаев на больших и средних разрешениях экрана эта кнопка спрятана, а появляется только на маленьких экранах.
За этой кнопкой скрываются пункты меню навигации, задумка в том, что на определенной ширине экрана, кликая по иконке, пользователь сам разворачивает меню, если ему это надо. Если не надо, то он сразу переходит к просмотру контента, не отвлекаясь на меню, поскольку оно спрятано.
Активную часть этой задачи, а именно разворачивание и сворачивание пунктов гамбургер меню можно реализовать средствами JS с использованием библиотеки jQuery или на чистом CSS . Здесь сразу оговорюсь, что в CSS делается это «костыльным способом» на checkbox-ах , позже я поясню что это.
Гамбургер меню на JS 1. Верстаем обычное верхнее меню навигации с одним параграфом контентной части сайта
Меню
Основной контент сайта
2. Вставляем иконку гамбургер в меню навигации
На сайте iconfinder.com находим нужную иконку, меняем цвет на нужный (Edit Icon) , скачиваем в формате SVG , открываем в браузере, копируем код из веб-инспектора.
Вставляем скопированный выше код вместо текста "Меню".
Меню
На данном этапе на десктопных разрешениях меню выглядит так, SVG иконку мы скрыли, прописав следующий код.
MenuBurger {
display: none; /* иконка гамбургер скрыта */
}
На маленькой ширине экрана, от нуля до 530 пикселей. Нам надо сделать наоборот, показать иконку гамбургер меню и спрятать все пункты меню, стоящие в ряд.
@media screen and (max-width: 530px) {
.menu {
display: none; /* пункты меню скрыты */
background: #f1f2f4;
position: absolute;
}
Menu li {
float: none; /* пункты меню в столбцах */
}
MenuBurger {
display: inline-block; /* иконка гамбургер видна */
}
}
Что нужно сделать, перед тем, как раскрыть гамбургер меню ? Надо временно закомментировать в CSS коде медиа-запроса /* display: none; */ и горизонтальное меню превратить в вертикальное. Для этого отменим действие float-а , добавим к медиа-запросу следующий код.
Мы сделали пока только верстку.
5. Скачать библиотеку jquery-3.3.1.min.jsПодключаем к нашему HTML документу перед закрывающимся тегом body два файла, один из них ещё пустой.
Пишем следующий код в файл script.js
$(function(){
$(".menuBurger").on("click", function(){
$(".menu").slideToggle(200, function(){
if($(this).css("display") === "none"){
$(this).removeAttr("style");
}
});
});
});
Мы не будем подробно разбирать JS код, ограничимся лишь общими комментариями. Могу посоветовать, для тех, кто заинтересовался программированием на JS
Эта строчка $(".menuBurger").on("click", function(){ отслеживает событие на клик по элементу с классом .menuBurger .
$(".menu").slideToggle(200, function(){ здесь к самому меню применяется функция slideToggle() , которая поочередно разворачивает или сворачивает, выбранные элементы на странице за 200 милисекунд.
$(this).removeAttr("style"); - убирает из inline стилей display: none;
Теперь по клику гамбургер меню разворачивается и сворачивается, но есть проблема, при разворачивании меню сдвигает вниз основной контент сайта, а правильно, если оно находится поверх контента. При этом страдает скорость загрузки страницы, особенно на мобильном интернете.
6. Разворачивание меню поверх контентаЭта проблема решается с помощью позиционирования меню.
В основном CSS коде надо добавить
Menu {
position: relative;
}
В медиа-запросе:
.menu {
background: #eee;
position: absolute;
}
После этого, гамбургер меню будет разворачиваться поверх основного контента. Так и должно быть.
1. Отключаем и удаляем все скрипты
2. Вставляем в HTML файл между тегами div и ul строчку кода
3. Заменяем тег div c классом .menuBurger на label
4. Связать id input c атрибутом for label через #menuCSS
В результате, при клике по иконке гамбургера меню , появляется галочка и в чекбоксе.
5. Добавим в медиа-запросе псевдокласс checked
#menuCSS:checked {
display: none;
}
Это значит, что при клике по иконке, галочка ставится в чекбокс, но на экране он скрыт, видна только иконка. Идея в том, что если чекбокс не отмечен, то меню закрыто, а если отмечен галочкой, то меню развернуто. Событие с открыванием и закрыванием меню, подвешено на то, в каком состоянии находится чекбокс.
6. Скроем input в CSS
#menuCSS {
display: none;
}
7. Меняем код в пункте 5, смотрите выше в статье на следующий
#menuCSS:checked + .menu {
display: block;
}
Если связующее звено между label и input #menuCSS отмечено галочкой (checked) , то меню развернуто. Вот и вся магия, гамбургер меню работает на чистом CSS и если добавить ему плавную анимацию, то никакой разницы с меню на JS , вы не почувствуете.
Попробуйте уменьшить браузер и вы наглядно увидите, как работает гамбургер меню на CSS
ВыводОба варианта рабочие. Меню на JS , скажем так – правильное, с точки зрения использования кода. Меню на CSS – это «костыль», своего рода «проявление изобретательности», хорошо подходит тем, кто не хочет разбираться в JS и собирается применять это только на своих проектах. Для сайтов на заказ никаких «костылей», настоятельно рекомендую делать верстку, заточенную под дальнейшее применение JS , другими специалистами.
От Виталия Рубцова и не мог удержаться от желания её реализовать.
В этом уроке я расскажу, как сделать такое с помощью одного CSS, без какого-либо использования JavaScript. Итак, мы увидим некоторые трюки CSS (и SCSS), которые позволят нам добиться почти такой же плавной анимации, как и этот анимированный gif.
Вот пример того, что мы будем делать:
РазметкаНачнём со структуры HTML, которую мы будем использовать. Смотри комментарии для лучшего понимания.
Управление История Статистика Настройки
Начальные стили SCSSТеперь добавим некоторые базовые стили, чтобы получить желаемый внешний вид. Код довольно простой.
/* Базовые стили */ * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: sans-serif; background-color: #F6C390; } a { text-decoration: none; } .container { position: relative; margin: 35px auto 0; width: 300px; height: 534px; background-color: #533557; overflow: hidden; }
Работа переключателяПрежде чем приступать к созданию остальной части интерфейса, добавим работу переключателя, чтобы легко переходить от одного состояния к другому.
Нужный нам HTML уже на месте. А стиль, который заставляет его работать, примерно такой:
// Прячем чекбокс #toggle { display: none; } // Стили для «открытого» состояния, когда чекбокс выбран #toggle:checked { // Любой элемент, стиль которого вам нужно изменить при открытии меню, идёт здесь с селектором ~ // Стили для открытия навигационного меню, к примеру & ~ .nav { } }
Создание закрытого состоянияЧтобы сделать закрытое состояние, нам нужно преобразовать пункты меню в линии, чтобы получить иконку гамбургера. Есть несколько путей для получения такой трансформации. Мы решили сделать это следующим образом:
И вот код, который это реализует.
$transition-duration: 0.5s; // Отображение пунктов навигации в виде линий, составляющих иконку гамбургера.nav-item { position: relative; display: inline-block; float: left; clear: both; color: transparent; font-size: 14px; letter-spacing: -6.2px; height: 7px; line-height: 7px; text-transform: uppercase; white-space: nowrap; transform: scaleY(0.2); transition: $transition-duration, opacity 1s; // Добавление ширины для первой линии &:nth-child(1) { letter-spacing: -8px; } // Добавление ширины для второй линии &:nth-child(2) { letter-spacing: -7px; } // Настройки для элементов, начиная с четвёртого &:nth-child(n + 4) { letter-spacing: -8px; margin-top: -7px; opacity: 0; } // Получение линий для иконки гамбургера &:before { position: absolute; content: ""; top: 50%; left: 0; width: 100%; height: 2px; background-color: #EC7263; transform: translateY(-50%) scaleY(5); transition: $transition-duration; } }
Обратите внимание, что здесь мы разместили только основные стили для пунктов навигации, который наиболее важны. Вы можете найти полный код на Github .
Создание открытого менюЧтобы создать открытое меню, нам необходимо восстановить пункты навигации из линий в обычные текстовые ссылки, а также проделать ряд мелких изменений. Давайте посмотрим, как это сделать:
$transition-duration: 0.5s; #toggle:checked { // Открываем & ~ .nav { // Восстанавливаем пункты навигации из «линий» в иконке меню.nav-item { color: #EC7263; letter-spacing: 0; height: 40px; line-height: 40px; margin-top: 0; opacity: 1; transform: scaleY(1); transition: $transition-duration, opacity 0.1s; // Скрываем линии &:before { opacity: 0; } } } }
Магия в мелочахЕсли мы посмотрим ближе на gif, то увидим, что все пункты меню перемещаются не одновременно, а в шахматном порядке. Мы можем сделать такое и в CSS! В принципе нам нужно выбрать каждый элемент (с помощью :nth-child ) и задать постепенное повышение значения transition-delay . Это, безусловно, повторяющаяся работа. А что если у нас будет больше элементов? Не волнуйтесь, мы можем сделать всё лучше, используя немного магии SCSS:
$items: 4; $transition-delay: 0.05s; .nav-item { // Задаём задержку для пунктов навигации при закрытии @for $i from 1 through $items { &:nth-child(#{$i}) { $delay: ($i - 1) * $transition-delay; transition-delay: $delay; &:before { transition-delay: $delay; } } } }
Обратите внимание, что с помощью этого кода мы получим желаемое пошаговое поведение для анимации закрытия. Нам нужно вычислить $delay , немного отличающийся для анимации открытия, чтобы получить обратно ступенчатый переход. Вроде этого:
$delay: ($items - $i) * $transition-delay;
ВыводВот мы и закончили с нашим причудливым меню! Мы также включили некоторые фиктивные элементы как в анимированном gif, и вы можете увидеть .
Итак, мы создали простое и функциональное меню только на CSS. Однако, если вы не хотите использовать систему переключения CSS, она может быть идеально заменена с помощью нескольких строк JavaScript без особых усилий.
Надеемся, этот урок оказался вам по душе и вы сочли его полезным!
Всем привет. С вами Corvax. Сегодня я хочу продолжить тему мобильных меню и предложить вам сделать но только используя jQuery. Поехали.
Создание HTML макета Меню Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis autem consequatur eum facere neque. Tenetur laboriosam repellendus neque fuga, velit, totam, est, aspernatur sunt sapiente earum quo beatae. Fuga, officia. Добавление основных CSS стилей nav{ background: #3e2597; padding: 0; margin: 0; } .menu{ list-style-type: none; padding: 0; margin: 0; } .menu li{ float: left; } .menu li a{ display: inline-block; padding: 10px 15px; color: #fff; text-decoration: none; } .wrapper{ max-width: 1024px; padding: 10px; margin: 0px auto; } .menuToggle{ color: #fff; padding: 10px 15px; cursor: pointer; display: none; } body{ height: 100%; } @media(max-width: 640px){ .menuToggle{ display: block; } .menu{ display: none; position: absolute; background: #3e2597; width: 100%; margin-left: -10px; padding-left: 10px; } .menu li{ float: none; } } Добавление JSПосле того как мы сверстали само меню нам понадобиртся подключить JS файл и приступить к самому интересному.
$(function(){ $(".menuToggle").on("click", function() { $(".menu").slideToggle(300, function(){ if($(this).css("display") === "none"){ $(this).removeAttr("style"); } }); }); });
Давайте подробнее рассмотрим что тут написна. В начале мы вешаем собитые.on по клику на самоу кнопку «Меню». В нутри этого события мы добовляем на $(«.menu») выподающее меню функцию slideToggle() которая будет производить плавное открытие и закрытие выподающего меню.
Есть небольшая проблема которая у нас возникнет при переходе версий сайта и нажитие на кнопку «Меню», а именно будет скрываться блок с самими пунктами меню т.к. по умолчанию функция slideToggle() при закрытие добавляет атребут «display: none». Что бы исправить этот баг нужно вызвать колбэк(функция которая будет вызыватся после отработки основной функции) для функции slideToggle() . В нутри колбека мы пишем условие. Если у нас атрибу в блоке меню равен «display: none» тогда мы удаляем этрибут «style».
ЗаключениеВот так отчень просто и быстро мы создали адаптивно меню «гамбургер» которое вы можете лекго использовать в смоих проектах. вы можете скачать исходники. С вами был Corvax. Да новых встреч!
