Zurb的Foundation Menu按钮是如何编码的？

Question

在Zurb的基金会4中，只要我们有以下顶栏导航

<nav class="top-bar">
<ul class="title-area">
 <!-- Title Area -->
 <li class="name"><!-- Leave this empty --></li>
 <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
 <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
.
.
.

我们使用移动设备或只是收缩浏览器很多，顶部导航栏中的任何内容都会折叠，其内容会被一个很酷的菜单图标取代。如下图所示：

我尝试过使用Firebug / Chrome Dev工具，我唯一能确定这个按钮的是没有使用图片。它是仅使用CSS构建的吗？如果是这样，怎么样？

在谷歌上搜索我找到了这个网站：

http://css-tricks.com/three-line-menu-navicon/

基金会似乎使用＆＃34; Pseudo Element w / box-shadow＆＃34;诀窍，但我无法在Zurb的代码中找到它。

我的目标是使用此菜单按钮＆＃39;在我的代码的其他部分，与浏览器区域的缩小无关。

Answer 1

在代码中找到并不困难，只需检查元素.toggle-topbar .menu-icon a span

我做了一个小提琴，它只有菜单图标的代码：

http://jsfiddle.net/3HPLu/

生成这三行所需的唯一代码是：

#menu-icon {
    display: block;
    -webkit-box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black; 
    box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black;   
}

但是Zurb只是使用了一系列定位技巧来添加“菜单”文字。