Create visual Hamburger icon in HTML

[caption id=”attachment_70" align=”aligncenter” width=”312"]

Visual Hamburger Icon[/caption]

The hamburger icon is a classic icon, its three black bars also know as the navigation icon. The hamburger is one of those UI features that’s so old, but someone designed this little visual nugget around it. And in recent days, the Hamburger icon has taken alot of hit (trending), specially on mobile apps and mobile responsive websites.

The hamburger, which looks like a list, reminds users of a menu list in a good way. The Android’s new material design also showcases the hamburger icon with its visual effect.

So, here today I am creating a Hamburger icon in CSS and using little of JS. I will be demonstrating two ways:

1. On tap of Hamburger icon, show the back button (as seen on latest Android’s Material Design apps)
2. On tap of Hamburger icon, show the close button (as seen on most of the websites as a drop-down navigation)

View Demo on Codepen