Категория > Самоучитель CSS > Иконки гамбургер меню — примеры сайтов, дизайнов и CSS скриптов - «Веб-дизайн»
Иконки гамбургер меню — примеры сайтов, дизайнов и CSS скриптов - «Веб-дизайн»24-05-2017, 06:00. Автор: Калерия |
Недавно мы публиковали заметку про использование кнопки гамбургер-меню для сайта и возможные ее альтернативы. Сегодня хотелось немного развить тему и поделиться несколькими сопутствующими наработками. В статье будет много ссылок на полезные проекты и скрипты, поэтому загрузка может занять некоторое время. Тем, кто столкнулся с данной задачей и ищет как сделать гамбургер меню на сайте пост однозначно пригодится. Данный элемент был разработан почти 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 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-ти полезных ссылок. Надеемся вам они пригодятся. Перейти обратно к новости |