Выпадающие меню CSS - «Лучший»? Наиболее многофункциональный?

Question

К сожалению, я вынужден реализовать раскрывающееся каскадное меню на сайте, который я создаю. Я ищу решение в стиле Suckerfish, основанное в основном на CSS и работающее с простым набором вложенных UL и LI.

Сын Suckerfish кажется, что путь, но мне не нравится то, как он просто исчезает, как только вы убираете мышь, так как пользователям с проблемами координации будет кошмарная навигация сайт (или просто не беспокоить, но, поскольку это корпоративный сайт, есть люди, которые, вероятно, будут иметь , чтобы использовать то, что я реализую).

Приятные функции, о которых я даже не думал, приветствуются, но два основных элемента, которые я ищу:

1. Многоуровневый с использованием вложенной структуры UL / LI
2. Небольшая (возможно настраиваемая?) Задержка перед исчезновением, когда меню «наведено», даже если оно обеспечивается некоторым дополнительным JavaScript.

Answer 1

Я бы настоятельно предложил бы использовать superfish , адаптацию jQuery меню suckerfish. Он имеет множество функций (и задержка является одной из них), добавляет некоторые необычные возможности анимации и изящно ухудшает нормальное меню suckerfish. Также не требуется никакой дополнительной разметки.

Answer 2

Вы можете использовать jQuery. Вот пример: http://www.jqueryplugins.com/plugin/47/

Answer 3

Для всех, кто заходит в эту старую ветку, я бы посоветовал взглянуть на различные модификации выпадающего меню начальной загрузки. Например это:

http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

Удачи

Answer 4

Часть проблемы с координацией может возникнуть из-за плохого дизайна. Убедитесь, что у вас достаточно большие кнопки, которые, по возможности, перекрываются со всех сторон. В идеале верхняя навигационная кнопка должна иметь выпадающее меню, расположенное по центру под ней (вместо выравнивания по левому краю). Подменю раскрывающегося списка будут следовать аналогичной схеме. Я обнаружил, что такой уровень заполнения ошибок подходит для несогласованных пользователей и избавляет вас от необходимости программирования на javascript.

Конечно, каждый сайт индивидуален, поэтому я представляю это скорее как альтернативное решение "что, если".

Answer 5

Я использую решение, реализованное на сайте Стива Гибсона grc.com . Он делает все, что мне нужно, и использует без JavaScript . Однако задержки, которую вы ищете, нет, поэтому вам, вероятно, придется добавить для этого немного Javascript.

Answer 6

Вы не сможете получить простое выпадающее меню CSS с необходимой вам функциональностью. Вам придется использовать какой-то Javascript. Либо библиотека, подобная JQuery, о которой упоминалось, либо путем изменения кода Suckerfish для использования onclick вместо onmouseover / out.

Но, пройдя весь маршрут Javascript, вы могли бы облегчить его для одной группы людей («пользователи с проблемами координации»), но затруднить для других (любой, у кого Javascript отключен по какой-то причине). *

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

Answer 7

Моя первая рекомендация уже сделана - Меню Стива Гибсона CSS . Он не использует JavaScript, он настолько кроссплатформенный, насколько вам нужно, и относительно прост в реализации.

Если это не сработает, моя рекомендация на основе JS перейдет к mygosuMenu . Я использовал его в течение довольно долгого времени во всех своих проектах, прежде чем нашел меню Стива. Его легко настраивается; и стиль, структура и код меню все отдельно. Это базовая таблица HTML, которую вы можете стилизовать с помощью CSS, если хотите.

У меня еще есть два сайта, использующих последний:

• Christian Rock group Jesus Joshua 24: 15 (будьте добры к трафику, ребята все еще на виртуальном хостинге ...)
• Восточное пожарное управление

Answer 8

Как сказал Ли Теобальд, выпадающему / нуждающемуся нужен Javascript, и Jquery - отличный выбор. Но с точки зрения доступности взгляните на " Listamatic " большой список меню и специальных это вложенных .

Answer 9

Я не вижу способа добавить задержку вне JavaScript - но если вы собираетесь использовать JavaScript, вы также можете использовать управляемое JavaScript меню.

Если вы следуете семантически правильному шаблону навигации и настроите его так, чтобы он отображался нормально (например, статически), когда отсутствует JavaScript, у вас должно получиться все, что вы используете.

Это все о вашей целевой аудитории - кто больше? JS-инвалиды или пользователи с проблемами координации? Я полагаю, что последние требуют приоритета (если не для использования в процентах, то законы об инвалидности).