Whether you're a fan of the cheesy name or not, it seems the infamous “hamburger” menu icon is here to stay - at least for a while, anyway. The Hamburger, as seen on TechCrunch In this tutorial we'll look at a number of approaches to creating and styling such an icon without using raster images. I've got seven options to show you, so we better get cracking... Why Non-raster? Using an image is quick and simple so why bother looking for alternative approaches? Here are a few reasons which we'll use to measure the success of each of the potential solutions against: Loading fewer assets reduces HTTP requests Non-raster icons scale up (and down) infinitely for high density displays We can add extra styling and interactivity with CSS It's a nice challenge! #1. Use SVG We'll look at some examples of creating the menu icon with CSS in a moment, but my list would be incomplete without mentioning SVG images as a viable option.
↧