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

Question

我的网站要求移动设备的导航就像手风琴一样。 我在尝试执行此操作时遇到了很糟糕的时间，因为我似乎无法覆盖显然默认的幻灯片菜单行为。

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

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

我希望我遗漏了一些明显的东西——如果我遗漏了，究竟是什么？

我显然做错了。

Answer 1

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

HTML 修改

以下代码示例摘自 Foundation 的 TopBar 文档。 进行 html 注释中描述的更改，将 .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/

Answer 2

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