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

Содержание

Быстрое создание «гамбургер» меню на jQuery

Всем привет. С вами Corvax. Сегодня я хочу продолжить тему мобильных меню и предложить вам сделать тоже меню но только используя jQuery. Поехали.

Создание HTML макета

Добавление основных CSS стилей

Добавление JS

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

Давайте подробнее рассмотрим что тут написна. В начале мы вешаем собитые .on по клику на самоу кнопку «Меню». В нутри этого события мы добовляем на $(«.menu») выподающее меню функцию slideToggle() которая будет производить плавное открытие и закрытие выподающего меню.

Есть небольшая проблема которая у нас возникнет при переходе версий сайта и нажитие на кнопку «Меню», а именно будет скрываться блок с самими пунктами меню т.к. по умолчанию функция slideToggle() при закрытие добавляет атребут «display: none». Что бы исправить этот баг нужно вызвать колбэк(функция которая будет вызыватся после отработки основной функции) для функции slideToggle() . В нутри колбека мы пишем условие. Если у нас атрибу в блоке меню равен «display: none» тогда мы удаляем этрибут «style».

Заключение

Вот так отчень просто и быстро мы создали адаптивно меню «гамбургер» которое вы можете лекго использовать в смоих проектах. Тут вы можете скачать исходники. С вами был Corvax. Да новых встреч!

CSS анимация иконки гамбургер меню

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

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

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

HTML разметка

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

20 полезных сниппетов CSS для создания адаптивного меню

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

CSS-Only Dark Menu от Джона Ербанка

Кроме дизайна этот сниппет задает адаптивное выпадающее меню. Панель навигации при стандартном окне занимает обычное горизонтальное положение.

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

Full Responsive Portfolio от Celine

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

Bootstrap Navbar от Bobby

Этот сниппет кода содержит несколько контрольных точек и устанавливается поверх Bootstrap .

При больших размерах окна просмотра ссылки навигации располагаются рядом с логотипом, а на меньших контрольных точках они смещаются вниз в собственную панель. Когда окно просмотра становится еще меньше, ссылки « прячутся » под переключатель меню. Это распространенный метод работает во всех браузерах.

Илон Маск рекомендует:  Что такое код msg_remove_queue

Clean Dropdown Toggle от Бойда Массье

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

Animated Sliding Bar от Антуана Виниаля

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

На небольших экранах используется тот же эффект, но меню отображается вертикально, а не горизонтально. Обратите внимание на красивый эффект анимации, который управляется с помощью класса CSS .active .

Basic Responsive Menu от Эша Нельсона

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

Sliding Drawer Hamburger Nav от Ханьлиня Чонга

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

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

Single-Page Mic Nav от Travis

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

Morphing Circular Menu от Sergio

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

Данное решение вряд ли найдет широкое применение в коммерческой сфере. Но все равно это замечательный пример того, какое широкое поле для творчества предоставляет адаптивный дизайн.

Pure CSS Flexbox Nav от Джо Уоткинса

Флексбокс CSS3 — это термин, используемый разработчиками, чтобы обозначить гибкую модель макетов CSS3 . Мы уже публиковали полное руководство по Flexbox, с которым я советую вам ознакомиться.

Это меню построено на Flexbox , в котором ссылки распределяются в панели равномерно, независимо от размера экрана. Весь код написан на чистом HTML и CSS , реализована поддержка выпадающих меню для сайта.

Animated Toggle от Джо Баггали

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

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

Flexible Nav Menu от gantit

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

Pure CSS Tabs от Мартина Гайдичара

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

Pure CSS Breadcrumbs от Оливера Ноблича

« Хлебные крошки » не слишком популярны среди дизайнеров и разработчиков, но их вполне можно использовать для интерфейса навигации. Эти хлебные крошки реализованы без эффектов анимации, зато написаны на чистом CSS .

Batman Nav от Mighty Shaban

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

Система меню красиво скомпонована. Она может пригодиться при разработке любого одностраничного макета.

Multilevel Dropdown от Стефани Уотер

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

