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