Foundation 6レスポンスメニューバグのドロップダウン/ドリルダウン

私は中規模以上のデバイス用のドロップダウンと小型デバイス用のドリルダウンをしたいと思っています。しかし、私はそれを正しくしたとは思わないし、私はいくつかの奇妙なことを取得します。Foundation 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の項目を見てください。そして、小さなスクリーンサイズのロードが完全に壊れています。私はどのようにして、中規模のドリルダウンと小規模のドリルダウンを行うのですか？どんな助け？

出典

2016-08-18 Fox Alex

問題が見つかりました。クラスis-dropdown-submenu-parentは、提案のとおり削除する必要があります。https://github.com/zurb/foundation-sites/issues/9189

出典

2016-12-23 10:00:54

残念ながら、これは中規模および大画面の懸念事項に関する部分的な回答に過ぎません。特定の問題がクロームやブラウザの範囲内でのみ発生する可能性があるようです。

ミディアム、ビッグスクリーン：

限り、あなたがそれをクリックしたときに、私は、ブラウザの[戻る]ボタンの上に「フォーカス」を入れている言うことができるように。一部のブラウザでは、青い枠で示されていますが、この青い枠が画面に少し漏れているので、青い線が表示されます。青い線は実際にはEntineボタンの輪郭を描いていますが、ページの側面にスライドしているため、ボタンの左端のみが表示されます。境界線全体を表示するには、キーボードの 'tab'キーを押して別のメニュー要素を選択し、メニュー項目の周りに青い輪郭線が表示されます。

正直言って、これは大したことではないと思うし、背中の矢印をクリックした後でフォーカスがどこに終わるかという大きな問題があるかもしれません。いずれにせよ、これはChromeブラウザの修正です：

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

は、または私はそれがどのようになる上記

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

を参照しようとしたが、これはまた、動作するはずですが、私は持っています後であなたの他の問題を見てください、少なくともそれはスタートです。

出典

2016-08-26 06:12:04

Foundation 6レスポンスメニューバグのドロップダウン/ドリルダウン

答えて

関連する問題