HTML Modifications:

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 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();  	$(':visible').slideDown();  });