Выпадающее меню CSS3 и проблемы с iOS

Я пытаюсь создать раскрывающееся меню навигации с некоторыми переходами CSS3. Однако при использовании видимости скрытой/видимой iOS не отображает раскрывающийся список (он просто переходит по ссылке). Если я использую display none/block, iOS отобразит раскрывающееся меню при первом щелчке родительского элемента, но переходы не будут работать ни в одном браузере.

Есть ли способ заставить эти переходы правильно работать в браузерах, а раскрывающиеся списки работать в iOS без использования javascript?

Выпадающий список не работает в iOS:

nav ul li ul {
    position: absolute; visibility: hidden; opacity: 0; left: 0; top: 50px; z-index: 99;
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
nav ul li:hover > ul { visibility: visible; opacity: 1; top: 40px; }

Переходы не работают в браузерах:

nav ul li ul {
    position: absolute; display: none; opacity: 0; left: 0; top: 50px; z-index: 99;
    -webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -moz-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -o-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -ms-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    transition: opacity .35s ease-in-out, top .35s ease-in-out;
}
nav ul li:hover > ul { display: block; opacity: 1; top: 40px; }

ios css css-transitions
person csm232s    schedule 18.04.2012    source источник
comment
Под iOS вы имеете в виду Mobile Safari? Почему вы пытаетесь полагаться на :hover для сенсорного устройства (это непредсказуемо)? Я вижу, что вы не хотите использовать JS, но он позволяет вам быть более точным с событиями. На мой взгляд, вы должны использовать событие щелчка Javascript для отображения и скрытия вещей и подавления действия ссылки с помощью event.preventDefault();   -  person Marcy Sutton    schedule 19.04.2012

Ответы (2)


arrow_upward
2
arrow_downward

Подумав об этом еще немного, я нашел документацию, которую раньше не видел - некоторые странности, с которыми вы сталкиваетесь, могут быть связаны с тем, что вы привязываете поведение к псевдоэлементу чего-то, что не является интерактивным по умолчанию (только якоря элементы формы кликабельны).

https://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html

(Игнорируйте мой первоначальный комментарий о event.preventDefault... Я забыл, что вы работали с элементами списка вместо якорей.)

Однако я по-прежнему считаю, что JS — лучший подход, поскольку вы можете очень точно указывать события, связанные с любым типом элемента. Вы можете просто применить класс CSS, и он будет использовать уже указанные вами свойства перехода.

Нравится:

// CSS
nav ul li > ul.visible { display: block; opacity: 1; top: 40px; }

// JS
// you could bind mouseover/out here too if you want it to work on both desktop & mobile
$('nav ul li').bind('click', function(){
    $(this).children('ul').toggleClass('visible');
});

Если вы хотите быть более крутым, вы можете сделать его доступным с клавиатуры, добавив tabIndex="0" к элементам списка :)

person Marcy Sutton    schedule 18.04.2012

arrow_upward
0
arrow_downward

Я нашел решение для этого. По сути, ios не привязывает щелчок к наведению курсора для всего, что отображается: блокировка / нет или видимость: скрыто / видимо. Поэтому вам нужно просто «скрыть» раскрывающийся список, используя «лево», чтобы компенсировать ‹ = ie8, который не поддерживает непрозрачность.

Поэтому по существу используйте свой второй пример с небольшой настройкой:

nav ul li ul {
    position: absolute; opacity: 0; left: -888em; top: 50px; z-index: 99;
    -webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -moz-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -o-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -ms-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    transition: opacity .35s ease-in-out, top .35s ease-in-out;
}
nav ul li:hover > ul {opacity: 1; top: 40px; left:0;}

Тогда просто убедитесь, что вы не используете «все» в своих переходах, иначе он также анимирует левый атрибут :) Единственная проблема с этим методом заключается в том, что ваши переходы будут работать только на пути внутрь, а не на выходе.

person Jesse    schedule 25.04.2012