CSS Mega Menu - странное поведение на сенсорных ПК

Question

CSS Mega Menu - странное поведение на сенсорных ПК

0

У меня есть меню на этом сайте, которое обычно работает на chrome на стандартном ПК с Windows 8.1, но имеет странные проблемы при просмотре на хром на ноутбуке Windows 8.1 с сенсорным экраном.

Элементы подменю не являются кликабельными, и когда вы теряете фокус, появляется странное ореоление текста. Не видел этого раньше и не совсем уверен, что вызывает его. Я использую Foundation 4, сайт построен на Orchard.

http://www.barossa.sa.gov.au.web7.tempdomain.com.au/

Любой совет будет принят во внимание!

beebul 10 апр. 2014, в 01:17

Источник

Теги:

jquery

html

zurb-foundation

css

css3

1 ответ

Ещё вопросы

Andrew · Accepted Answer · 2014-04-24T00-40-00.000Z

Чтобы воспроизвести проблему, откройте инструменты разработчика Google Chrome и включите "Эмуляция сенсорного экрана".

Теперь нажмите на элемент меню верхнего уровня (например, Совет) и наведите указатель мыши за пределы меню. Мы видим, что заголовки подменю меню видны. Наведите указатель мыши на "Совет", и вы увидите, что последний уровень элементов меню становится видимым.

Причина, по которой это происходит, заключается в том, что, когда вы нажимаете "Совет", он добавляет "hover" класса CSS к элементу li. Внутри этого li есть ul с классом "dropdown". Выполняется правило CSS, которое устанавливает это на видимое, если класс "hover" применяется к родительскому элементу li.

Глядя на документацию фонда http://foundation.zurb.com/docs/v/4.3.2/components/top-bar.html, здесь есть одна и та же функциональность. Разница заключается в том, что при нажатии вне меню класс "hover" удаляется из элементов в меню. Это не происходит с вашим решением.

Может быть связано с..

Я бы рекомендовал вам обновить CSS и JavaScript до последней версии (4.3.2).

В противном случае вы можете создать грязный jQuery для мониторинга, когда вы выходите за пределы меню и удаляете класс.hover из всех элементов в меню.

Надеюсь, это поможет.