Interactive Pure-CSS Hamburger menu icon

I recently came across a site with a nifty hamburger icon which transforms into an X icon when the menu is shown or it’s active. The transformation also includes a transition. So it’s not a simple background image change.

It really interests me so I recreate it in a codepen:

See the Pen interactive hamburger menu icon by Leo Gono (@leogono) on CodePen.

As you might have notice, here what happens, the top bar transforms 45 degree, the middle bar disappears, and lastly, the bottom bar transforms -45 degree.

The code is pure CSS so it’s very lightweight. It utilizes ‘transform’ and ‘transition’ css properties. You can add prefixes for browser support.

How Ghostlab makes my life easier

I recently came across GhostLab in search for tools in cross-browser testing. I’m not sure how it happens because I googled before and haven’t saw this app. You may call it accident but I consider it a “divine intervention”. :)

Running it for the first time was a breeze. Just drag the folder of your HTML files and one click of a button, your files are served on a local server. You can also add URL in case you need to test a live site. This feature is very important to me. This is one of the feature that would make me buy this app.

Most of the time, I work on a WordPress site. So you can’t just drag the folder into Ghostlab. My solution is served the site on MAMP, then copy the link to Ghostlab. TADA! Problem solved.

Another problem is viewing the page on IE. I’m on OSX and we all know that IE is not (and may never be) ported to OSX. My solution, virtualbox. And to my surprise, it work seamlessly with Ghostlab.

I don’t have all the devices to test cross-browser but here’s my current set up:
Mac – Safari, Chrome, Firefox
Virtualbox – IE
Virtualbox – Android Kitkat
iOS simulator (iPad)
and my iPhone 5S.

I’m still on trial and I’m going to buy this app at the end of the trial period.