как сверстать меню бургер

Меняющееся гамбургер меню на CSS

Недавно я обнаружил эту потрясающую картинку на dribbble.com от Виталия Рубцова и не мог удержаться от желания её реализовать.

В этом уроке я расскажу, как сделать такое с помощью одного CSS, без какого-либо использования JavaScript. Итак, мы увидим некоторые трюки CSS (и SCSS), которые позволят нам добиться почти такой же плавной анимации, как и этот анимированный gif.

Вот пример того, что мы будем делать:

Разметка

Начнём со структуры HTML, которую мы будем использовать. Смотри комментарии для лучшего понимания.

Начальные стили SCSS

Теперь добавим некоторые базовые стили, чтобы получить желаемый внешний вид. Код довольно простой.

Работа переключателя

Прежде чем приступать к созданию остальной части интерфейса, добавим работу переключателя, чтобы легко переходить от одного состояния к другому.

Нужный нам HTML уже на месте. А стиль, который заставляет его работать, примерно такой:

Создание закрытого состояния

Чтобы сделать закрытое состояние, нам нужно преобразовать пункты меню в линии, чтобы получить иконку гамбургера. Есть несколько путей для получения такой трансформации. Мы решили сделать это следующим образом:

И вот код, который это реализует.

Обратите внимание, что здесь мы разместили только основные стили для пунктов навигации, который наиболее важны. Вы можете найти полный код на Github.

Создание открытого меню

Чтобы создать открытое меню, нам необходимо восстановить пункты навигации из линий в обычные текстовые ссылки, а также проделать ряд мелких изменений. Давайте посмотрим, как это сделать:

Магия в мелочах

Здесь мы используем цикл, переменную и некоторые базовые арифметические операции. Вы можете больше узнать об этих и других интересных функциях на сайте документации SASS.

Вывод

Вот мы и закончили с нашим причудливым меню! Мы также включили некоторые фиктивные элементы как в анимированном gif, и вы можете увидеть финальную демонстрацию здесь.

Итак, мы создали простое и функциональное меню только на CSS. Однако, если вы не хотите использовать систему переключения CSS, она может быть идеально заменена с помощью нескольких строк JavaScript без особых усилий.

Надеемся, этот урок оказался вам по душе и вы сочли его полезным!

Источник

Готовим бургер меню на CSS, HTML и JQuery

Готовим бургер меню на CSS, HTML и JQuery

Приправим этот день приятным вкусом гамбургера! Как известно, верстальщики — это особый тип гурманов, который увлеченно прячет вкусняшки в разных частях сверстанной страницы, например, в меню. Вы только посмотрите, как постарался верстальщик, упаковавший такой длинный список пунктов меню в маленький трехэтажный гамбургер. Еще и добавил анимационный спецэффект: начинка из гамбургера высыпается с небольшой задержкой, так что нижний и верхний слои бургера успевают наклониться и образовать крестик!

Предлагаю закодить этот фокус в своем текстовом редакторе! И первым шагом на пути к бургеру будет техническое задание:

Техническое задание:

У нас имеются готовые html и css файлы со стандартным горизонтальным меню в шапке сайта и отличным юзабилити для просмотра страницы на широком экране. В настоящий момент меню выглядит следующим образом:

Текущий HTML-файл:

Текущий CSS-файл:

Шапочка выглядит пустовато: я не стала размещать логотип и другие элементы, чтобы не отвлекаться от работы с меню. Несмотря на это, при сужении экрана пункты меню наползают друг на друга и шапка превращается в хаос. Поэтому нужно для экранов мобильных устройств, то есть для таких гаджетов, у которых ширина менее 768px:

1. Приготовить аппетитный бургер и расположить его в верхней левой части экрана. Бургер должен выглядеть как на изображении ниже:

2. Создать скрипт, реагирующий на клик мыши по иконке бургера. При клике левой кнопки мыши, средний слой должен плавно исчезать, а верхний и нижний слои — менять углы наклона и образовывать крестик.

3. Создать CSS-стили для вертикального меню, которое будет открываться при клике по иконке бургера.

4. Создать анимацию плавного выдвижения вертикального меню из левого края страницы.

В итоге должно получиться адаптивное меню, которое разворачивается в горизонтальную плашку на широких экранах и сворачивается в приятный бургер на экранах мобильных устройств.

Инструменты: HTML, CSS, JQuery

1. Рисуем бургер меню в левом верхнем углу шапки

В соотсветствии с html-структурой, для бургер-меню у нас заготовлен блок с классом «menu-burger__header»:

Над этим блоком мы и поколдуем!

