Я нахожусь в неудачной ситуации, когда нужно создать раскрывающееся каскадное меню на сайте, который я создаю. Я ищу решение типа Suckerfish, которое в основном основано на CSS и работает с простым набором вложенных UL и LI.
Сын Suckerfish кажется таким, каким он хочет, но мне не нравится, как он просто исчезает, когда вы двигаете мышь, так как у пользователей с трудностями координации будет кошмар, перемещающийся по сайту (или просто не беспокойтесь, но поскольку на корпоративном сайте есть те, кому, вероятно, придется использовать то, что я реализую).
Неплохие функции, которые я даже не думал о необходимости, приветствуются, но два основных элемента, которые я ищу, следующие:
Я настоятельно рекомендую вам использовать superfish, адаптацию jQuery меню suckerfish. Он имеет множество функций (и задержка является одним из них), добавляет некоторые фантастические возможности анимации и изящно деградирует в обычное меню suckerfish. Это также не требует дополнительной разметки.
Вы можете использовать jQuery. Вот пример: http://www.jqueryplugins.com/plugin/47/
Вы не сможете получить раскрывающееся меню с чистым CSS с требуемой функциональностью. Вам придется использовать какой-то Javascript. Либо библиотека, как JQuery, о которой упоминалось, либо путем изменения кода Suckerfish для использования onclick вместо onmouseover/out.
Но, перейдя по всему маршруту Javascript, вы могли бы облегчить задачу для одной группы людей ( "пользователи с трудностями координации" ), но это затрудняет работу с другими (кто-то с отключенным Javascript по какой-то причине).
Возможно, вам захочется изучить некоторые альтернативы - меню курсора, управляемое мышью, для удобных с мышью; управление на основе клавиатуры с помощью клавиш доступа и т.п. для других.
Я использую решение, реализованное на сайте Стива Гибсона grc.com. Он делает все, что мне нужно, и использует без javascript. Задержка, которую вы ищете, не существует, поэтому вам, вероятно, потребуется добавить для этого Javascript.
Часть проблемы координации может быть связана с плохим дизайном. Удостоверьтесь, что у вас достаточно большие кнопки, если это возможно, перекрываются со всех сторон. В идеале верхняя кнопка навигации будет иметь выпадающее меню, расположенное под ним (вместо выравнивания по левому краю). Подменю выпадающего списка будет следовать аналогичной схеме. Я обнаружил, что этот уровень заполнения ошибок вмещает несогласованных пользователей и экономит ваши проблемы при программировании в javascript.
Каждый сайт отличается, конечно, поэтому я представляю это скорее как альтернативное решение "что-если".
Для тех, кто приходит в этот старый поток, я бы предложил просмотреть различные модификации раскрывающегося меню бутстрапа. Например:
http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
Удачи.
Я не вижу способа добавить задержку вне JavaScript - но если вы собираетесь использовать JavaScript, вы можете также использовать управляемое JavaScript меню.
Если вы следуете семантически правильному шаблону навигации и настроите его так, чтобы он отображался нормально (например, статический), когда JavaScript отсутствует, вы должны быть в порядке с тем, что используете.
Это все о вашей целевой аудитории - кто больше? JS-инвалидов или пользователей с трудностями координации? Я бы предположил, что последние требуют приоритета (если не для процентного использования, то законов об инвалидности).
Как сказал Ли Теобальд, у вас есть Javascript, JQuery - отличный выбор. Но в стороне от доступности взгляните на " Listamatic" отличный список меню и специальные этот вложенный.
Мои первые эхо-рекомендации, которые уже сделаны, - Меню CSS Стив Гибсона. Он не использует JavaScript, примерно так же кросс-платформенный, как вы собираетесь получить, и его относительно просто реализовать.
Если это не сработает, моя рекомендация на основе JS будет mygosuMenu. Я использовал его в течение некоторого времени на всех моих проектах, прежде чем найти меню Стива. Его высоко настраиваемый; и стиль, структура и код меню - все отдельно. Его базовая таблица HTML, которую вы можете стилизовать с помощью CSS для вашего сердечного контента.
У меня все еще есть два сайта, использующих последний: