5 CSS Hamburger Menu Icons

November 09, 2017 No comments CSS Code Examples CSS Hamburger Icons Menu

The hamburger menu icon, also known as hotdog menu or three-line menu, is a name given by internet community to menu icon found on modern websites or mobile version of websites. This kind of icon makes it easier to show options on devices with smaller screens. This collection showcase free CSS and HTML hamburger menu icons with little javascript and good looking animations.

Hamburger Open Animation

Hamburger open animation
Demo Image: Hamburger Open Animation
Hamburger with animation
Made by Sarath AR on August 18, 2017
demo and code

Hamburger Animated Icon

Hamburger animated icon
Demo Image: Hamburger Animated Icon
Animated and intuitive hamburger icon.
Made by Steven Fabre on February 21, 2014
demo and code
Manu hamburger icon animations
Demo Image: Menu "Hamburger" Icon Animations
Many folks use these, and their merits can be argued, but for practical purposes, the "Hamburger" icon has familiarity going for it, at the very least. These animations add a little more transparency to what it means from a UI perspective by transforming it into another recognizable icon - the closing "x".
Made by Jesse Couch on February 21, 2014
demo and code

Hamburger Icon

Hamburger icon
Demo Image: Hamburger Icon
Responsive Hamburger icon and menu with vanilla JS.
Made by Pranjal Saxena on August 04, 2016
demo and code

Hamburger menu animation with velocity.js

Hamburger manu animation with velocity js
Demo Image: Hamburger menu animation with velocity.js
This pen is an animation of the hamburger menu button state when active on click or tap. It was done using velocity.js to make everything a lot smoother and cleaner.
Made by Filippo on May 20, 2015
demo and code
{{ message }}

{{ 'Comments are closed.' | trans }}