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

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

Меню 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

Сразу два варианта реализации.

Демо

Скачать