Как реализовать на готовом меню клик по выпадающему списку и совместить его с hover при наведении?

Question

[mantruegood]

Подскажите пожалуйста как можно реализовать вот в это меню которое над баннером вывод меню при клике что бы работал совместно с hover. Просто в мобильной версии не работает при клике меню, вот для этих целей надо реализовать, никак не выходит... Пробовал after focus но не получилось :(
Вот сам сайт: ссылка

Answer 1

[strelok011]

Мобильные браузеры не имеют события hover (мышки ж нет). Они его эмулируют, и это не очень качественно.
Нормальное меню пишите на js. Вместо ховера будут события mouseover/out, mouseenter/leave https://learn.javascript.ru/mousemove-mouseover-mo...
Ну и click соответственно.
Как альтернатива - оставляете ховер на десктопе, для мобильного вида ховер стили отключаете через media queries, оставляете обработку только клика.
Примеров реализации много найти можно.

Comments

[mantruegood]

А с помощью CSS в моем случае решить вопрос никак нельзя? Ну или как решить с помощью JS? Я в JS не разбираюсь вовсе :(

[strelok011]

CSS вам тут не помощник. Вот рабочий пример с минимальным количеством кода, работает только по клику, меняет класс у родителя (замена ховеру) https://next.plnkr.co/edit/DUYQPVVnAElUHjVAIp9X?p=...

Описание https://learn.javascript.ru/task/sliding-menu

[mantruegood]

strelok011, Попробовал два скрипта, но не работают.

<script>
    let menuElem = document.getElementByClassName('section--main_menu')[0];
    let titleElem = menuElem.querySelector('.menu--dropdown');

    titleElem.onclick = function() {
      menuElem.classList.toggle('open');
    };
  </script>

<script>
$('ul li > a').on('click', function(e) {
  var li = $(this).closest('li');
  if (li.find('ul.menu--dropdown').length) {
    if (!li.hasClass('active')) {
      e.preventDefault();
    }
    li.toggleClass('active');
  }
});
$(document).mouseup(function(e) {
  var div = $('ul li.active');
  if (!div.is(e.target) && div.has(e.target).length === 0) {
    div.removeClass('active');
  }
});
</script>

[strelok011]

Набросал, в консоли работает.
Привожу только js, стили надо будет поправить.

let menuElem1= $('.menu--main')[0]; // выбираем ul с меню
let titleElem1 = $(menuElem1).children('li'); // собираем все вложенные в меню элементы li

// блокируем переходы по ссылкам верхнего уровня меню (если нужно обрабатывать только с вложением - надо либо классы добавить и целиться на них, либо придумывать другой механизм, убирать к примеру ссылки или еще что-нибудь)
$(titleElem1).children('a').click(function(event){
  event.preventDefault();
});

// собственно функция обработки клика на заголовке. Убирает со всех элементов класс open, добавляет на кликнутый элемент класс open.

    $(titleElem1).on('click', function() {
        $(titleElem1).removeClass('open');
      $(this).toggleClass('open');
    });

Дополнительно можно навертеть любой функционал, но это всё время.
Читайте документацию всё же и учите js.

[mantruegood]

strelok011, попробовал, но не работает, а что в стилях надо поправить? Сейчас код на сайте

[strelok011]

функция инициализируется до загрузки контента, заверните ее в такой вызов:
$( document ).ready(function() {
--- сюда код ---
});

когда функция заведется, у вас при клике на элемент li.menu-node.menu-node--main_lvl_1.js-menu-wrapper
будет добавляться и убираться новый класс "open". Привязывайте к этому модификатору отображение вложенного меню, без обработки hover

[mantruegood]

strelok011, ясно, спасибо. Но так у меня и не выходит. Сайт на конструкторе, поэтому там черт ногу сломит где что находится. Пробовал выключить hover для

.menu-node:hover > .menu--dropdown {
  display: block;
  z-index: 1000;
}

.menu-node:hover > .menu--side {
  display: block;
}

Но меню перестает работать

[strelok011]

Если сайт на конструкторе - надо разобраться в какой последовательности отрабатывают скрипты. Возможно его собственный функционал чем-то препятствует.

Answer 2

[mantruegood]

Попробовал два скрипта, но не работают.

<script>
    let menuElem = document.getElementByClassName('section--main_menu')[0];
    let titleElem = menuElem.querySelector('.menu--dropdown');

    titleElem.onclick = function() {
      menuElem.classList.toggle('open');
    };
  </script>

<script>
$('ul li > a').on('click', function(e) {
  var li = $(this).closest('li');
  if (li.find('ul.menu--dropdown').length) {
    if (!li.hasClass('active')) {
      e.preventDefault();
    }
    li.toggleClass('active');
  }
});
$(document).mouseup(function(e) {
  var div = $('ul li.active');
  if (!div.is(e.target) && div.has(e.target).length === 0) {
    div.removeClass('active');
  }
});
</script>

Может кто подскажет как в моем случае можно решить с помощью этих скриптов проблему?