Pure CSS eBook Webapp от Энди Фицсаймона

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

Equal-Width Navigation от Дориана Коврана

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

Stylized Multilevel Navbox от Эндрю ДеБрю

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

Dynamic Sliding Menu Bar от Филиппа Ферча

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

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

Заключение

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

Данная публикация представляет собой перевод статьи « 20 Useful CSS Snippets for Responsive Menus » , подготовленной дружной командой проекта Интернет-технологии.ру

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

Доброго времени суток! Пытаюсь научиться делать гамбургер-меню, да не получается.

Помогите советом как сделать эту конструкцию рабочей на мобильных устройствах? Чтобы при @media 600px меню и ссылки на сети скрывались под кнопкой и становились рядом с логотипом. Заранее спасибо!

2 ответа 2

1) Добавить после menu__logo

2) Подключить jquery

3) В CSS добавить:

4) Добавить короткий JS код:

Что до самой иконки «гамбургера», то в сети полно готовых решений. Все остальное — это дело css

Гамбургер меню на css с анимацией

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

Илон Маск рекомендует:  Отладчик javascript

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

Html разметка для гамбургер меню

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

Базовые CSS стили

Теперь давайте добавим немного базовых стилей. Эти css правила очень просты, думаю не вызовут у вас трудностей в понимании.

Функциональность открытия и закрытия

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

Создание меню в закрытом состоянии

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

Ниже код который воплощает это в жизнь.

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

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

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

Магия в деталях

We can do that in CSS too! Basically we need to select each element (using :nth-child) and set a progressively increased transition-delay. But that is certainly a repetitive work. And, what if we have more items? Don’t worry, we can do it better with a bit of SCSS magic:

Если мы посмотрим внимательно на gif изображение с меню, мы заметим что все элементы меню появляются и скрываются не одновременно, а друг за другом. Мы также можем сделать с помощью SCSS!

В основном нам нужно выбрать каждый элемент (используя :nth-child) и задать свойство transition-delay с значением которое увеличивается постоянно. Согласитесь, это очень рутинная работа. И что если у нас будет огромное количество элементов меню? В такой ситуации мы можем использовать преимущества SCSS.

Анимация бургер меню на CSS и JavaScript

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

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

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

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

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

Как сделать гамбургер кнопку на HTML и CSS

В данной статье рассмотрим простейший пример реализации анимированный кнопки-гамбургер (hamburger).

Похожие кнопки вы наверняка встречали в сайтах с мобильной адаптацией. В bootstrap 3/4 версии так же можно найти такую кнопку.

Для реализации данной кнопки нам понадобятся:

  1. HTML
  2. CSS3 (в примере будем использовать SCSS)
  3. JavaScript (а точнее jQuery)

Как наша кнопка выглядит в HTML:

Ничего сложного здесь нет:
DIV с классом «hamburger» — сама наша кнопка с заранее заданными размерами.
SPAN с классом «hamburger-line» — линии кнопки.

Далее идет наш SCSS код:

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

  1. Свойство «transition» обеспечивает нам анимацию
  2. Свойство «transform» позволяет нам трансформировать элементы
  3. А «:nth-child» — псевдо класс.

И на конец JavaScript код в исполнении jQuery:

здесь, по клику на гамбергере, мы добавляем или удаляем с него класс «hamburger-active». Которому в CSS задана анимированная трансформация с поворотом на 45 градусов первой и третей линии. А вторая полоска (SPAN с классом «hamburger-line») у нас прячится.

Саму реализацию можно найти на этой странице.

39 CSS Hamburger Menu Icons

F ree HTML and CSS hamburger menu icons. Update of May 2020 collection. 12 new items.

Author

  • Himalaya Singh
  • January 27, 2020

Made with

About the code

Hamburger Menu Button Interaction

Hamburger menu button interaction in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Aaron Iker
  • November 6, 2020

Made with

  • HTML / CSS (SCSS)

About the code

Hamburger Animation

Hamburger/Close icon transition.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Rhys Matthew P
  • October 19, 2020

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Click Highlighter on Menu Button Using :after

