Слишком быстрое раскрытие CSS в IE - PullRequest
2 голосов
/ 29 июля 2010

Я создал выпадающее меню CSS с помощью suckerfish. Проблема в том, что при нажатии на элемент навигации верхнего уровня, который ведет на страницы категорий, указатель все еще находится над этим элементом навигации, и в IE автоматически появляется раскрывающийся список.

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

Поскольку меню довольно большие, пользователь не знает, что страница изменилась.

Этот сайт http://www.foodnetwork.com/, кажется, добивается того, чего я хочу, с небольшой задержкой, прежде чем снова появится выпадающий список. Я знаю, что они смешивают это с JS и CSS, но не могут понять, что они делают.

Любые мысли

Ответы [ 4 ]

1 голос
/ 30 июля 2010

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

Это решение содержит следующие атрибуты:

  • Никаких сценариев на стороне клиента (Javascript) не использовалось
  • Абсолютная совместимость браузера и платформы
  • Подходит для масштабирования текста
  • Обработка узкой ширины окна
  • Функционально для не-CSS или CSS-отключен, браузер
  • Помещено в общественное достояние

Сайт, на котором размещен файл, использует это меню (оно принадлежит автору). Так что, пожалуйста, посетите эту страницу GRC без скриптов Pure-CSS .

Я действительно надеюсь, что это поможет вам !!

0 голосов
/ 29 июля 2010

Просто добавьте это, так как могут быть другие изменения, которые вы хотели бы, чтобы в меню было также:

Возможно, вы захотите рассмотреть Superfish (обновленная / обновленная [и, возможно, излишняя, так что посмотрите] версия Suckerfish), одно из дополнений - опция delay в меню.

0 голосов
/ 30 июля 2010

Итак, я получил решение для этого.

Я добавил CSS с JS в заголовок документа и установил небольшую задержку. Таким образом, когда пользователь щелкает по главной навигационной ссылке, раскрывающийся список по умолчанию скрывается с помощью CSS, а затем открывается для отображения с помощью CSS, написанного с помощью JS. Пользователь видит страницу без выпадающего списка при загрузке страницы, а затем через 1,5 секунды появляется выпадающий список, поэтому пользователю показывается, что страница перезагружена. // Add dropdown styles function addDDStyles() { var head = document.getElementsByTagName('head')[0]; var logindiv = document.createElement('link'); logindiv.setAttribute('type', 'text/css') logindiv.setAttribute("rel", "stylesheet"); logindiv.setAttribute("href", '<a href="http://files.stv.claw/css/dropdown.css" rel="nofollow noreferrer">http://files.stv.claw/css/dropdown.css</a>'); logindiv.setAttribute("media", "screen"); head.appendChild(logindiv); } setTimeout('addDDStyles()', 1500)

0 голосов
/ 29 июля 2010

Используйте jQuery's hoverIntent для достижения этого эффекта задержки. Кроме того, меню остается там, даже если курсор на мгновение выходит из меню. Предотвращает эффект отвлекающего мерцания появления и исчезновения меню.

...