什么是“汉堡包图标”的后备或HTML实体&＃9776 ;? [英] What is a fallback for the "hamburger icon" or HTML entity ☰?

问题描述

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

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

 < div id =menu> 
< a id =metaMenuhref =＃>&＃9776;< / a> 
< / div> 
  

但是我在Twitter上看到实体（或者它可能是相应的Unicode字符）不是支持一些Android手机。我怎样才能修改我的HTML有一个后备？

解决方案

图像是一个错误的方式去做 - 作为一个实体， 我的想法是。因为这一个没有得到很好的支持。没有Android，在Windows Chrome，Internet Explorer等中呈现奇怪。

转到CSS3路线。这是由所有主流浏览器和所有现代移动设备支持的。

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

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

;
位置：绝对;
剩下：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;
}

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?

解决方案

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

这篇关于什么是“汉堡包图标”的后备或HTML实体&＃9776 ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！