使用 Foundation 自定义菜单答案

【问题标题】：Customize Menu using Foundation使用 Foundation 自定义菜单
【发布时间】：2015-12-03 15:34:43
【问题描述】：

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

让图片说话

当前行为

欲望行为

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

因此，一旦（通过减小屏幕尺寸）任何菜单项未在一行中调整，则该菜单选项将进入如上图所示的图标。

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

【问题讨论】：

你有没有尝试过？有什么吗？
好吧，我只是尝试一个简单的基础菜单（在小屏幕中隐藏所有菜单选项）......但是对于这个自定义我没有尝试任何东西，因为我真的不知道它的解决方案/方法...如果你只是给我一个好主意，那也很好...
AFAIK，js是唯一途径

标签： html css responsive-design sass zurb-foundation

【解决方案1】：

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

但是，如果您想做一个仅限 Foundation 的解决方案，您需要这样构建您的标头信息：

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

【讨论】：