Иконки гамбургер меню — примеры сайтов, дизайнов и CSS скриптов - «Веб-дизайн»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Наш опрос



Наши новости

       
24-05-2017, 06:00
Иконки гамбургер меню — примеры сайтов, дизайнов и CSS скриптов - «Веб-дизайн»
Рейтинг:
Категория: Самоучитель CSS

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


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


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


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


Star Wars


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


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


The Deepend Design


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


Outdated Browser


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


NewtonRunning


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


Brianhoff Design


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


Brooklyn Bridge Park


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


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


The Design Museum


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


Illusion


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


Xander


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


DeModern


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


Hooch Creative


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


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


Lalignerouge


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


Michaelvilleneuve


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


Chapoleone


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


Brand Junkie


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


Cofa Media


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


eWebDesign


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


Lequipe


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


Digital Deadly Sins


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


Buildin Amsterdam


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


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


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


Hamburger Button


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


Burger Menu2


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


MOARRRR


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


The Real Hamburger MenuIcon


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


Hamburger Icon


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


Wave


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


Menu Icon by Dave Gamez


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


BurgerIcon


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


Hi I’m Hamburger


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


Buttons by Nick Meloy


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


Hamburger Transformation


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


Open Close


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


HamburgerMenu by Tamas Kojo


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


Interactive Hamburger


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


Close Icon Animation


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


Dribbble Menu


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


Simple HamburgerMenu Animation


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


IconinFramer


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


Hamburger Icon Music


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


Menu Thing


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


Hamburger by Christian


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


OpenDADA


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


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


TheNounProject


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


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


Iconfinder


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


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


Stickpng


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


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


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


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


21 Hamburger Animations Menu


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


15 Hamburger Icons in CSS 


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


Code My UI


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


CSS Animated Hamburgers


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


Font Awesome


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


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


Можете почитать заметку про использование шрифта 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-ти полезных ссылок. Надеемся вам они пригодятся.


Недавно мы публиковали заметку про использование кнопки гамбургер-меню для сайта и возможные ее альтернативы. Сегодня хотелось немного развить тему и поделиться несколькими сопутствующими наработками. В статье будет много ссылок на полезные проекты и скрипты, поэтому загрузка может занять некоторое время. Тем, кто столкнулся с данной задачей и ищет как сделать гамбургер меню на сайте пост однозначно пригодится. Данный элемент был разработан почти 30 лет назад Нормом Коксом. Он идеально подходит для мобильных версий сайтов и всех проектов, где навигация не должна отвлекать или закрывать визуальную составляющую страницы. Сейчас иконка гамбургер-меню является неотъемлемой фишкой адаптивной разработки и наверняка знакома большинству пользователей сети. Не смотря на разные альтернативы и противников, она реально стала узнаваемым и универсальным символом. Примеры сайтов с гамбургер меню Перед тем как перейти к скриптам, предлагаем оценить некоторые графические наработки и примеры дизайнов сайтов, использующих этот механизм. Часть картинки отображает вид страницы до вызова меню, вторая — после. Посмотреть эффект в действии можно на самих ресурсах, кликая по скриншотам. Star Wars Интересная модификация меню с тематикой фильма Звездных Воен. The Deepend Design Outdated Browser NewtonRunning Brianhoff Design Brooklyn Bridge Park Часто при клике на «иконку гамбургера» полоска или блок меню выезжает сбоку или сверху. Эффект простой, но смотрится неплохо. The Design Museum Illusion Xander DeModern Hooch Creative Появление навигации в данном примере выглядит немного странно. Пользователю нужно делать лишний клик чтобы увидеть несколько пунктов меню, которые, по сути, никак не мешают остальной графике. Зачем их скрывать? — не совсем понятно. Сайт ниже аналогично вызывает подобный вопрос. Lalignerouge Michaelvilleneuve Chapoleone Brand Junkie Cofa Media eWebDesign Lequipe Digital Deadly Sins Buildin Amsterdam Анимация и иконки гамбургер-меню Также в сети можно найти примеры иконок гамбургер-меню для вдохновения. Иногда их совмещают с анимационными эффектами для наглядной демонстрации работы. Сама по себе кнопка выглядит слегка скучно, но вместе с разными «преобразованиями» она добавляет на сайт больше интерактива. Практически все материалы ниже были найдены в социальной сети дизайнеров Dribbble (кликайте по картинкам дабы перейти на исходники). Hamburger Button Burger Menu2 MOARRRR The Real Hamburger MenuIcon Hamburger Icon Wave Menu Icon by Dave Gamez BurgerIcon Hi I’m Hamburger Buttons by Nick Meloy Hamburger Transformation Open Close HamburgerMenu by Tamas Kojo Interactive Hamburger Close Icon Animation Dribbble Menu Simple HamburgerMenu Animation IconinFramer Hamburger Icon Music Menu Thing Hamburger by Christian OpenDADA Это лишь часть материалов, на Dribbble их гораздо больше — заходите на сайт и ищите по ключу «hamburger«, можно даже без приставки «menu«. Напоследок парочка дополнительных сайтов. TheNounProject Про Noun Project мы когда-то уже писали в посте с необычными наборами иконок. Там содержится достаточно много монохромных объектов из любых сфер жизни. Iconfinder Когда будете использовать поиск иконок Iconfinder обязательно выбирайте в левом меню «Free» в графе Price, то есть бесплатную стоимость изображений. Stickpng Еще один интересный сервис — Stickpng, где публикуются PNG клипарты на прозрачном фоне. Не смотря на то, что картинок здесь мало, возможно, кому-то нужен именно PNG формат. Скрипты гамбургер меню CSS / javascript В интернете имеется несколько подборок вариантов реализации иконки гамбургер-меню. Не будем перепечатывать все ссылки оттуда, а лишь укажем источники и наиболее интересные примеры. Заметки, нужно сказать, достаточно актуальные по времени публикации. Кликайте по скриншотам. 21 Hamburger Animations Menu 15 Hamburger Icons in CSS Code My UI CSS Animated Hamburgers Font Awesome Кстати, подходящая иконка есть и в популярном наборе Font Awesome. Можете почитать заметку про использование шрифта Font Awesome в WordPress, если ваш проект реализован на этой CMS. Практически во всех остальных случаях из подборок вы найдете код и описание как сделать гамбургер меню в CSS и JS (в частности jQuery). Вот парочка наиболее интересных решений: Gooey Menu See the Pen Gooey Menu by Lucas Bebber (@lbebber) on CodePen. Menu Toggle SVG Animation See the Pen Menu toggle svg animation by Tamino Martinius (@Zaku) on CodePen. Hamburger Icon Morphing Menu See the Pen Hamburger icon with Morphing Menu by Sergio (@sergioandrade) on CodePen. Pure CSS off-canvas Menu flexbox See the Pen Pure CSS off-canvas menu with flexbox by Zoe Gillenwater (@zomigi) on CodePen. UI/UX Improvements with CSS See the Pen UI with UX improvements with only CSS by Twikito (@Twikito) on CodePen. Toggle Menu by Vladislav See the Pen Toggle Menu by Vladislav (@Kirbaba) on CodePen. Итого в статье мы постарались собрать много разных материалов по теме: начиная с примеров сайтов с гамбургер меню, графическими наработками дизайнеров и заканчивая реальными скриптами гамбургер меню на CSS и javascript. Всего вышло около 60-ти полезных ссылок. Надеемся вам они пригодятся.

Теги: CSS Веб-дизайн, меню гамбургер Icon меню, примеры

Просмотров: 4 147
Комментариев: 0:   24-05-2017, 06:00
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме: