在平板电脑上查看时,我将此作为网站的菜单栏:
单击右侧的菜单图标会显示其他选项。代码是
<div id="menu">
<a id="metaMenu" href="#">☰</a>
</div>
但我在 Twitter 上看到,某些 Android 手机不支持该实体(或者它可能是相应的 Unicode 字符)。如何修改我的 HTML 以进行后备?
在平板电脑上查看时,我将此作为网站的菜单栏:
单击右侧的菜单图标会显示其他选项。代码是
<div id="menu">
<a id="metaMenu" href="#">☰</a>
</div>
但我在 Twitter 上看到,某些 Android 手机不支持该实体(或者它可能是相应的 Unicode 字符)。如何修改我的 HTML 以进行后备?
图像是解决此问题的错误方法-在我看来,实体也是如此。因为这个根本没有得到很好的支持。没有 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;
}
Twitter Bootstrap 使用的解决方案是使用 spans 来构建汉堡包:
<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;
}
据我≡
所知,我大部分时间都在使用它。