Mobile Navigation Icons

Jeremy Keith just wrote a post about mobile navigation icons wherein he talks about the “three lines” icon that Andy Clarke also advocated when he explored the topic earlier.

Theoretically, it would be easy to create the icon using Unicode symbols. For instance, you could create the icon by using the following HTML:

<a>&#9776; Menu </a>

Unfortunately, as Jeremy points out, many mobile devices fail to handle it correctly. Android and Blackberry devices, for example, don’t display the icon as intended.

I recently wanted to use the icon, and ran into this same issue. Inspired by Nicolas Gallagher’s post on pure CSS generated icons, I was able to get the icon to render nicely in about 10 minutes of CSS wrangling. So, if you’re dead set on rendering the icon without using an image, here’s how you can render it in CSS:

<li id="menu"><a href="#">Menu</a>></li>

li {
    list-style-type: none;
}
#menu{
    position: relative;
}
#menu a{
    padding-left: 20px;
}
#menu a:before {
    content: "";
    position: absolute;
    top: 30%;
    left:0px;
    width:12px;
    height:2px;
    border-top: 6px double #000;
    border-bottom: 2px solid #000;
}

The above will render the icon to the left of the Menu link. (As someone pointed out on Twitter yesterday, Stu Robson did something very similar.) This is great, but we still have the problem of scalability. If the font-size is 16px, you’re sitting pretty. If it’s any larger or smaller, the icon will become disproportionate. Converting to ems makes for a more flexible solution.

li{
    list-style-type: none;
}
#menu{
    position: relative;
}
#menu a{
    padding-left: 1.25em; /* 20px/16px */
}
#menu a:before {
    content: "";
    position: absolute;
    top: 30%;
    left:0px;
    width:.75em; /* 12px/16px */
    height:.125em; /* 2px/16px */
    border-top: .375em double #000; /* 6px/16px */
    border-bottom: .125em solid #000; /* 2px / 16px */
}​​​​​​​​​​​​​​​​​​​​​​​​​​​

If you want to be extra safe, you can wrap those styles inside of a media query as Roger Johanson has suggested. This should ensure that the styles are only applied to devices that can support generated content.

Is it a hack? Oh, absolutely. And several people were quick to point that out on Twitter. The result though, is the same: the trigram icon rendered without the use of images. The only difference? It’s supported much better.

If you see anyway to improve on it, feel free to fork the Gist.