Показ и скрытие на разном разрешении экрана?

Question

[Mikhail]

Как сделать:
demo.mythemeshop.com/ribbon/category/apple/

Примерно вот такое меню на маленьких экранах?
Т.е. речь не идёт об full меню, а именно об маленьком меню при разрешении менее чем 960px ширины.

Ясно что можно использовать "medium", "small" суффиксы в foundation. Но как сделать без дублирования кода, т.е. без:

<div class="row">
 <div class="large-12">
 ...list...
 </div>
 <div class="small-12 medium-12">
 ...list...
 </div>
</div>

Возможно вложено тэгами друг в друга, но что-бы зацепится в CSS и JavaScript. Что-бы использовать один и тот же список для меню.

Прошу прощения, если это будет банально... Но не совсем часто верстаю, больше пишу PHP/Python/JS...

Answer 1

[Денис]

А если использовать media и min-width + display: none?

Ps.
Не верстальщик\дизигнер и т.д.

Comments

[Mikhail]

media только для CSS по моему для JS этого нету. Есть плагин selectorquery для jquery, но возможно можно и без него как-то?

[Евгений Перин]

Mikhail: можно сделать 2 меню, одно скрывать а второе показывать при маленьком разрешении :) Способ конечно грязный

[Mikhail]

в том то и дело, что грязный... Особенно в связи с тем что я хочу делать на backbone+marionette меню. А если я например сделаю такое меню на JS то при изменении разрешении нужна функция reinit?