What is a fallback for the “hamburger icon” or HTML entity ☰?

Question

I have this as my menu bar for the site when viewed on tablet:

The menu icon on the right shows other options when clicked. The code is

<div id="menu">
  <a id="metaMenu" href="#">&#9776;</a>
</div>

But I saw on Twitter that the entity (or it may have been the corresponding Unicode characters) is not supported in some Android phones. How can I modify my HTML to have a fallback?

Answer 1

Image is a wrong way to go about this - as is an entity, in my opinion. As this one is not well supported at all. No Android, renders weird on Windows Chrome, Internet Explorer, etc.

Go the CSS3 route. This is supported by every major browser - and all modern mobile devices.

jsFiddle here: http://jsfiddle.net/328k7/

Use CSS3 as below. Edit where you see fit...

div {
    content: "";
    position: absolute;
    left: 0;
    display: block;
    width: 14px;
    top: 0;
    height: 0;
    -webkit-box-shadow: 1px 10px 1px 1px #69737d,1px 16px 1px 1px     #69737d,1px 22px 1px 1px #69737d;
    box-shadow: 0 10px 0 1px #69737d,0 16px 0 1px #69737d,0 22px 0 1px #69737d;
}

Answer 2

The solution used by Twitter Bootstrap is using spans to construct the Hamburger:

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

The corresponding CSS is:

.navbar-toggle {
   position: relative;
   float: right;
   padding: 9px 10px;
   margin-top: 8px;
   margin-right: 15px;
   margin-bottom: 8px;
   background-color: #cccccc;
   border: 1px solid transparent;
   border-radius: 4px;
}

.navbar-toggle .icon-bar {
   display: block;
   width: 22px;
   height: 2px;
   background-color:#000000;
   border-radius: 1px;
}

.navbar-toggle .icon-bar+.icon-bar {
   margin-top: 4px;
}

Answer 3

i use ≡ as of my knowledge this works most of the time.