CODEWITHSUNDEEP
zurb-foundation
Sean Kimball
Sean Kimball

Reputation: 4494

How to recreate Foundation 5 drop down menus in Foundation 6?

I've been trying to re-create the foundation 5 responsive drop down menus in a foundation 6 site here: http://oshawasand.bigblockstudios.ca/

Following this example [from ZURB]: http://zurb.com/building-blocks/f6-top-bar

prolem is the only menu item with a drop down element flys out to the right in my example.

As far as I can tell my menu is using EXACTLY the dame classes and data attributes.

What is wrong here? How do I get the menu to actually drop down?

[I've tried the menu example with both versions of foundation 6.0.0 and 6.1.2 - same problem in both]

Upvotes: 0

Views: 280

Answers (1)

Colin Marshall
Colin Marshall

Reputation: 2142

This is a bug that is going to be fixed very soon. Here's what one of the lead Foundation developers had to say:

This is happening because the dropdown plugin is seeing the .vertical class and assuming the menu is vertical, ignoring the *-horizontal classes.

We're going to try and get a fix out for that this week since it's fairly pressing.

Source: https://github.com/zurb/foundation-sites/issues/7978

It looks like on 6.1.1 the arrows are pointing the wrong direction but the dropdown flies out in the correct direction (down) if you use the code below, taken from the link above.

<ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu">
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 1B</a></li>
      <li><a href="#">Item 1C</a></li>
      <li><a href="#">Item 1D</a></li>
      <li><a href="#">Item 1E</a></li>
    </ul>
  </li>
</ul>

Upvotes: 2

Related Questions