Accordion behavior for Zurb Foundation top-bar not being achieved

Question

My site requires that the navigation for mobile devices behave as an accordion. I am having a terrible time trying to get this action as I cannot seem to override the slide menu behavior that is apparently default.

My question is: Should I (can I) use third-party js to override the top-bar for only mobile and tablet while maintaining the current top-bar navigation for desktop?

I have accordion menus in the sidebar for desktop but I can't seem to apply this style to the top-bar.

I hope that I am missing something obvious - and if I am, what exactly?

I am obviously doing this wrong.

Answer 1

Here's a demo, with comments and instructions. It re-uses most of Foundation's .top-bar class and functionality, but uses custom jQuery instead of the TopBar JS, for an accordion effect.

HTML Modifications

The following code example is excerpted from Foundation's TopBar Documentation. Make the changes described in the html comments, to convert the .top-bar to the accordion animation style.

<!-- 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's .dropdown class doesn't work for our purposes, but a lot of the styles are useful, especially for the desktop screen sizes. In the example we re-write the class styles based on the nested ul selector, but you could use an arbitrary class name for this purpose.

/* 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 Init

Unfortunately, the animation doesn't work at desktop screen sizes, because of the !important flag in Foundation's CSS, here:

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

To make the accordion animation work on large screens you would need to remove that style declaration or rewrite the .top-bar-section class, which would be quite a bit of work. In the example implementation, the menu functions on click and hover, it's just not animated unless you're on a small screen.

// 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();
});

Source: http://www.sepiariver.ca/demos/foundation-topbar-accordion/

Answer 2

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