Question

我是使用Foundation 5的新手。我在将过渡效果放到顶栏下拉菜单时遇到了困难。我无法找到转换效果的哪个部分。我找到了一个应用于基金会4的解决方案并尝试了它到基金会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

用于处理折叠＆＃34; .top-bar＆＃34;的下拉列表的CSS是：

＆＃34;赛拓朴杆＆＃34;关闭和＆＃34; .top-bar.extended＆＃34;开放。

现在还没有一种完美的方式来添加到下拉效果的转换，因为它改变了你正常的顶部＆＃34;顶部的高度＆＃34;高度是，对于＆＃34; auto＆＃34;，您无法使用从固定高度到＆＃34; auto＆＃34;的CSS转换。

你可以做的是改变＆＃34; .top-bar.extended＆＃34;的高度。到适合所有菜单项的固定高度。然后CSS转换将从一个固定高度工作到另一个固定高度。但是，只有在此处添加或减去任何菜单项时，您必须编辑＆＃34; .top-bar.extended＆＃34;的固定高度。相应

示例：

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和指南针有一个覆盖，但我不知道这种方式，但他们的网站上有文档。

我猜你上面指的是桌面或基础的大视图。以媒体查询的形式将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部分以反映这希望这帮助

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

2 个答案: