Как правильно писать media в jQuery?

Question

[myskypesla]

Привет.

Есть меню, которое имеет 4 состояния, breackpoint'ы для этих состояний: 1440px, 1024px, 768px, 480px.

На работе вёрстку никто не проверяет на мобильных устройствах, все сжимают ширину браузера.
Соответственно нужно добавлять класс при изменении ширины и при загрузке страницы.
С помощью CSS нельзя сделать такое меню, так как идёт перемещение элементов и т.д.

Вопрос, как правильно делать проверку при рейсайзе с помощью jQuery?

Сейчас я делаю так:

$(document).ready(function() {
  menu();
});
$(window).resize(function() {
  menu();
});
function menu() {
  if ($(window).width() <= 1440) {
    console.log('breakpoint 1440');
  } else if ($(window).width() <= 1024) {
    console.log('breakpoint 1024');
  } else if ($(window).width() <= 768) {
    console.log('breakpoint 768');
  } else if ($(window).width() <= 480) {
    console.log('breakpoint 480');
  }
}

Answer 1

[Юнус Газиев]

Это и без jQuery давно и хорошо работает Window.matchMedia()

Answer 2

[game802]

HTML

<header class="menu">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</header>

CSS

@media (max-width: 1000px) {
  .menu {
    background-color: red;
  }
}

codepen

Comments

[myskypesla]

Ведь вопрос про jQuery, и про невозможность сделать перестройку меню на CSS тоже я написал.

[game802]

myskypesla: не совсем понимаю, почему для такого примитива использовать jQuery?

[game802]

myskypesla: в чем заключается невозможность сделать это через CSS?

[myskypesla]

К примеру в меню, которое появляется новое поле, поиска, а в десктопе, оно находится вне меню, мне нужно чтобы не плодить сущности, просто с помощью append переместить из блока contetn, поиск в header, это один из примеров перестройки меню.

[Kovalsky]

myskypesla: выбранный вами путь очень сложный, мне кажется. Даже просто сделать два блока для меню - десктопный и мобильный - было бы проще, ведь останется просто показывать один из них и скрывать другой.

Но если очень надо, то в принципе можно и так. В вашем коде лучше проводить проверку начиная с нижнего брейкпоинта, т.к. при ширине окна в 300 пикселей выполнится часть кода предназначенная для ширины меньше или равной 1440 пикселям.

[myskypesla]

Никита Полевой: дело в сео и как было несколько раз, поисковики выставляли санкции и появлялись дубли ссылок из второго меню, даже если делаешь меню display none

[Kovalsky]

myskypesla: вы уверены что санкции были именно по этому поводу?

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

[game802]

myskypesla: htmlbook.ru/html/a/rel

[myskypesla]

Никита Полевой: наш сео специалист показывал и мы решили проблему дублей только удалением второго меню

[myskypesla]

HackOwnB: зачем такие сложности, если можно использовать JS и решить за час вопрос с меню высокой сложности

[myskypesla]

Никита Полевой: хотя как вариант ещё у в качестве CMS был битрикс, он тоже дубли создаёт. Но я всё-так приверженец одного меню, а не разных для нескольких версий сайта

[game802]

myskypesla: https://codepen.io/anon/pen/awRxXZ?editors=1010