html - 使用 Foundation 自定义菜单

Question

注意:我可以使用媒体查询和一些 Jquery/Javascript 来实现此行为，但是是否有任何其他解决方案可以使用(纯 sass 和/或 css)ZURB-FOUNDATION ...

好吧让图片说

当前行为

欲望行为

大屏幕菜单对我来说很好下面是越来越小屏幕的图像

因此，一旦(通过减小屏幕尺寸)任何菜单项不能在一行中调整，那么该菜单选项将进入图标，如上图所示。

我的问题:有没有什么方法可以使用 Foundation - sass 和/或 css 来实现期望行为？？

Answer 1

有一种方法可以做到这一点，这有点愚蠢，但如果使用 js 解决方案会更干净。

但是，如果你想做一个 Foundation-only 解决方案，你需要这样构造你的标题信息:

<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>