Существует достаточно распространенная практика реализации многоуровнего меню с помощью hover-эффекта, когда подразделы показываются только при наведении мыши на раздел верхнего уровня.
Данный вариант реализации уже давным давно заслужил свое право на существование и используется в миллионах сайтов, но что делать на устройствах, лишенных такого блага цивилизации, как компьютерная мышь? А в последние несколько лет, достаточно высокую популярность набирают планшеты, ничем не уступающие по размерам экрана стандартным мониторам и правила, прописанные для адаптивности сайта на основании ширины экрана, в данном случае нам не помощник.
На touch-экранах нет понятия hover-эффекта, поэтому его нужно "придумать".
В стилях CSS оставляем, как и были стили для hover, а вот клик по верхним пунктам меню, нужно заменить на tap.
Для этого, ссылкам, подлежащим hover-обработке, добавляем data-атрибут (data-hover) с классом, который должен быть добавлен к элементу при наведении курсора на элемент (или первом клике при отсутствии курсора). И пишем скрипт:
$(document).on('click','[data-hover]',function(e){
e.preventDefault();
var $this = $(this);
var onHover = $this.attr('data-hover');
var linkHref = $this.attr('href');
if (linkHref && $this.hasClass(onHover)) {
location.href = linkHref;
return false;
}
$this.toggleClass(onHover);
});
$(document).on('mouseenter mouseleave','li.menu__item',function () {
var hoverLink = $(this).find('[data-hover]')
if(hoverLink!==undefined && hoverLink.length>0){
var onHover = hoverLink.attr('data-hover');
hoverLink.toggleClass(onHover);
}
});
Таким образом, на обычном экране, при наличии курсора мыши все будет работать, как и работало (в том числе и клик по верхнему элементу), а при отсутствии курсора, первый клик по верхнему разделу выполнит роль hover, но без перехода по ссылке, а вот второй клик уже произведет переход по выбранной ссылке.