Using an :after pseudo element on a menu button, we can achieve a click highlighter effect. Similar to that of Google’s Material Design.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Elitsa Dimitrova
  • September 2, 2020

Made with

  • HTML / CSS / JavaScript

About the code

Hamburger Menu

Simple hamburger menu icon with little jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Sil van Diepen
  • August 21, 2020

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Hamburger Menus

Menu CSS only effects.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Mikael Ainalem
  • August 20, 2020

Made with

About the code

Flipping Burgers

A set of hamburger menu open/close animations in SVG, HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • rosalieelphick
  • August 7, 2020

Made with

About the code

CSS Hamburger Menus

Hamburger menu animations, all with pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Tamino Martinius
  • August 6, 2020

Made with

  • HTML / CSS (PostCSS)

About the code

Hamburger Menu Animations

Four different menu animations for menu button toggle between hamburger, cross and back icon.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Amli
  • June 30, 2020

Made with

  • HTML / CSS / JavaScript

About the code

Button Navigation

Animated button nav (single element with drawing style) by using CSS & JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Sean B
  • June 25, 2020

Made with

  • HTML / CSS (SCSS)

About the code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Tony Banik
  • June 20, 2020

Made with

  • HTML (Slim) / CSS (SCSS)

About the code

Hamburger Icon with Checkboxes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Gareth
  • June 19, 2020

Made with

About the code

Hamburger Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

  • Ahmad Emran
  • January 29, 2020

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Hamburger Icons Animations

CSS hamburger icons with great hover states and animations.

Author

  • Ryan Mulligan
  • December 20, 2020
Илон Маск рекомендует:  Создание первого приложения на Node

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript

About the code

Flipping Menu Toggle

What the flip is this? Not ideal for production but here’s a fun menu toggle experiment with CSS animations.

Author

  • Kriszta
  • September 27, 2020

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Cool Hamburger Toggle Effect

Creative hamburger toggle effect.

Author

  • Rodrigo Sousa
  • September 7, 2020

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Hamburger Button

Sexy hamburger button.

Author

  • Sarath AR
  • 23.08.2020

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Hamburger Open Animation

HTML, CSS and JS hamburger open animation.

Author

  • thelaazyguy
  • 01.08.2020

Made with

  • HTML
  • CSS
  • JavaScript
  • SVG

About the code

SVG Menu Animation

Hamburger menu animtion with svg element.

Author

  • Ajay
  • 29.06.2020

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Hamburger Icon Animation

Simple CSS hamburger icon animation with little jQuery.

Author

  • Valery Alikin
  • June 22, 2020

Made with

  • HTML
  • CSS/Less
  • JavaScript (jquery.js)

About the code

Hamburger menu animation.

Author

  • Jose Rosario
  • 29.03.2020

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Hamburger Menu Button

HTML, CSS and JavaScript hamburger menu button.

Author

  • Bennett Feely
  • 13.03.2020

Made with

  • HTML/Haml
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

3D Hamburger Transformicon

3D hamburger transformation with HTML, CSS and JS.

Demo Image: Click Me! Hamburger Menu

Click Me! Hamburger Menu

Author

  • Kurt Petrek
  • November 11, 2020

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

About the code

Half Second Hamburger Helper

A showcase of hamburger menus.

Demo Image: Hamburger Icon Animations

Hamburger Icon Animations

12 hamburger icon animations.
Made by Rosa
November 6, 2020

Demo Image: Atomic Hamburger Menu CSS

Atomic Hamburger Menu CSS

HTML and CSS atomic hamburger menu.
Made by Alex Coven
October 10, 2020

Demo Image: Hamburger Icon Animations

Hamburger Icon Animations

Hamburger icon animations in HTML, CSS and JavaScript.
Made by Carlos
August 13, 2020

Demo Image: Animated Burger/Menu Icon

Animated Burger/Menu Icon

HTML, CSS and JavaScript animated burger/menu icon.
Made by Nicholas M. Smith
July 31, 2020

Demo Image: Hamburger Menu Elastic

Hamburger Menu Elastic

