A while back I was updating a web app that was targeted to desktop users. I wanted to make it more mobile friendly. One of the ways I did this was by changing the layout on different size screens. The app had a toolbar header that I wanted to collapse into a single icon on mobile devices.
On a lot of mobile apps this single icon takes the form of a hamburger menu. Whether you love this icon or hate it, it’s somewhat ubiquitous so I decided to use it. I wanted a simple version of the icon that when clicked would open an overlay to display the tools the header does on a desktop.
I was able to craft a very simple menu icon using a very small html skeleton and a tiny bit of CSS. Basically it’s an <a> tag with three spans inside. I used an <a> tag but you could just as easily use a <div> or any number of other elements. The spans are given height and width dimensions and a solid bottom border via CSS.
See the Pen Stacked Navigation Menu by Ryan Davison (@ryandavison) on CodePen.
That’s about it. If you want to play around with different approaches to your own icon you can edit this code on codepen.