The Problem
You use Zurb's Foundation for Sites CSS front-end framework, and you likewise benefit from their TopBar component for a mobile-friendly, responsive menu. However, you need an accordion style menu animation instead of TopBar's slide animation.
A Google search for Foundation topbar accordion did't yield any solutions—for me, anyway. So…
A Proposed Solution
Based on the sample HTML from the TopBar documentation, this solution should provide an easily-repeatable workflow for replacing TopBar with an accordion-style counterpart. View the demo with instructions.
The TopBar JS component is initialized on the data-topbar attribute. You can remove this attribute, sling some custom jQuery to handle the accordion animation, and you're most of the way there.
A bit of CSS re-writing is required for the .dropdown class. You need to remove that class from the dropdown menu because it's not compatible with the accordion animation, some some of the style declarations are necessary to reproduce the functionality.
There's an unfortunate collision with a Foundation CSS style on .top-bar-section ul, which makes it so the accordion animation only works on the pancake (mobile) menu. If you want it on the regular dropdown menu as well, you need to re-write the styles for the .top-bar-section class, and remove that class from the markup. It'd be a fair bit of work, but totally doable.
ICYMI, you can view a live demo of this solution at work, here, with detailed instructions and comments.
