Что сделать с меню чтобы на планшетах и сенсорных телефонах оно нормально открывалось?

Question

[Радость моя]

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

<ul class="mainmenu">
  <li><a href="#">MENU_ITEM1</a></li>
  <li>
      <a href="#">MENU_ITEM2</a>
      <ul>
           <li><a href="#">SUBMENU_ITEM1</a></li>
           <li><a href="#">SUBMENU_ITEM2</a></li>
      </ul>
</li>
  <li><a href="#">MENU_ITEM3</a></li>
  <li><a href="#">MENU_ITEM4</a></li>
</ul>

Чем можно заменить :hover чтобы при попытке открыть SUBMENU_ITEM1 не переходило по MENU_ITEM2 ?

Comments

[Ольга Жижка]

Подскажите пожалуйста, нашли ли вы решение данной проблемы, с помощью jquery, у меня такая же проблема с выпадающим меню. Пробовала сделать чтобы при ширине менее 940 меню выпадало по click, а если более, то по .hover, но не получилось, может подскажите что-нибудь, спасибо.

Answer 1

[Дима Паутов]

Убираем css hover'ы и пишем их на js.
Я делаю так, узнаю тип устройства и пишу для него скрипт!

if(Мобильное устройство или планшет){
то по клику вызываю выпадающий список
} else {
по ховеру
}

Answer 2

[deleted-tnorman]

наверно нужно пересмотреть конструкцию меню с учетом сенсорных устройств.
Доработать его с использовать всякие onTouch события и по надобности отключать дефолтное выполнение нажатия на ссылку.
Но мне кажется, что текущий вариант в любом случае придется, либо видоизменить, либо обрабатывать скриптом дополнительно.