20 іконок гамбургер меню з крутої анімацією на CSS3 і HTML5

Іконка "гамбургера" вже усталений стандарт для відкриття спливаючого або full-screen меню. Таке меню відмінно підходить для адаптивної верстки, особливо для мобільних і планшетних версій. Але як зробити анімацію і саму іконку більш креативною?

Ми підібрали самі надихаючі приклади іконок "гамбургера", які ви запросто зможете застосувати в будь-якому проекті. Більшість прикладів працюють на HTML5 & amp; 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