Так как потребность в бургере порождена желанием адаптировать меню к мобильным устройствам, то css-стили для узких экранов шириной менее 768px мы будем записывать внутри медиазапроса: @media(max-width: 767px)

Откроем css-файл и в самом конце файла разместим медиазапрос: «@media(max-width: 767px)< >» Между скобками медиазапроса расположим стили для класса «menu-burger__header»:

После этого можно сохранить стили и обновить страницу — бургер создан!

Дополнительно для мобильной версии я уменьшила высоту шапки и немного сдвинула вверх контентную часть:

В результате меню приобрело следующий вид:

Хм.. Бургер выглядит хорошо, однако, сползшее вниз меню мешает получить дозу эстетического удовольствия и требует хотя бы временно скрыть горизонтальное меню с виду. Для этого я внесу дополнение в css стили для узких экранов:

Теперь я довольна результатом и предлагаю двигаться дальше:

2. Пишем скрипт анимации бургера при клике мыши.

Пришло время подключить тяжелую артиллерию, а именно: JQuery! Для этого перед закрывающим тегом

Источник

Иконка гамбургер-меню на CSS+JS

На этом уроке мы создадим на чистом CSS саму иконку гамбургера-меню и с помощью JS функции, поменяем её внешний вид, на крестик (X), символизирующий – закрывание.

HTML код

Для начала, создадим общий контейнер, на который повесим событие мыши onclick. Внутри которого, будет три блока div с разными классами. Контейнер нужен для отображения символа указателя, когда пользователь наводит указатель мыши на div блоки. Первый блок изображает верхнюю линию, второй – среднюю и третий – нижнюю. Когда пользователь кликает по этой (this) иконке, выполняется функция burgerMenu(this). Что делает эта функция, мы разберем чуть ниже.

CSS код

Иконка гамбургер-меню не является ссылкой, поэтому при наведении на неё, сам курсор не появится, добавим его.

.container <
cursor: pointer;
>

Нарисуем темные линии, одинаковые для всех трех классов. Предвижу вопрос: «Зачем создавать отдельные классы, если линии все одинаковые?»

Ответ кроется в следующем коде. Нам надо анимировать каждую полоску в отдельности, чтобы в результате гамбургер-меню трансформировался бы в крестик (X). Верхняя и нижняя повернутся на 45 градусов, но в противоположных направлениях и переместятся на несколько пикселей.

Средняя полоска просто исчезнет, став прозрачной.

Кроме того, мы добавили новый класс change, это значит, что вся эта анимация произойдет, когда запустится функция, переключающая классы.

На данном этапе, иконка гамбургера готова, но при клике по ней ничего не происходит, поскольку мы не написали ещё функцию.

JS код

При клике на контейнер с событием onclick, выполнится JavaScript функция burgerMenu(), которая добавит через метод classList.toggle новое имя класса (change) к нему, что изменит стили каждой горизонтальной полосы: верхняя и нижняя трансформируются в крестик (X). Средняя полоса исчезнет и станет невидимой.

function burgerMenu(icon) <
icon.classList.toggle(«change»);
>

Попробуйте в действии анимацию.

Итоги

Наверняка сейчас, у читателя назрел главный вопрос. Зачем делать эту трансформацию-анимацию иконки? Где это использовать? И вы будете правы, во всей этой конструкции не хватает самого меню. При клике по иконке гамбургеру, должно раскрыться текстовое меню и крестик. При клике по крестику, текстовое меню закроется и мы снова увидим гамбургер.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

Узнайте, как сделать меню-иконку (меню-бургер для мобильных устройств), используя CSS.

Как сделать меню иконку

Если вы не используете библиотеку иконок, вы можете создать иконку основного меню с помощью CSS:

Меню иконка (бургер):

Анимированная иконка (кликните на ней):

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

Объяснение примера

Свойства width и height определяют ширину и высоту каждой полосы.

Анимированная иконка

Используйте CSS и JavaScript, чтобы изменить иконку меню на иконку «отменить / удалить» при нажатии на неё:

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

.container <
display: inline-block;
cursor: pointer;
>

Шаг 3) Добавить JavaScript:

Пример

Объяснение примера

HTML & CSS: Мы используем те же стили, что и раньше, только на этот раз мы оборачиваем элемент контейнера вокруг каждого элемента

Элемент контейнера используется для отображения символа указателя, когда пользователь наводит указатель мыши на блоки div (полосы). Когда на нем кликают, он выполняет функцию JavaScript, которая добавляет к нему новое имя класса, что изменяет стили каждой горизонтальной полосы: первая и последняя полоса трансформируются и поворачиваются, преобразуясь в букву «x». Полоса посередине исчезает и становится невидимой.

Как сделать на сайте меню бургер с помощью HTML / CSS? Видео