使用Foundation自定义菜单

Question

NOTE: I can achieve this behavior using media queries and some Jquery/Javascript but is there any other solution for this using (pure sass and/or css) ZURB-FOUNDATION ...

Well let images say

Current Behavior

Desire behavior

For large screen menu is fine for me below are images of smaller and more smaller screens

So as soon as (by reducing screen size) if any menu item not adjust in one row then that menu option will go into the icon as shown in above images.

My Question: Is there any way to achieve desire behavior using Foundation - sass and/or css ??

Answer 1

There is one way to do this, which is kinda stupid and would be much cleaner with just a js solution.

However, if you want to do a Foundation-only solution, you'll need to structure your header info as such:

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