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

к содержанию ↑

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

Добавить комментарий