未实现 Zurb Foundation 顶栏的手风琴行为答案

【问题标题】：Accordion behavior for Zurb Foundation top-bar not being achieved未实现 Zurb Foundation 顶栏的手风琴行为
【发布时间】：2015-04-30 01:32:02
【问题描述】：

我的网站要求移动设备的导航功能类似于手风琴。我很难尝试执行此操作，因为我似乎无法覆盖显然是默认的滑动菜单行为。

我的问题是：我是否应该（我可以）使用第三方 js 来覆盖仅适用于移动设备和平板电脑的顶栏，同时保持当前桌面的顶栏导航？

我在桌面侧边栏中有手风琴菜单，但我似乎无法将这种样式应用到顶栏。

我希望我遗漏了一些明显的东西 - 如果我遗漏了，具体是什么？

我显然做错了。

【问题讨论】：

请张贴小提琴。

标签： javascript jquery drupal sass zurb-foundation

【解决方案1】：

这是一个演示，带有 cmets 和说明。它重用了 Foundation 的大部分 .top-bar 类和功能，但使用自定义 jQuery 而不是 TopBar JS，以获得手风琴效果。

HTML 修改

以下代码示例摘自 Foundation 的 TopBar 文档。进行 html cmets 中描述的更改，将 .top-bar 转换为手风琴动画样式。

<!-- IMPORTANT: remove the "data-topbar" attribute from .top-bar, 
otherwise the topbar plugin will initialize. -->
<nav class="top-bar" data-topbar role="navigation">

...

<!-- IMPORTANT: remove the .dropdown class from the dropdown menu -->
<ul class="dropdown">

CSS

Foundation 的 .dropdown 类不适用于我们的目的，但很多样式都很有用，尤其是对于桌面屏幕尺寸。在示例中，我们基于嵌套的 ul 选择器重写了类样式，但您可以为此使用任意类名。

/* Opens the mobile menu */
.top-bar.opened {
    overflow: visible;
}
/* The rest replaces the Foundation .dropdown class */
.top-bar-section ul ul {
    z-index: 999;
    display: none;
}
@media only screen and (min-width: 40.063em) {
    .top-bar-section ul ul {
      position: absolute;
      left: 0;
      top: auto;
      min-width: 100%;
    }
}
.top-bar-section li.active ul {
    display: block;
}
.top-bar-section ul ul li {
    white-space: nowrap;
    width: 100%;
}
/* Positions the arrow relative to the menu item */
.top-bar-section .has-dropdown > a  {
    position: relative;
}
.top-bar-section .has-dropdown > a:after {
    top: 1.25rem;
}
/* Hover state */
.top-bar-section .has-dropdown:hover > ul  {
    display: block;
}

JS 初始化

不幸的是，由于 Foundation 的 CSS 中的 !important 标志，动画在桌面屏幕尺寸下不起作用，这里：

@media only screen and (min-width: 40.063em) {
    .top-bar-section ul { height: auto !important; } 
}

要使手风琴动画在大屏幕上工作，您需要删除该样式声明或重写 .top-bar-section 类，这将是相当多的工作。在示例实现中，菜单在单击和悬停时起作用，除非您在小屏幕上，否则它不会动画。

// Init foundation as usual
$(document).foundation();

/* Register event handlers for .top-bar accordion menu */
// This opens the menu
$('.top-bar').on('click', '.toggle-topbar', function(e) {
    e.preventDefault();
    $('.top-bar').toggleClass('opened');
});

// This does the accordion animation
$('.top-bar-section').on('click', '.has-dropdown > a', function(e){
    e.preventDefault();
    $('.top-bar-section ul ul').slideUp();
    $(e.target).next().not(':visible').slideDown();
});

来源：http://www.sepiariver.ca/demos/foundation-topbar-accordion/

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
@greg-449 怎么样？

【解决方案2】：

我的建议是保留这两个菜单，这意味着在服务器端脚本的加载时间上，您可以设置条件，如果它是移动的而不是使用第三方移动菜单，否则您已经拥有顶栏。

【讨论】：