Основа 6 отзывчивая ошибка меню выпадение/развертка

Итак, я хочу иметь выпадающее меню для средних и больших устройств и развертку для небольших устройств. Однако я не думаю, что я сделал это правильно, и у меня есть некоторые странные вещи.Основа 6 отзывчивая ошибка меню выпадение/развертка

Если я загружаю страницу на устройство среднего и большего размера, я думаю, что 1px синяя линия находится в меню детализации после использования.
Если я загружаю страницу на маленьком устройстве, она сломана.

Вот код пера: 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(); 
});

и немного видео, показывающее, что ошибки:

https://sendvid.com/oxg1jckq

Посмотрите на пункт 1, там есть линия. И небольшая загрузка экрана нарушена total.So, как мне сделать выпадающего списка для средних и развертки для небольших? Любая помощь?

источник

2016-08-18 Fox Alex

Обнаружена проблема, согласно которой класс-выпадающий список-подменю-родитель должен быть удален, как предложено https://github.com/zurb/foundation-sites/issues/9189

источник

2016-12-23 10:00:54

Okay Alex, к сожалению, это лишь частичный ответ о вас со средними и большими экранами. Похоже, что ваша конкретная проблема может возникнуть только в хроме или только в нескольких браузерах.

Средние, Большие экраны:

Насколько я могу сказать, что браузер помещает «фокус» на кнопку «назад» при нажатии на нее. В некоторых браузерах, обозначенных синим контуром, этот синий контур немного «просачивается» на ваш экран, и именно поэтому вы видите синюю линию. Синяя линия фактически отображает кнопку entine, но поскольку она соскользнула в сторону страницы, вы можете видеть только левую границу кнопки. Чтобы увидеть всю границу, попробуйте нажать клавишу «tab» на клавиатуре, чтобы выбрать различные элементы меню, и вы увидите синий контур вокруг элемента меню, указывающий, что вы сосредоточились на нем.

Если честно, я не думаю, что это большое дело, и, возможно, есть большая проблема, когда фокус заканчивается после нажатия на стрелку назад. В любом случае, это исправление для хромированной браузера:

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

или это должно работать, хотя я только попытался выше

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

Смотрите, как это происходит, но я буду иметь посмотрите на свою другую проблему позже, но, по крайней мере, это начало.

источник

2016-08-26 06:12:04

Основа 6 отзывчивая ошибка меню выпадение/развертка

ответ

Смежные вопросы