20 иконок гамбургер меню с крутой анимацией на CSS3 и HTML5

Иконка "гамбургера" уже устоявшийся стандарт для открытия всплывающего или full-screen меню. Такое меню отлично подходит для адаптивной вёрстки, особенно для мобильных и планшетных версий. Но как сделать анимацию и саму иконку более креативной?

Мы подобрали самые вдохновляющие примеры иконок "гамбургера", которые вы запросто сможете применить в любом проекте. Большинство примеров работают на HTML5 & CSS3, но некоторые нуждаются и в JavaScript. Вы легко можете взаимодействовать с примерами ниже (вкладка "Result" у каждого блока), а что бы увидеть исходный код смотрите  вкладки "HTML", "CSS", "JS".

Hamburger Menu (with Cheese) by Michael Smart

CSS Animated Hamburger Icon by Brydave

Ultimate Hamburger Menu by CharlesSmart

Atomic Menu by Alex Coven

Star Wars Icon by Rıza Selçuk Saydam

Menu Toggle by Tamino Martinius

Animated Burger/Menu Icon by Nicholas M. Smith

Drawn Hamburger Transition by Jesse Couch

Material Design by Arjan Jassal

Frosty by Graham Wilsdon

CSS Gooey Menu (v4) by Lucas Bebber

PFullscreen Navigation Menu by Brenden Palmer

Morphing Hamburger by Sergio

Animated Hamburger by Steven Fabre

Another Top Menu by BJack

Animated Hamburger Menu by Matthew Ladner

Open – Close by Vineeth.TR

CSS3 Only Hamburger by Dawid Krajewski

Jumping Hamburger by Jack Thomson

Hamburger Menu by j0be