Question

我是基金会的新手，我开始使用Foundation 6，对旧版本一无所知。

我有一个响应式顶栏，当屏幕较小时会成为标题栏。

如果您熟悉Foundation，您知道标题栏默认情况下有一个菜单图标，可让您在单击时切换顶栏中的内容，并在单击时将其切换回来试。

我的问题很简单。我不知道如何更改菜单图标的颜色，我已经看过教程在基础5上更改它，但它在F6上对我不起作用。

我还想知道如何更改标题栏中菜单图标的位置。甚至改变它的功能或它切换你的顶级内容的方式，就像我在一些网站上看到的那样。

我将非常感谢任何额外的帮助和其他提示，因为我想尽可能多地了解F6。（：

谢谢。

Answer 1

Foundation 6菜单“hamburger”图标由

组成

一个2px高的块（上面一行）;
该块的两个阴影，7px，垂直方向向下14px（中间和底部线）。

因此，要更改菜单图标颜色，请使用以下CSS：

- <li><a href="/home/abc.html">abc</a></li>

+ <li><a href="javascript:void(0);" data-url="/home/abc.html">abc</a></li>


- var hrefVal = $(this).attr('href');

+ var hrefVal = $(this).data('url');

其中.menu-icon::after { /* the block itself, the first line */ background: #fecf0f; /* middle and bottom */ box-shadow: 0 7px 0 #fecf0f, 0 14px 0 #fecf0f; /* respect WebKit */ -webkit-box-shadow: 0 7px 0 #fecf0f, 0 14px 0 #fecf0f; }是您要更改的颜色。

Answer 2

你需要改变类::after的伪元素menu-icon的颜色，你可以在那里玩位置和样式，所以你可以这样做：

.menu-icon::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    bbackground: red;
    background-size: 150%;
    background-position: 7px 11px;
    background-repeat: no-repeat;
}

基础6＆gt;标题栏＆amp;菜单图标自定义

2 个答案: