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