Иконки гамбургер меню — примеры сайтов, дизайнов и CSS скриптов

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

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

Примеры сайтов с гамбургер меню

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

Star Wars

Star Wars

Интересная модификация меню с тематикой фильма Звездных Воен.

The Deepend Design

The Deepend Design

Outdated Browser

Outdated Browser

NewtonRunning

NewtonRunning

Brianhoff Design

Brianhoff Design

Brooklyn Bridge Park

Brooklyn Bridge Park

Часто при клике на «иконку гамбургера» полоска или блок меню выезжает сбоку или сверху. Эффект простой, но смотрится неплохо.

The Design Museum

The Design Museum

Illusion

Illusion

Xander

Xander

DeModern

DeModern

Hooch Creative

Hooch Creative

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

Lalignerouge

Lalignerouge

Michaelvilleneuve

Michaelvilleneuve

Chapoleone

Chapoleone

Brand Junkie

Brand Junkie

Cofa Media

Cofa Media

eWebDesign

eWebDesign

Lequipe

Lequipe

Digital Deadly Sins

Digital Deadly Sins

Buildin Amsterdam

Buildin Amsterdam

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

Также в сети можно найти примеры иконок гамбургер-меню для вдохновения. Иногда их совмещают с анимационными эффектами для наглядной демонстрации работы. Сама по себе кнопка выглядит слегка скучно, но вместе с разными «преобразованиями» она добавляет на сайт больше интерактива. Практически все материалы ниже были найдены в социальной сети дизайнеров Dribbble (кликайте по картинкам дабы перейти на исходники).

Hamburger Button

Hamburger Button

Burger Menu2

Burger Menu2

MOARRRR

MOARRRR

The Real Hamburger MenuIcon

The Real Hamburger MenuIcon

Hamburger Icon

Hamburger Icon

Wave

Wave

Menu Icon by Dave Gamez

Menu Icon by Dave Gamez

BurgerIcon

BurgerIcon

Hi I’m Hamburger

Hi I'm Hamburger

Buttons by Nick Meloy

Buttons by Nick Meloy

Hamburger Transformation

Hamburger Transformation

Open Close

Open Close

HamburgerMenu by Tamas Kojo

HamburgerMenu by Tamas Kojo

Interactive Hamburger

Interactive Hamburger

Close Icon Animation

Close Icon Animation

Dribbble Menu

Dribbble Menu

Simple HamburgerMenu Animation

Simple HamburgerMenu Animation

IconinFramer

IconinFramer

Hamburger Icon Music

Hamburger Icon Music

Menu Thing

Menu Thing

Hamburger by Christian

Hamburger by Christian

OpenDADA

OpenDADA

Это лишь часть материалов, на Dribbble их гораздо больше — заходите на сайт и ищите по ключу «hamburger«, можно даже без приставки «menu«. Напоследок парочка дополнительных сайтов.

TheNounProject

TheNounProject

Про Noun Project мы когда-то уже писали в посте с необычными наборами иконок. Там содержится достаточно много монохромных объектов из любых сфер жизни.

Iconfinder

Iconfinder

Когда будете использовать поиск иконок Iconfinder обязательно выбирайте в левом меню «Free» в графе Price, то есть бесплатную стоимость изображений.

Stickpng

Stickpng

Еще один интересный сервис — Stickpng, где публикуются PNG клипарты на прозрачном фоне. Не смотря на то, что картинок здесь мало, возможно, кому-то нужен именно PNG формат.

Скрипты гамбургер меню CSS / Javascript

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

21 Hamburger Animations Menu

21 Cool CSS Hamburger Menu Animations

15 Hamburger Icons in CSS 

15 Hamburger Icons in CSS

Code My UI

Code My UI

CSS Animated Hamburgers

CSS Animated Hamburgers

Font Awesome

Кстати, подходящая иконка есть и в популярном наборе Font Awesome.

Font Awesome

Можете почитать заметку про использование шрифта Font Awesome в WordPress, если ваш проект реализован на этой CMS. Практически во всех остальных случаях из подборок вы найдете код и описание как сделать гамбургер меню в CSS и JS (в частности jQuery).

Вот парочка наиболее интересных решений:

Gooey Menu

Menu Toggle SVG Animation

Hamburger Icon + Morphing Menu

Pure CSS off-canvas Menu + flexbox

UI/UX Improvements with CSS

Toggle Menu by Vladislav

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


Комментариев - 2 для поста Иконки гамбургер меню — примеры сайтов, дизайнов и CSS скриптов
  1. ]]> Андрей Антипов ]]> (Июль 7, 2017)

    Иконки красивые, спору нет. Но хотелось бы больше разнообразия. Тем более, что времени на создание подобные иконок уходит немного, раз их можно прямо с помощью кода css «нарисовать».

  2. ]]> Tod ]]> (Июль 8, 2017)

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

Оставить комментарий
для статьи Иконки гамбургер меню — примеры сайтов, дизайнов и CSS скриптов