CSS Drop-Down меню - "Лучший"? Большинство многофункциональных?

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

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

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

  • Многоуровневое использование вложенной структуры UL/LI
  • Небольшая (возможно, настраиваемая?) задержка перед исчезновением, когда меню "mouseout" -ed, даже если оно предоставлено некоторым дополнительным JavaScript.

ОТВЕТЫ

Ответ 1

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

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

Удачи.

Ответ 7

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

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

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

Ответ 8

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

Ответ 9

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

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

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