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瀏覽器開發工具，我敢肯定這個按鈕的唯一的事情是不使用圖片。它是否僅使用CSS構建？如果是這樣，怎麼樣？

周圍的Googling我發現這個網站：

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

看來，基金會使用「僞元素W /箱陰影」的把戲，但我沒能找到它在Zurb的代碼。

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

Answer 1

這並不難在代碼中找到，只是檢查.toggle，頂欄。菜單圖標跨度

我做了，只是有菜單圖標的代碼小提琴元素：

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只需使用定位技巧的組合，以廣告d'菜單'文本。