Zurb Foundation 调整顶栏下拉高度答案

【问题标题】：Zurb Foundation adjust topbar dropdown heightZurb Foundation 调整顶栏下拉高度
【发布时间】：2015-07-11 07:59:00
【问题描述】：

我已将 _topbar.scss 中顶部栏的高度调整为 76，但这似乎也影响了下拉菜单

// Height and margin
$topbar-height: rem-calc(76) !default;

我已将 430 左右更改为以下值，这降低了下拉菜单的高度，但随后将顶部边距推到了菜单上

      // Styling elements inside of dropdowns
  .dropdown {
    padding: 0;
    position: absolute;
    #{$default-float}: 100%;
    top: 0;
    z-index: 99;
    @include topbar-hide-dropdown();

    li {
      width: 100%;
      height: $topbar-height/2;

      a {
        font-weight: $topbar-dropdown-link-weight;
        padding: 8px $topbar-link-padding;
        &.parent-link {
          font-weight: $topbar-link-weight;
        }
      }

【问题讨论】：

也许澄清你到底想要发生什么会有所帮助。该图像显示菜单lis 相互重叠？

标签： css sass zurb-foundation zurb-foundation-5

【解决方案1】：

当您检查下拉列表的 HTML 代码时，您会发现菜单的标题和项目都呈现在同一个 ul（由 javascript 修改）中，例如：

<ul class="dropdown">
<li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li>
<li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="#">Right Button Dropdown</a></li>
<li><a href="#">First link in dropdown</a></li>
<li class="active"><a href="#">Active link in dropdown</a></li>
</ul>

所以，是的，当我更改 $topbar-height 时，所有这些项目的高度都会发生变化。

使用$topbar-height: rem-calc(90);，我的下拉菜单将如下图所示：

现在我认为您的问题的一个可能解决方案是在应用$topbar-height: rem-calc(90); 后使下拉列表的项目不那么高。这应该会影响ul.dropdown 中前两项之后的每一项。

您可以使用如下所示的 SCSS 代码来执行此操作：

.top-bar ul.dropdown li:nth-child(n+2) a, 
.top-bar ul.dropdown li.active:nth-child(n+2) a {
line-height: rem-calc(45);
}

（在您的情况下，您应该将上述代码放在_topbar.scss 的末尾）

重新编译代码后，下拉菜单现在应该如下所示：

最后你应该注意到在大多数情况下编辑_topbar.scss 是不好的做法，因为这样做会阻止你更新基础。您应该创建一个app.scss 并编译该文件：

@import "settings";
@import "foundation";

.top-bar ul.dropdown li:nth-child(n+2) a, 
.top-bar ul.dropdown li.active:nth-child(n+2) a {
line-height: rem-calc(45);
}

和你的（自定义）_setttings.scss:

$topbar-height: rem-calc(90);

【讨论】：