Foundation 6 responsive Menü Bug DropDown/Drilldown

Also ich möchte DropDown für mittlere und größere Geräte und Drilldown für kleine Geräte haben. Aber ich glaube nicht, dass ich es richtig gemacht habe, und ich bekomme ein paar komische Dinge.Foundation 6 responsive Menü Bug DropDown/Drilldown

Wenn ich die Seite ein mittelgroßes und größeres Gerät lade, denke ich 1px blaue Linie im Drilldown-Menü nach der Verwendung.
Wenn ich die Seite auf kleines Gerät lade, ist es kaputt. Hier

ist ein Code, Stift: 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(); 
});

und ein kleines Video zeigt die Fehler:

https://sendvid.com/oxg1jckq

Betrachten Sie Punkt 1 dort ist eine Zeile. Und die kleine Bildschirmgröße ist total kaputt. Also, wie mache ich Dropdown für Medium und Drilldown für kleine? Irgendeine Hilfe?

Quelle

2016-08-18 Fox Alex

Das Problem gefunden, dass die Klasse-Dropdown-Untermenü-Eltern gelöscht werden sollte, wie von https://github.com/zurb/foundation-sites/issues/9189

vorgeschlagen wird

Quelle

2016-12-23 10:00:54

Okay Alex, leider ist dies nur eine unvollständige Antwort über Ihr Interesse mit mittleren und großen Bildschirmen. Es sieht so aus, als ob Ihr spezielles Problem nur in Chrome oder nur in einer Reihe von Browsern auftritt.

Medium, Big Screens:

Soweit ich das beurteilen kann, ist der Browser ‚Fokus‘ auf die Schaltfläche ‚Zurück‘ setzen, wenn Sie darauf klicken. In einigen Browsern, die durch einen blauen Umriss angezeigt werden, "leckt" dieser blaue Umriss ein wenig in Ihren Bildschirm und deshalb sehen Sie eine blaue Linie. Die blaue Linie umrandet den Enine-Button, aber da er seitlich zur Seite gerutscht ist, sieht man nur den linken Rand des Buttons. Um den gesamten Rahmen zu sehen, drücken Sie die "Tab" -Taste auf Ihrer Tastatur, um die verschiedenen Menüelemente auszuwählen, und Sie werden einen blauen Umriss um den Menüeintrag sehen, der anzeigt, dass Sie sich darauf konzentriert haben.

Um ehrlich zu sein, denke ich nicht, dass dies eine große Sache ist, und vielleicht gibt es ein größeres Problem mit dem Fokus endet, nachdem Sie auf den Zurück-Pfeil klicken. Auf jeden Fall ist dies ein Fix für den Chrome-Browser:

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

oder dies sollte auch funktionieren, obwohl ich nur versucht, die oben

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

Sehen Sie, wie das geht, aber ich werde eine haben schau dir später dein anderes Problem an, aber zumindest ist das ein Anfang.

Quelle

2016-08-26 06:12:04

Foundation 6 responsive Menü Bug DropDown/Drilldown

Antwort

Verwandte Themen