Css burger: Как создать гамбургер меню, используя только CSS и HTML | by Андрей Крохин

Как сделать бургер меню css

Сегодня будет простенькая статья о том как сделать простое выезжающее меню без использования скриптов, то есть на чистом html + CSS. Данный урок будет полезен тем, кто верстает простые макеты, хочет создать свой сайт и изучает верстку. Конечно же, подойдет и мастерам, что создают темы на WordPress. Материал интересный и отлично подойдет для создания простых меню или меню для мобильных устройств, то бишь которое появляется на адаптивных страницах.

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

Первое что понадобится — добавить html разметку. Это обычное меню сделанное списком, но его особенность это checkbox. Обычный чекбокс с label, которые мы и превратим в кнопку, то есть бургер меню. Бургер меню — это обычно три полоски расположены друг под другом, напоминая бургер. Поэтому меню и носит такое название. Для посетителей сайтов и пользователей мобильных устройств данный вид кнопки привычный и люди интуитивно понимают что это кнопка меню. Как раз нажимая на наш чекбокс в виде бургера и будет происходить появление панели с пунктами меню.

В нужное вам место на сайте добавьте html следующий код:

Давайте я подробно распишу что и как тут устроено и для чего каждый элемент

• Сначала идет главный блок-контейнер с классомburger-menu, внутри которого и располагается наше меню и кнопка бургер. Можете задавать любой класс или вообще изъять все меню и кнопку из контейнера. Он не обязателен. Он сделан для удобства. Возможно вам он будет мешать. Например, вы решите разместить меню в виде UL списка в одном месте, а кнопку-чекбокс бургер меню в другом.
• Далее идет чекбокс с ID — menu-toggle, которое менять нельзя (можно, если вы понимаете что делает и аналогично смените в стилях CSS все подвязки к этому айди). Чекбокс будет скрываться но он и будет кнопкой, его мы модифицируем.
• Далее идет label с классом —menu-btn, менять тоже не нужно, если для вас это не критично. Внутри label расположен span элемент, который в будущем будет полосками бургер меню. Сделаем это благодаря псевдоэлементам before и after.
• После идет наше основное меню в виде ul списка с классом — menubox. Наш чекбокс, будет использовать данный класс, чтобы открыть панель. Тут как вам удобно, располагаете пункты вашего меню со ссылками. Классы, порядок, структуру — делаете как вам нравится, у меня просто сделано для примера пять простых пунктов в виде ссылок.

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

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

Задаем стили нашему label и span внутри него, чтобы он стал кнопкой в виде бургера.

Далее задаем стили для нашего меню, то бишь ul списку.

left: -100%; — в шестой строке это и есть расположение панели меню слева за пределами страницы. Если надо справа, смените на right: -100%;.

Ну и мои стили для пунктов меню. Тут можете задавать что хотите, свои, эти стили не обязательны

Теперь скрываем стандартный чекбокс в виде галочки

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

В предпоследнем рядке, мы указываем, что панель появится слева в самом начале страницы — left: 0;. Если хотите справа, то просто смените на right: 0;.

Ну и весь код целиком, если вы не копировали по порядку, предыдущие отрезки.

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

На этом все, спасибо за внимание.

Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты 🙂

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

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

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

Разметка

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

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

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

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

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

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

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

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

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

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

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

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

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

Если мы посмотрим ближе на gif, то увидим, что все пункты меню перемещаются не одновременно, а в шахматном порядке. Мы можем сделать такое и в CSS! В принципе нам нужно выбрать каждый элемент (с помощью :nth-child ) и задать постепенное повышение значения transition-delay . Это, безусловно, повторяющаяся работа. А что если у нас будет больше элементов? Не волнуйтесь, мы можем сделать всё лучше, используя немного магии SCSS:

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

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

Вывод

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

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

Всем привет. В этой статье вы узнаете как сделать бургер меню на CSS. Отрисуем саму иконку и добавим ей анимацию при нажатии. JS нужен будет для того, чтобы вызвать какое-то событие по клику, к примеру показать/скрыть меню на сайте. Вот как это выглядит:

