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

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

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

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

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

Ответов (9)

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

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

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

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

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

Удачи

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

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

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

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

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

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

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

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

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

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

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

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