4

How do I configure Foundation 6 responsive menus to switch from a dropdown menu to a drilldown menu when at the mobile device brealpoint?

The last example in the Foundation documentation works as expected in medium or larger views, but still shows the horiozontal menu in small views!!

Basically, how do I get the menu to behave as the old Foundation 5 menu did?

This markup almost works, the drilldown works a bit, but the menu items are still lined up horizontally.

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu"  data-responsive-menu="drilldown medium-dropdown" >
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>
Colin Marshall
  • 2,142
  • 2
  • 21
  • 31
Sean Kimball
  • 4,506
  • 9
  • 42
  • 73

1 Answers1

3

Get rid of the dropdown class from the <ul> and add the classes vertical and medium-horizontal to the list so it looks like this:

<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">

Update: The bugs related to the dropdown arrows and submenu fold out direction in the responsive menu have been fixed in the release of foundation-sites 6.2.0.

Related SO Question: Foundation 6 data-responsive-menu parameters

Community
  • 1
  • 1
Colin Marshall
  • 2,142
  • 2
  • 21
  • 31