Приступим. В разметке создадим блок, в который поместим пустой элемент спан, к нему добавим псевдоэлементы before и after, это и будет нашим бургер меню на CSS.

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

Анимация бургер меню готова. Осталось добавить несколько строчек JavaScript кода, чтобы оживить нашу иконку.

Вот, собственно, и вся магия. Теперь, к уже имеющейся JS функции можно добавить еще одно событие, которое будет что-то вызывать. Это может быть все, что угодно, но чтобы не нарушать логику мы сделаем мобильное меню.

Отлично. Теперь вы знаете, как сделать полноценное бургер или гамбургер меню на CSS и анимировать его при помощи JavaScript или jQuery. Анимация может быть какой угодно, это дело вкуса. Но мне нравится этот вариант.

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

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

Активную часть этой задачи, а именно разворачивание и сворачивание пунктов гамбургер меню можно реализовать средствами JS с использованием библиотеки jQuery или на чистом CSS. Здесь сразу оговорюсь, что в CSS делается это «костыльным способом» на checkbox-ах, позже я поясню что это.

Гамбургер меню на JS

1. Верстаем обычное верхнее меню навигации с одним параграфом контентной части сайта

2. Вставляем иконку гамбургер в меню навигации

На сайте iconfinder.com находим нужную иконку, меняем цвет на нужный (Edit Icon), скачиваем в формате SVG, открываем в браузере, копируем код из веб-инспектора.

Вставляем скопированный выше код вместо текста «Меню».

На данном этапе на десктопных разрешениях меню выглядит так, SVG иконку мы скрыли, прописав следующий код.

.menuBurger display: none; /* иконка гамбургер скрыта */
>

3.

Переходим к медиа-запросу

На маленькой ширине экрана, от нуля до 530 пикселей. Нам надо сделать наоборот, показать иконку гамбургер меню и спрятать все пункты меню, стоящие в ряд.

@media screen and (max-width: 530px) .menu display: none; /* пункты меню скрыты */
background: #f1f2f4;
position: absolute;
>

.menu li float: none; /* пункты меню в столбцах */
>

.menuBurger display: inline-block; /* иконка гамбургер видна */
>
>

4. Развернуть гамбургер меню

Что нужно сделать, перед тем, как раскрыть гамбургер меню? Надо временно закомментировать в CSS коде медиа-запроса /* display: none; */ и горизонтальное меню превратить в вертикальное. Для этого отменим действие float-а, добавим к медиа-запросу следующий код.

Результат на скриншоте

Раскомментируем обратно display: none; — скроем вертикальное меню. Теперь дело осталось за малым – создать событие, чтобы при клике по иконке, разворачивалось и сворачивалось вертикальное меню.

Попробуйте уменьшить браузер и вы наглядно увидите, как работает гамбургер меню на JS

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

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

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

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

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

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

Она выглядит вот так:

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

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

Анимированные гамбургеры CSS (HTML/CSS + React)

Доступны как простые HTML/CSS или как компоненты React. Этот компонент гамбургера является частью набора пользовательского интерфейса Dashboard 3.0 с поддержкой Typescript! (гитхаб).

Спасибо за поддержку! Если вы хотите следить за моей работой, вы можете читать мои статьи на Medium или проверять мои ежедневные истории с изображениями.

Сжать

Повернуть

Стрелка вправо

Стрелка вверх

Стрелка вниз

Использование HTML/CSS

Работа с HTML очень проста и состоит из нескольких шагов.

Получение CSS

Чтобы упростить CSS, вы должны импортировать только то, что вам нужно!

Вы найдете соответствующий стиль в репозитории, следуйте по пути ./packages/__YourBurgerStyle__/dist/styles. css

Загрузите файл и свяжите его с вашим html или скопируйте в основной файл.

Разметка HTML

HTML очень простой, это пример использования анимации стрелки:

 <дел>
  <дел>

 <дел>
  <дел>