Zurb的“基礎菜單”按鈕如何編碼？

Question

在Zurb的Foundation 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開發工具，但我唯一能確定的就是不使用圖片。 它僅使用CSS構建嗎？ 如果是這樣，怎么辦？

到處搜尋，我發現了這個網站：

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

似乎Foundation使用了“帶有框陰影的偽元素”技巧，但是我無法在Zurb的代碼中找到它。

我的目的是在我的代碼的其他部分中使用此“菜單按鈕”，與瀏覽器區域的縮小無關。

Answer 1

在代碼中找到它並不難，只需檢查元素.toggle-topbar .menu-icon一個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只是使用多種定位技巧來添加“菜單”文本。