0

在 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 似乎使用了“带框阴影的伪元素”技巧，但我无法在 Zurb 的代码中找到它。

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

4

1 回答 1

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

于 2013-08-06T10:41:50.213 回答