在 Foundation 5 的顶部栏下拉菜单中添加缓动过渡

Question

我是 Foundation 5 的新手。我在将过渡效果添加到我的顶栏下拉菜单时遇到了困难。我找不到放置过渡效果的部分。我找到了一种适用于 Foundation 4 的解决方案，并在 Foundation 5 上进行了尝试，但没有产生任何效果。谁能指出我应该覆盖顶栏下拉菜单的哪个 CSS 规则。

以下是我尝试放入下拉菜单的 CSS 规则之一的代码。这是我找到的解决方案：

.top-bar-section .dropdown {
    display:block;
    visibility: hidden;
    opacity: 0;
}
.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
visibility: visible;
opacity: 1;
}

我希望有人可以帮助我。非常感谢。

Answer 1

处理折叠的“.top-bar”下拉菜单的 CSS 是：

“.top-bar”表示关闭，“.top-bar.extended”表示打开。

现在没有一种完美的方式来添加下拉效果的过渡，因为它会将高度从正常的“顶栏”高度更改为“自动”，并且您不能使用 CSS 过渡将高度固定为“自动”。

您可以做的是将“.top-bar.extended”的高度更改为适合所有菜单项的固定高度。然后 CSS 过渡将从一个固定高度工作到另一个。不过，这里唯一的问题是，如果您添加或减去任何菜单项，您必须相应地编辑“.top-bar.extended”的固定高度。

例子：

nav.top-bar {
  height: 110px;
  transition: height .33s ease;
}
.top-bar.expanded {
  height: 272px;
  transition: height .33s ease;
}

演示http://jsfiddle.net/SpeakInCode/d7Qnd/

希望这有帮助！

Answer 2

使用 scss 和 compass 进行覆盖，但我不知道这种方式，但他们的网站上有文档。

我猜你上面指的是桌面或基础的大视图。 css 以媒体查询的形式分为 2 个部分用于顶栏。 . .to 覆盖以前的 .css 创建一个新的 .css 文件并确保它在原始基础 css 之后加载

  <link rel="stylesheet" href="<?php echo URL . appCSS ?>foundation.css" />
  <link rel="stylesheet" href="<?php echo URL . appCSS ?>foundation-themer.css" />

现在在本例中创建新的 css 文件 Foundation-themer.css 并包含以下代码

 @media only screen and (min-width: 40.063em) {
/*Main Topbar color*/
.top-bar {}
.top-bar.expanded {}
/*Contain to grid topbar container*/
.contain-to-grid {}/*Main Topbar color*/
.contain-to-grid .top-bar {}
.top-bar-section li.hover > a:not(.button) {}
/*Main List Background*/
.top-bar-section li:not(.has-form) a:not(.button) {}
.top-bar-section li:not(.has-form) a:not(.button):hover {}
/*Main Active*/
.top-bar-section li.active:not(.has-form) a:not(.button) {}
/*Main Active - Hover*/
.top-bar-section li.active:not(.has-form) a:not(.button):hover {}
/*Main Dropdown Color*/
.top-bar-section .dropdown li:not(.has-form) a:not(.button){}
/*Main Dropdown color Hover*/
.top-bar-section .dropdown li:not(.has-form) a:not(.button):hover{}
/*Main Dropdown Active*/
.top-bar-section .dropdown li.active:not(.has-form) a:not(.button){}
/*Main Dropdown Hover*/
.top-bar-section .dropdown li.active:not(.has-form) a:not(.button):hover{}
.top-bar-section .dropdown li a {}
.top-bar-section .dropdown li label {}
.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {}
.top-bar-section .has-form {}

这些都是我发现对顶栏产生影响的所有单个元素，这主要是因为想要使用渐变我使用上面将每个元素更改为不同的颜色，然后看到效果。注意媒体查询我假设您希望使用顶栏的大版本，如果您想更改顶栏的小（移动）版本，然后更改 @media 部分以反映这一希望有帮助。