Hamburger menu elastic with HTML, CSS and JavaScript.
Made by Davide Cantelli
July 6, 2020

Demo Image: 20 Menu Buttons To Hamburger

20 Menu Buttons To Hamburger

Menu button to hamburger. Styled & animated with pure CSS.
Made by Yinxi Chen
June 5, 2020

Demo Image: Animated Menu Icon

Animated Menu Icon

Animated menu icon toggling between hamburger for open and X for exit.
Made by Eric Grucza
May 27, 2020

Demo Image: Simple Navbar Toggle To X (Vanilla JS)

Simple Navbar Toggle To X (Vanilla JS)

A simple CSS and JS solution to make a standard Navbar “hamburger” into an X on click, and then back to a hamburger when clicked. Requires no dependencies, written with vanilla JS.
Made by Joseph Gengarella
April 3, 2020

Demo Image: Menu Icon Animation

Menu icon animation with HTML, CSS and JavaScript.
Made by Marius Balaj
March 23, 2020

Author

  • Ricardo Prieto
  • February 8, 2020

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Hamburger Icon Animation To Cross Underline With CSS

«We animate the hamburger icon, which gives access to the responsive menu using transformations and CSS pseudo elements along with HTML, and turning the element into a new menu close icon that improves the UX in case the user wants to return to the previous view.» — Ricardo Prieto

Demo Image: CSS(SASS) Hamburger Menu Animation

CSS(SASS) Hamburger Menu Animation

A small hover animation on a hamburger menu icon.
Made by Derek Morash
January 11, 2020

Demo Image: SVG Menu Icon

SVG Menu Icon

Codrops SVG menu icon with popmotion.
Made by Popmotion
November 12, 2015

Demo Image: Expanding Hamburger Navigation Icon

Expanding Hamburger Navigation Icon

Expanding hamburger menu that displays the intent of the button more clearly than a typical hamburger menu icon.
Made by Ryan Canfield
May 11, 2015

Demo Image: Hamburger Menu Animation

Hamburger Menu Animation

Just another hamburger menu animation.
Made by Sebastian Popp
April 2, 2015

Demo Image: Drawn Hamburger Transition

Drawn Hamburger Transition

More fun with hamburger icon transitions.
Made by Jesse Couch
September 4, 2014

Значок меню гамбургера на чистом CSS

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

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

.namigazugtum <
position: relative;
display: inline-block;
width: 1.24em;
height: 0.8em;
margin-right: 0.3em;
border-top: 0.2em solid #fffbfb;
border-bottom: 0.2em solid #fffcfc;
text-shadow: 0 1px 0 #151414;
>

.namigazugtum:before <
content: «»;
position: absolute;
top: 0.3em;
left: 0px;
width: 100%;
border-top: 0.2em solid #f7efef;
>

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

Как сделать гамбургер кнопку на HTML и CSS

В данной статье рассмотрим простейший пример реализации анимированный кнопки-гамбургер (hamburger).

Похожие кнопки вы наверняка встречали в сайтах с мобильной адаптацией. В bootstrap 3/4 версии так же можно найти такую кнопку.

Для реализации данной кнопки нам понадобятся:

  1. HTML
  2. CSS3 (в примере будем использовать SCSS)
  3. JavaScript (а точнее jQuery)

Как наша кнопка выглядит в HTML:

Ничего сложного здесь нет:
DIV с классом «hamburger» — сама наша кнопка с заранее заданными размерами.
SPAN с классом «hamburger-line» — линии кнопки.

Далее идет наш SCSS код:

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

  1. Свойство «transition» обеспечивает нам анимацию
  2. Свойство «transform» позволяет нам трансформировать элементы
  3. А «:nth-child» — псевдо класс.

И на конец JavaScript код в исполнении jQuery:

здесь, по клику на гамбергере, мы добавляем или удаляем с него класс «hamburger-active». Которому в CSS задана анимированная трансформация с поворотом на 45 градусов первой и третей линии. А вторая полоска (SPAN с классом «hamburger-line») у нас прячится.

Саму реализацию можно найти на этой странице.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL