使用Foundation自定義菜單

Question

注意：我可以使用媒體查詢和一些Jquery / Javascript來實現此行為，但是使用（純Sass和/或CSS） ZURB-FOUNDATION是否可以解決此問題？

好吧，讓圖像說

當前行為

欲望行為

對於大屏幕菜單，對我來說很好，以下是越來越小屏幕的圖像

因此，只要（通過減小屏幕尺寸）任何菜單項都不能在一行中進行調整，該菜單選項就會進入圖標，如上圖所示。

我的問題：是否可以使用Foundation-sass和/或css實現欲望行為？

Answer 1

有一種方法可以做到這一點，這有點愚蠢，僅使用js解決方案就可以使它更加清潔。

但是，如果要執行僅基金會的解決方案，則需要這樣構造標題信息：

<ul><li>opt1</li>
    <li>opt2</li>
    <li>opt3</li>
    <li class="hide-for-small">opt4</li>
    <li class="hide-for-medium-down">opt5</li>
</ul>

<a href="#" data-dropdown="drop1" class="button dropdown hide-for-large-up">icon</a><br>
    <ul id="drop1" class="f-dropdown">
        <li class="show-for-small">opt4</li>
        <li class="show-for-medium-down">opt5</li>
</ul>