css - Zurb Foundation 调整顶部栏下拉高度

Question

我已将 _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;
        }
      }

Answer 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);