Существует достаточно распространенная практика реализации многоуровнего меню с помощью 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, но без перехода по ссылке, а вот второй клик уже произведет переход по выбранной ссылке.