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

Solmyr
На сайте с 10.09.2007
Offline
501
3368

Есть выпадающее меню, которое выпадает благодаря свойству css:hover Первый (корневой) пункт меню - активный, кликабельный.

Хочу сделать на мобильных устройствах так, чтобы первый клик по этому пункту раскрывал меню, а второй - уже осуществлял переход по ссылке.

Не могу понять как это сделать, потому что на мобильных устройства, клик по этому пункту меню все-таки вызывает сначала срабатывание css селектора :hover а только после этого происходит событие onclick.

Как различить "настоящий" hover от эмулированного мобильным устройством, и, соответственно, в зависимости от этого запрограммировать поведение меню?

Или существует ли какой-то способ, гарантированно и кроссплатформенно, понять что данный евент click произошел не от мышки а от сенсорного экрана?

mugukamil
На сайте с 05.11.2013
Offline
26
#1

http://codepen.io/senff/pen/KBlyo

можете попробовать добавить псевдокласс :focus

Solmyr
На сайте с 10.09.2007
Offline
501
#2

mugukamil, Проблема в том, что на мобильных устройствах, при нажатии по "This is a title, hover me!" - происходит событие onclick для этого объекта. Нужно сделать чтобы на десктопах onclick происходил, а на тачскринах происходило только разложение меню, а onclick блокировать.

panic
На сайте с 04.07.2008
Offline
187
#3

я недавно именно из-за этой заморочки отказался от выпадающего меню на адаптивном сайте

Цифровая мастерская kr.digital (http://kr.digital) - дорого!
богоносец
На сайте с 30.01.2007
Offline
734
#4

Вообще гуглится чтиво:

тачскрин css hover

тачскрин js

Но среди самых дешёвых мобил ещё и хз что работает, они могут очень простого-привычного не уметь.

Solmyr
На сайте с 10.09.2007
Offline
501
#5
богоносец:
Вообще гуглится чтиво:

Гуглится много, но решений нет :(

Посмотрел сайты ФБ, ВК, Ебэй, Али - везде на выпадающих меню ховер или клик вызывают именно открытие меню, но не действие (в т.ч. и на десктопе ). Походу так и придется делать....

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий