Mar 7, 2015

JS/CSS animated hamburger menu for responsive websites

In working on a website I ended up developing this toggle animation for the traditional "hamburger" menu that most sites use to open/close the navigation system in a responsive website design.

The code uses pure CSS to create the three horizontal lines, then on click of the toggle, creates an animation transformation to change the three bars to an X closure.

Pure Javascript/CSS with a JQuery simply for the toggle, but not necessary.

Code found here.

Demo here.