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-code 时，您会发现菜单的标题和项目都呈现在同一个 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);

Zurb Foundation 调整顶部栏下拉高度

Zurb Foundation adjust topbar dropdown height

css

sass

zurb-foundation

zurb-foundation-5