Существует достаточно распространенная практика реализации многоуровнего меню с помощью 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, но без перехода по ссылке, а вот второй клик уже произведет переход по выбранной ссылке.
Разработка сайта
Подайте заявку на разработку сайта на базе готового решения от компании 1С-Битрикс или одного из партнеров компании. Максимально подробно опишите, чему будет посвящен сайт, если это интернет-магазин - что он будет продавать, нужна ли мультиязычность, будут ли разные типы цен (розница, опт, крупный опт), будет ли интеграция с 1С, будет ли выгрузка товаров на различные торговые площадки...
Сопровождение сайта
Вы можете подать заявку на сопровождение вашего сайта на базе 1С-Битрикс. Сопровождение включает в себя: проверка актуальности обновлений сайта, проверка актуальности резервной копии, консультации по сайту. Опишите в заявке, какие еще объемы планируются на сопровождении и на какой срок вы планируете заключить договор на сопровождение - мы подберем подходящий вам бюджет на сопровождение
Работы по сайту
Вы можете подать заявку на выполнение определенного объема работ по сайту. Опишите в заявке объем работ. Это может быть разработка какого-то нового функционала, доработки по имеющемуся функционалу, доработки под требования сео-специалистов. На основании заявки вам будет сформирован бюджет работ, а также названы сроки на выполнение тех или иных работ.