Wordpress меню iPhone и iPad ПЛОХОЕ поведение

Question

На этом сайте: mecanomedic.com , шаблон меню прекрасно работает в «обычном» настольном браузере, но не скользит на устройстве ipad-iphone.В чем может быть проблема?

Некоторые говорят мне, что это проблема css, но КАК работает рабочий стол safari?

Answer 1

Проблема в том, что расширение меню зависит от пользователя, зависшего с помощью мыши. На сенсорных устройствах, таких как айпады и айфоны, жест зависания не может быть воспроизведен, потому что есть только одно касание ввода. На вашем месте я бы взглянул на настройку меню Bootstrap в Твиттере и, возможно, использовал бы медиа-запросы для показа другого меню на экранах меньшего размера.

Вот пример панели навигации Bootstrap в действии (вам нужно проверить код, чтобы увидеть, как он работает) .

Answer 2

Добавьте href к <a> верхнего уровня, чтобы они могли фокусироваться:

<a href="#">Produits</a>

Элементы, которые можно фокусировать, получают события мыши и стили при наведении на них, когда пользователь нажимает на них.

Answer 3

Как сказал @Matt, проблема в том, что ваше меню зависит от события зависания и, к сожалению, это событие недоступно на устройствах с сенсорным экраном.

Один из способов исправить это:

1. Проверьте, является ли устройство текущего пользователя устройством iOS
2. Если устройство является устройством iOS, используйте javascript для запуска «показа события» пункта меню, когда кнопка меню щелкается вместо ROLLED OVER / HOVERED.

Это приведет к тому, что меню будет отображаться, когда пользователь нажимает кнопку меню.