I’m currently working on a mobile website project that uses a ui-pattern that you’ve undoubtedly seen before… those infamous stacked lines depicting a menu or list on a mobile (think facebook).

To create the icon, I initially jumped into photoshop, drew a few lines, and boom! … a menu icon. At the time, I wasn’t concerned about creating @2x images for retina displays… I just needed something to start with.

Of course, as I continued working on the project, the need for retina @2x images came up. But just before jumping back into photoshop and adding it to the @2x sprite, I had a thought… I can make this icon using pseudo selectors and a little CSS!

So I did… and it wasn’t even ugly! In fact, it was quite clean, not to mention totally scaleable.

Here is the result of my plain ol’ CSS menu icon:

css-menu-icon

And here is the Sass (scss syntax):

$icon-border: 1px solid #407EB8;
$icon-lines: 3px solid #fff;

.menu-icon {
  width: 22px; height: 15px;
  padding: 4px;
  border: $icon-border;
  @include border-radius(4px);

  span {
    display: block;
    position: relative;
    border-top: $icon-lines;

    &::before,
    &::after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      border-top: $icon-lines;
    }

    &::before {
      top: 3px;
    }

    &::after {
      top: 9px;
    }

  }
}

I played around using simple margins rather than position: absolute, but the margin’s were fowled up on Gingerbread phones… using position: absolute seems to be the most reliable.

This has been tested on iOS, and about 10 different Android ICS and GB phones.

If I wanted to get fancy with the Sass, I could create a @mixin and calculate the positioning based on the size… another day perhaps.