Настройка меню с помощью Foundation

Question

Примечание: я могу добиться такого поведения с помощью медиа запросов и некоторые Jquery/JavaScript, но есть ли другое решение для этого, используя (чистый дерзости и/или CSS) ZURB-FOUNDATION ...

Ну пусть изображения говорят

Текущее поведение

поведение Желание

Для большого экрана меню отлично подходит для меня ниже изображения меньше и меньше экранов

Итак, как только (уменьшив размер экрана), если какой-либо пункт меню не будет регулироваться в одной строке, тогда этот пункт меню войдет в значок, как показано на приведенных выше изображениях.

Мой вопрос: Есть ли способ добиться желаемого поведения с помощью Foundation - sass и/или css?

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