Что использовать для гамбургер меню JS или jQuery?

Question

[Raul Abdullin]

Верстаю своё первое гамбургер меню.
Обладаю только знаниями HTML/CSS.
Но судя по всему для гамбургер меню не сложно использовать JS или jQuery.
Вопрос в том, что в наше время актуальнее JS или jQuery?
Или без разницы?

Comments

[Rustam Bainazarov]

Как jQuery может быть актуальнее JS, когда это просто JS-библитека? Тем паче, не очень актуальная в 2019-м году. JS — это папик, JS — это босс.

Для такой просто задачи подключать jQuery — абсолютно ненужно. Простое переключение класса по клику.

[Raul Abdullin]

Рустам Байназаров, спасибо

[xonar]

raulvodov, Вам верно сказали, это от силы 3-4 строки JS кода.

[Raul Abdullin]

xonar, возможно для тех кто знает JS для них это всего 3-4 строчки кода, а я пока знаю только HTML/CSS и хочу закрепить эти знания, прежде чем лезть в JS. Плюс ко всему прочему я дизайнер и нужно текущими проектами заниматься :)

Answer 1

[Виктор]

prgssr.ru/development/tryuki-s-psevdoklassom-targe... пример есть как делать при помощи псевдокласса target. А если выбирать между нативным Js или Jquery я бы выбрал Js. Вся логика будет в добавлении/удалении класса. По коду разницы не будет, зато не надо будет подключать Jquery.

Comments

[Raul Abdullin]

Не совсем понял, а jQuery нужно еще как-то отдельно подключать? Я думал, что JS и jQuery подключаются к проекту по аналогии с CSS файлами или там как-то иначе процесс проходит?

[Raul Abdullin]

prgssr.ru/development/tryuki-s-psevdoklassom-targe...
изучил информацию, но не совсем понимаю, данный css прописывается для самого меню (желтого меню, которое выдвигается), но ведь в гифке, которая прикреплена там клик происходит по иконке гамбургера-меню, какой код именно для самой иконки прописывать, чтобы выехало данное меню?

[Виктор]

raulvodov, Смотри, Jquery это javascript фреймворк написанный на Js. Просто Jquery облегчает жизнь, к примеру код из 10 строк на js, можно написать на Jquery в 1-2 строки. Внутри Jquery уже будет все реализовано за тебя. Надо знать нужный метод и правильно применить его.

[Виктор]

raulvodov, там есть демонстрация примера, а там уже есть ссылка View Source где можно посмотреть код. Если кратко, то работает след. образом. У тебя есть ссылка с таким href
<a href="#nav">Иконка бургера</a>
Где-то в коде есть елемент с id="nav". Так вот при клике на эту ссылку применяются стили к элементу с id="nav

#nav:target {
	твои стили к элементу с id="nav" когда ты кликнул по <a href="#nav">
}

А вот эта запись

#nav:not(:target) {
	твои стили
}

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

[Raul Abdullin]

Виктор Поляков, ага спасибо, тогда не понятно, почему ты написал в первом сообщении, что выбрал бы JS, если jQuery библиотека действительно облегчает жизнь. А особенно учитывая, что я владею только HTML/CSS, то до JS мне пока далеко и рано :)

[Виктор]

raulvodov, Насколько я знаю Jquery потихонечку умирает. В современных библиотеках и фреймворках, типа React.js, Vue.js и т.д. использование Jquery - признак дурного тона))) Ранее когда js был не так развит как сейчас Jquery был палочкой-выручалочкой. Но на небольших проектах, можно использовать и его для упрощения написания кода. Удачи в обучении!!!

[Raul Abdullin]

Виктор Поляков, ага спасибо большое, буду изучать. А вообще CSS для подобных вещей насколько часто и актуально используется? Не является ли это признаком дурного тона? Я просто вроде бы уже разобрался, как с помощью jQuery эту задачку решить.

[Виктор]

raulvodov, Если есть возможность сделать на css лучше сделать на css. Однако не во всех случаях. К примеру у :target есть свои подводные камни тоже. Надо смотреть по ситуации.

[Raul Abdullin]

Виктор Поляков, а какие камни основные?

[Виктор]

Выдержка из статьи ссылку на которую я тебе скинул:
Насколько я могу сказать, у этого метода есть два потенциальных недостатка:

1) Меняется URL, что влияет на историю браузера. Это значит, что при переходе пользователя “назад”, он может непреднамеренно перейти к целевому элементу.
2) Для закрытия целевого элемента пользователю надо перейти к другому элементу или просто к #. Последний вариант (который я использую в своих примерах) не является семантичным и может перенаправить пользователя к началу статьи, к чему пользователь может быть не готов.

1 это значит что ты зашел на сайт с какого-то ресурса и раза 3-4 открыл-закрыл меню гамбургера. А потом решил вернуться на данный ресурс и нажал на стрелку назад в верхней левой части окна браузера. И вместо того чтобы вернуться на страницу с которой ты заходил у тебя будет открываться и закрываться меню гамбургера.
2 Если к примеру у тебя на закрытие меню ссылка , (то есть будет #nav:not(:target)), находится где-то внизу и есть скролл, то при нажатии на такую ссылку у тебя страница резко проскролится вверх. Это будет не очень хорошо потому что ты ожидал что только закроется меню.
Может и еще чего-то есть, погугли.

[Raul Abdullin]

Виктор Поляков, да согласен, спасибо большое, поэтому лучше буду пока использовать jQuery, вчера до поздней ночи тыкался, но в итоге получил нужный результат :)

Answer 2

[VegasChickiChicki]

Приведу аналогию:
JS - молоток, вы им выбиваете гвозди.
JQ - гвоздострел, вы им так же вбиваете гвозди, но быстрее.

Говорить о том, что более актуальные JS и JQ, это какая то дичь.
Вы вообще в курсе, JQ это библиотека JavaScript?

Comments

[sim3x]

но быстрее

по какой метрике быстрее?

Answer 3

[PiCensored]

Если в проекте будут много скриптов, в виде таких свистелок, и тем более плагины с использованием jQuery. То проще на jQuery. Если парочка скриптов - то нативный js.
Вообще смотреть надо по проекту и какую цель приследуете.

Comments

[Raul Abdullin]

Мне нужно исключительно для гамбургер меню. Поэтому видимо парочка скриптов. А можно еще вопрос, как создать файл JS или jQuery и привязать его к проекту? Так же через, как мы привязываем css файлы или нужно еще что-то дополнительное проделать?

Answer 4

[Pavel Zuev]

Bootstrap 4 посоветовал бы, а так на JQuery быстро и просто и куча готовых решений