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

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

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

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

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

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

3
1.12.2011 03:19:04

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

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

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

1
19.08.2008 09:38:19

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

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

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

0
25.08.2008 13:52:01

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

1
25.08.2008 13:56:13

Как сказал Ли Теобальд, drop-down нужен Javascript, и Jquery - отличный выбор. Но с точки зрения доступности, взгляните на « Листаматик », отличный список меню и специальных вложенных .

0
25.08.2008 13:58:56

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

8
2.01.2009 18:47:50

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

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

1
2.01.2009 18:59:13

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

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

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

0
2.01.2009 19:33:09

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

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

Удачи

1
7.03.2017 10:41:17