Иконки гамбургер меню — примеры сайтов, дизайнов и CSS скриптов - «Веб-дизайн»
Google намерена превратить ChromeOS в Android - «Новости сети»
Google намерена превратить ChromeOS в Android - «Новости сети»
Пользователи iPhone 16 стали слышать чужие голоса из динамиков - «Новости сети»
Пользователи iPhone 16 стали слышать чужие голоса из динамиков - «Новости сети»
Samsung придумала, как сделать смартфоны тоньше — представлена перископическая камера ISOCELL ALoP - «Новости сети»
Samsung придумала, как сделать смартфоны тоньше — представлена перископическая камера ISOCELL ALoP - «Новости сети»
Nike выпустила кроссовки, почти полностью напечатанные на 3D-принтере - «Новости сети»
Nike выпустила кроссовки, почти полностью напечатанные на 3D-принтере - «Новости сети»
Китайские производители памяти захватывают рынок, предлагая DDR4 за полцены - «Новости сети»
Китайские производители памяти захватывают рынок, предлагая DDR4 за полцены - «Новости сети»
ИИ-ускорители Nvidia Blackwell страдают от перегрева — из-за этого придётся менять дизайн серверов - «Новости сети»
ИИ-ускорители Nvidia Blackwell страдают от перегрева — из-за этого придётся менять дизайн серверов - «Новости сети»
Apple выпустит AirTag 2 в следующем году — обновлённый трекер станет точнее и не только - «Новости сети»
Apple выпустит AirTag 2 в следующем году — обновлённый трекер станет точнее и не только - «Новости сети»
Спутниковый интернет SpaceX Starlink применили в тестах сверхзвуковых и гиперзвуковых самолётов - «Новости сети»
Спутниковый интернет SpaceX Starlink применили в тестах сверхзвуковых и гиперзвуковых самолётов - «Новости сети»
Casio представила смарт-кольцо в виде часов — оно даже показывает время, а также имеет световой будильник - «Новости сети»
Casio представила смарт-кольцо в виде часов — оно даже показывает время, а также имеет световой будильник - «Новости сети»
Второй крупнейший производитель видеокарт в мире бежит из Китая, чтобы выпускать GeForce RTX 5090 и RTX 5080 - «Новости сети»
Второй крупнейший производитель видеокарт в мире бежит из Китая, чтобы выпускать GeForce RTX 5090 и RTX 5080 - «Новости сети»
Новости мира Интернет » Самоучитель 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 / j

Смотрите также

А что там на главной? )))



Комментарии )))