Коллекция из 10+ анимированных «иконок-гамбургеров» для меню

43940

Иконка-гамбургер — стала наиболее популярным решением для отображения меню на мобильных устройствах. Благодаря компактности и оригинальным анимациям, пользоваться таким меню не только удобно, но и приятно. Здесь я буду собирать самые интересные на мой взгляд готовые решения. В будущем, список иконок для мобильного меню будет пополняться. Я постарался собрать разнообразные иконки по форме, цвету и анимации. Если вы обладаете базовыми навыками верстки, интегрировать на свой сайт не составит большого труда.

Меню Header Navigation

Одна из особенностей иконки - анимация выполнена на чистом CSS.
Демо
Скачать

Click me! Hamburger menu

Экспериментальное меню-гамбургер, основанное на растяжении элементов. Изменение значения и внешнего вида кнопки отображается и сменой цвета.
Демо
Скачать

Atomic Hamburger Menu CSS

При наведении, 'гамбургер' превращается в анимированную иконку атома. Думаю, что такая реализация подходит для сайтов образовательной тематики.
Демо
Скачать

Hamburger Menu Elastic

Особенность этой иконки - нижний элемент выполнен в виде текста. Смотрится очень оригинально.
Демо
Скачать

Animated Menu Icon

Анимирован не только сам переключатель, но и рамка.
Демо
Скачать

Simple Navbar Toggle To X (Vanilla JS)

Простая анимация, основанная на исчезновении/появлении средней линии и смене угла наклона верхней и нижней.
Демо
Скачать

Drawn Hamburger Transition

Плавный переход иконки из одного состояния в другое.
Демо
Скачать

Animated Hamburger Menu

Анимация заключается в слиянии полос иконки и смены угла их наклона.
Демо
Скачать

SVG CSS3 Menu / Burger Button

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

Hamburger Animation

Демо
Скачать

Menu «Hamburger» Icon Animations

Сразу два варианта реализации.
Демо
Скачать
Добавить комментарий

B I PHP JS

Made with by CodyShop