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

【问题标题】：What is a fallback for the "hamburger icon" or HTML entity ☰?“汉堡图标”或 HTML 实体 ☰ 的后备方案是什么？
【发布时间】：2013-10-09 21:07:47
【问题描述】：

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

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

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

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

【问题讨论】：

为什么不用图片？
特别是汉堡的图像。
甚至可能是一个 = 符号，因为它会一直变得如此可爱。
@JGallardo - 我觉得不错！
@dymmeh：页面上的每张图片都是服务器请求，对性能有负面影响——这就是为什么很多人使用单个 sprite.png 来填充网站中使用的每个图标的原因

标签： android html html-entities

【解决方案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;
}

【讨论】：

如果我错了，请纠正我，但是according to caniuse，safari 和 android 默认浏览器不支持多个阴影，因此这不是移动设备的最佳解决方案
@Markasoftware 可能会回到过去……如果您运行的是真正过时的 Safari。即使是移动设备，除非您使用的是砖块 - 也应该可以工作。我相信我从 Zurb Foundation 框架中获取了这段代码。
哦，没关系。我在 caniuse 错误地阅读了表格。对不起！

【解决方案2】：

Twitter Bootstrap 使用的解决方案是使用 spans 来构建 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>

对应的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;
}

【讨论】：

从 BS4 开始，您需要使用单个 <span> 和 navbar-toggler-icon 类。

【解决方案3】：

据我所知，我使用&equiv; 大部分时间都有效。

【讨论】：

我喜欢这个简单的答案。作为一名数学运算符，如果这没有得到普遍支持，我会感到惊讶。