У меня есть меню, структурированное так:
<nav id="header-bar-menu-wrapper" class="show-for-large">
<ul id="header-bar-menu">
<li>
<a href="">Link 1</a>
</li>
И клонировано с помощью mmenu:
var $menu = $("#header-bar-menu-wrapper").mmenu({
// options
}, {
// configuration
clone: true
});
Я хочу, чтобы исходное меню было видно на рабочем столе и использовать mmenuтолько на планшете / мобильном телефоне.
Поскольку я использую Zurb Foundation, я хотел бы использовать предоставленные классы для этого, а не писать собственные медиазапросы.Вот почему я использую show-for-large
.
Однако show-for-large
копируется в клонированное меню, которое выглядит следующим образом:
<nav id="mm-header-bar-menu-wrapper" class="show-for-large mm-menu mm-menu_offcanvas mm-menu_opened">
Как можно предотвратить клонирование классов CSSover?
В качестве альтернативы, как я могу использовать собственные контрольные точки Foundation для этого?Я не хочу писать какой-либо размер пикселя в своем собственном CSS.
Я также хотел бы избежать необходимости добавлять / удалять класс с помощью JavaScript, хотя я вынужден сделать это прямо сейчас.