Every since responsive design came about, hamburger menus have been a staple for mobile navigations. I used to use a graphic for my hamburger menus. Then when I started using Bootstrap I switched to a glyphicon. 

Recently I stumbled upon a CSS/JavaScript version that I really enjoy using. It provides a little animation and is easily customizable. 

Check out the CodePen for code

See the Pen Hamburger Menu in CSS and JavaScript by Jonathan Volks (@adkvolks) on CodePen.0

The CSS controls 95% of what is going on. It creates a span that has a 3px height for the middle line. Then a before and after that creates the top and bottom lines. 

The JavaScript only toggles a class being added to the HTML. The CSS transition takes care of the hamburger menu turning into an X. 


Blog Author Jonathan Volks

About Jonathan Volks

Jon has over 10 years of both front-end and back-end web programming and development. Currently he is a Senior Web Programmer at Skidmore College maintaing the marketing website. In his free time he enjoys hiking in the Adirondacks, hockey games with the Adirondack Thunder, and creating outragious fan theories about Westworld. Calling it right now, Stubbs is a host with Teddy's memories.