Изменить меню в зависимости от вида

Question

Спасибо, что заглянули!

Я хотел бы обратиться к вашей мудрости, чтобы решить задачу, которая не должна быть такой сложной: (* ​​1003 *

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

Суммированный код выглядит так:

Вопрос: есть ли способ на лету изменить «data-target» и «aria-controls» для переключения между «desktopMenu» и «mobileMenu» в зависимости от ширины области просмотра?

Я не знаю, является ли этот подход правильным / лучшим. Пожалуйста, если я ошибаюсь, не стесняйтесь предложить другой способ сделать это.

Большое спасибо!

Answer 1

В вашем случае есть два способа адаптировать вашу страницу в зависимости от области просмотра. Одним из способов будет использование @media-queries и отображение / скрытие того или иного элемента с атрибутом display.

Это позволит вам настроить код в зависимости от размера экрана.

@media only screen and (min-width: 1024px) and (max-width: 1024px) {
// in your case: hide an element, show the other 
#desktopMenu { display:none;} // or display block etc
}

Вы можете настроить width или height, как хотите.

Вот больше о медиазапросах

Вы также можете получить текущие значения области просмотра следующим образом:

// Size of browser viewport.
var width = window.innerWidth;
var height = window.innerHeight;

И затем настроить свой код в зависимости от на что:

if (height >= yourValue) { // or however you want to check the height
document.getElementById('button').setAttribute('data-target', '#desktopMenu'); // or however you want to add/change attributes
}

Надеюсь, что поможет