移动导航图标

Jeremy Keith just wrote a post about mobile navigation icons wherein he talks about the “three lines” icon that Andy Clarke also advocated when he explored the topic earlier.

杰里米·基思(Jeremy Keith)刚刚写了一篇有关移动导航图标的文章，其中他谈到了安迪·克拉克(Andy Clarke) 较早探索该主题时也提倡的“三行”图标。

Theoretically, it would be easy to create the icon using Unicode symbols. For instance, you could create the icon by using the following HTML:

从理论上讲，使用Unicode符号创建图标将很容易。 例如，您可以使用以下HTML创建图标：

<a>&#9776; Menu </a>

Unfortunately, as Jeremy points out, many mobile devices fail to handle it correctly. Android and Blackberry devices, for example, don’t display the icon as intended.

不幸的是，正如Jeremy指出的那样，许多移动设备无法正确处理它。 例如，Android和Blackberry设备未按预期显示图标。

I recently wanted to use the icon, and ran into this same issue. Inspired by Nicolas Gallagher’s post on pure CSS generated icons, I was able to get the icon to render nicely in about 10 minutes of CSS wrangling. So, if you’re dead set on rendering the icon without using an image, here’s how you can render it in CSS:

我最近想使用该图标，并遇到了同样的问题。 受Nicolas Gallagher关于纯CSS生成图标的帖子的启发，我能够在大约10分钟CSS争吵中使该图标很好地呈现。 因此，如果您在不使用图像的情况下不愿渲染图标，则可以在CSS中进行渲染：

<li id="menu"><a href="#">Menu</a>></li>

li {
    list-style-type: none;
}
#menu{
    position: relative;
}
#menu a{
    padding-left: 20px;
}
#menu a:before {
    content: "";
    position: absolute;
    top: 30%;
    left:0px;
    width:12px;
    height:2px;
    border-top: 6px double #000;
    border-bottom: 2px solid #000;
}

The above will render the icon to the left of the Menu link. (As someone pointed out on Twitter yesterday, Stu Robson did something very similar.) This is great, but we still have the problem of scalability. If the font-size is 16px, you’re sitting pretty. If it’s any larger or smaller, the icon will become disproportionate. Converting to ems makes for a more flexible solution.

上面将在菜单链接的左侧显示图标。 (正如昨天在Twitter上指出的那样，Stu Robson所做的事情非常相似 。)很好，但是我们仍然存在可伸缩性问题。 如果字体大小为16像素，则表示您坐得很漂亮。 如果它更大或更小，该图标将变得不成比例。 转换为ems可提供更灵活的解决方案。

li{
    list-style-type: none;
}
#menu{
    position: relative;
}
#menu a{
    padding-left: 1.25em; /* 20px/16px */
}
#menu a:before {
    content: "";
    position: absolute;
    top: 30%;
    left:0px;
    width:.75em; /* 12px/16px */
    height:.125em; /* 2px/16px */
    border-top: .375em double #000; /* 6px/16px */
    border-bottom: .125em solid #000; /* 2px / 16px */
}​​​​​​​​​​​​​​​​​​​​​​​​​​​

If you want to be extra safe, you can wrap those styles inside of a media query as Roger Johanson has suggested. This should ensure that the styles are only applied to devices that can support generated content.

如果您想更加安全，可以按照Roger Johanson的建议将这些样式包装在媒体查询中。 这应该确保样式仅应用于可以支持生成的内容的设备。

Is it a hack? Oh, absolutely. And several people were quick to point that out on Twitter. The result though, is the same: the trigram icon rendered without the use of images. The only difference? It’s supported much better.

是hack吗？ 哦，绝对。 几个人很快在Twitter上指出了这一点。 但是结果是一样的：不使用图像就渲染了Trigram图标。 唯一的区别？ 它的支持要好得多。

If you see anyway to improve on it, feel free to fork the Gist.

如果您仍然想改善它，请随时拨出Gist 。

翻译自: https://timkadlec.com/2012/08/mobile-navigation-icons/