Zurb 的基础菜单按钮是如何编码的？答案

【问题标题】：how is Zurb's Foundation Menu button coded?Zurb 的基础菜单按钮是如何编码的？
【发布时间】：2013-08-06 18:41:50
【问题描述】：

在 Zurb's 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 似乎使用了“带有 box-shadow 的伪元素”技巧，但我在 Zurb 的代码中找不到它。

我的目标是在我的代码的其他部分使用这个“菜单按钮”，与浏览器区域的缩小无关。

【问题讨论】：

标签： html css twitter-bootstrap responsive-design zurb-foundation

【解决方案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 只是使用混合定位技巧来添加“菜单”文本。

【讨论】：