My<cod/>.net
CSS Выпадающем Меню - "Best"? Самый многофункциональный?
Я нахожусь в неудачном положении, когда мне приходится реализовывать выпадающее каскадное меню на сайте, который я создаю. Я ищу решение в стиле Suckerfish, которое в основном основано на CSS и работает на простом наборе вложенных ULs и LIs.
Son of Suckerfish кажется, что это путь, но мне не нравится, как он просто исчезает в ту же секунду, когда вы убираете мышь, так как пользователи с трудностями координации будут иметь кошмар навигации по сайту (или просто не беспокоить, но поскольку это корпоративный сайт, есть некоторые, кто, вероятно, придется использовать все, что я реализую).
Аккуратные функции, о которых я даже не думал, приветствуются, но два основных элемента, которые я ищу, - это:
- Многоуровневое использование вложенной структуры UL / LI
- Маленький (возможно, настраиваемый?) задержка перед исчезновением, когда меню "mouseout"-ed, даже если это предусмотрено некоторым дополнительным JavaScript.
Я бы настоятельно рекомендовал вам использовать superfish, адаптацию jQuery меню suckerfish. Он имеет множество функций (и задержка является одним из них), добавляет некоторые причудливые возможности анимации и изящно деградирует до обычного меню suckerfish. Ему также не нужно никаких дополнительных markup.
Вы не сможете получить чистое выпадающее меню CSS с требуемой вам функциональностью. Вам придется использовать какой-нибудь Javascript. Либо библиотека, подобная упомянутой выше JQuery, либо путем изменения кода Suckerfish для использования onclick вместо onmouseover/out.
Но, идя по маршруту все Javascript, вы могли бы облегчить его для одной группы людей ("пользователи с трудностями координации"), но затруднить его для других (тех, кто по какой-то причине отключил Javascript).
Возможно, вы захотите добавить некоторые альтернативы - управляемое мышью меню наведения для тех, кому удобно с помощью мыши; управление на основе клавиатуры с помощью клавиш доступа и тому подобное для других.
Частично проблема координации может быть связана с плохим дизайном. Убедитесь, что у вас есть достаточно большие кнопки с, по возможности, перекрытием со всех сторон. В идеале верхняя кнопка навигации будет иметь выпадающее меню, расположенное по центру под ней (вместо выравнивания по левому краю). Подменю выпадающего списка будет следовать аналогичной схеме. Я обнаружил, что наличие такого уровня заполнения ошибок вмещает несогласованных пользователей и избавляет вас от проблем программирования в javascript.
Каждый сайт, конечно, отличается, поэтому я представляю это больше как альтернативное решение 'what-if'.
Для тех, кто приходит к этому старому потоку сейчас, я бы предложил заглянуть в различные модификации раскрывающегося меню bootstrap. Например это:
http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
Удачи
Я не вижу способа добавить задержку за пределами JavaScript - но если вы собираетесь использовать JavaScript, вы можете также использовать управляемое меню JavaScript.
Если вы следуете семантически правильному шаблону навигации и настраиваете его так, чтобы он отображался нормально (например, статично), когда JavaScript отсутствует, вы должны быть в порядке с тем, что вы используете.
Все дело в вашей целевой аудитории - кто больше? JS-инвалиды или пользователи с трудностями координации? Я бы предположил, что последние требуют приоритета (если не для процентного использования, то для законов об инвалидности).
Как сказал Ли Теобальд, drop / down нужен Javascript, а Jquery-отличный выбор. Но в стороне от доступности, взгляните на "Listamatic" большой список меню и специальные это вложенные .
Моя первая рекомендация повторяет уже сделанную- меню Стива Гибсона CSS . Он не использует JavaScript, примерно так же кросс-платформенно совместим, как вы собираетесь получить, и относительно прост в реализации.
Если это не сработает, моя рекомендация на основе JS переходит к mygosuMenu . Я довольно долго пользовался им на всех своих проектах, прежде чем нашел меню Стива. Его можно легко настроить; а стиль, структура и код меню-все это отдельные элементы. Это базовая таблица HTML, которую вы можете стилизовать через CSS в свое удовольствие.
У меня все еще есть два сайта, использующих последний:
- Христианская рок-группа Jesus Joshua 24:15 (будьте добры к трафику, ребята все еще на общем хостинге...)
- Отдел Пожарной Биржа, Галерея