什么是“汉堡包图标”或HTML实体的后备☰？

Question

在平板电脑上观看时，我将此作为网站的菜单栏：

右侧的菜单图标显示单击时的其他选项。代码是

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

但是我在Twitter上看到某些Android手机不支持该实体（或者它可能是相应的Unicode字符）。如何修改我的HTML以获得后备？

Answer 1

在我看来，图像是一种错误的方式 - 就像一个实体一样。因为这个没有得到很好的支持。没有Android，在Windows Chrome，Internet Explorer等上呈现出奇怪的效果

走CSS3路线。每个主要浏览器以及所有现代移动设备都支持此功能。

jsFiddle这里：http://jsfiddle.net/328k7/

使用CSS3，如下所示。编辑你认为合适的地方......

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

Twitter Bootstrap使用的解决方案是使用跨度来构建汉堡包：

<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>

相应的CSS是：

.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

我使用≡据我所知，这大部分时间都有用。