Foundation 6 responsive menu bug dropdown/drilldown

Question

So I want to have dropdown for medium and bigger devices and drilldown for small devices. However I don't think I did it right and I get some weird things.

If I load the page an medium and bigger device there is I think 1px blue line on drilldown menu after using it.
If I load the page on small device it's broken.

Here is a code pen: http://codepen.io/anon/pen/BzEjov

<body class="no-js">
  <ul class="horizontal dropdown menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
    <li>
      <a href="#">Item 1</a>
      <ul class="is-dropdown-submenu-parent menu">
        <li>
          <a href="#">Item 1A</a>
          <ul class="is-dropdown-submenu-parent 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>
        <li><a href="#">Item 1B</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item 2</a>
      <ul class="is-dropdown-submenu-parent menu">
        <li><a href="#">Item 2A</a></li>
        <li><a href="#">Item 2B</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item 3</a>
      <ul class="is-dropdown-submenu-parent menu">
        <li><a href="#">Item 3A</a></li>
        <li><a href="#">Item 3B</a></li>
      </ul>
    </li>
  </ul>
</body>

JavaScript/jQuery:

jQuery(document).ready(function() {
  jQuery(document).foundation();
});

and a little video showing the bugs:

https://sendvid.com/oxg1jckq

Look at item 1 there is a line there. And the small screensize load is broken totaly.So how do I do dropdown for medium and drilldown for small-only? Any help?

Brett East Brett East · Accepted Answer · 2016-08-26T06:12:04

Okay Alex, unfortunately this is only a partial answer about you concern with medium and big screens. It looks like your particular problem might only be occuring in chrome or just a range of browsers.

Medium, Big screens:

As far as I can tell, the browser is putting 'focus' on the 'back' button when you click it. In some browsers that is indicated by a blue outline, it's this blue outline that is 'leaking' a little into your screen and that's why you see a blue line. The blue line actually outlines the entine button, but because it has slid off to the side of the page you can only see the left border of the button. To see the entire border, try hitting the 'tab' key on your keyboard to select the different menu elements and you will see a blue outline around the menu item indicating that you have focused on it.

To be honest I don't think this is a big deal, and maybe there is a bigger issue with where the focus ends up after you click the back arrow. In any case, this is a fix for the chrome browser:

.js-drilldown-back a {
      outline: -webkit-focus-ring-color auto 0px;
}

or this should also work, although I only tried the above

.js-drilldown-back a {
      outline: 0px;
}

See how that goes, but I'll have a look at your other problem later, but at least that is a start.

Foundation 6 responsive menu bug dropdown/drilldown

2 Answers