The following code example is copied verbatim from Foundation's TopBar Documentation. Make the changes described in the html comments, to convert the .top-bar to the accordion animation style.
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; } 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(); });