В последнее время на SitePoint было много разговоров о выпадающих меню, и не все они абсолютно точны. Поэтому я почувствовал необходимость внести свой вклад и установить рекорд в вопросах наилучшей практики, когда дело доходит до меню JavaScript во всех их формах.
Сначала давайте рассмотрим ключевые проблемы, которые влияют на удобство использования:
- Меню, управляемое мышью, должно иметь таймеры, которые задерживают их открытие и закрытие. Открытые таймеры означают, что случайное движение мыши не вызывает меню, когда они нежелательны. Таймеры закрытия означают, что если ваша мышь на мгновение выскользнет или выйдет за пределы меню, она не закроется резко. А синхронная комбинация этих двух означает, что вы можете перемещать мышь от одной ссылки к другой, не вызывая другие меню при переходе по промежуточным ссылкам.
- меню должны быть в состоянии перемещаться на лету, так что, если они приближаются или пересекают край окна, они сдвигаются или переворачивают положение, чтобы избежать этого
- меню должно быть доступно только с помощью клавиатуры. Допускается возможность последовательного перехода по ссылкам и последовательного открытия дочерних меню; возможность навигации с помощью клавиш со стрелками идеально
Теперь эти три вещи вместе определяют разницу между функционально используемым меню и ужасно неиспользуемым меню и кошмаром для пользователей. Все эти три вещи требуют реализации сценариев, и это подводит меня к следующим важным вопросам реализации и резервного контента:
- ссылки верхнего уровня меню должны ссылаться на страницы, которые обеспечивают доступ ко всему содержимому, так что все, что было доступно из меню, также доступно без него. Ссылки верхнего уровня являются основным содержанием меню; подменю — прогрессивное улучшение
- если сценарии недоступны, меню не могут быть сделаны прилично пригодными для использования, и поэтому не должны работать вообще — не используйте триггеры меню чистого CSS
Чистые меню CSS — интересное доказательство концепции, но это все, что они есть. Их изобретение Эрика Мейера привело нас к переосмыслению того, как в первую очередь должны создаваться меню (до этого все меню создавались с бесконечными наборами таблиц и разделов, написанных документами; Эрик показал, как можно преобразовать семантическую структуру в меню), но сами по себе они не подходят для реального использования производства.
Нам также необходимо рассмотреть, как именно должен быть реализован механизм показа / скрытия меню, чтобы обеспечить доступ к браузерным программам чтения с экрана:
- меню не должны быть скрыты с отображением, видимостью, переполнением или клипом, поскольку это также скрывает их от браузерных экранных ридеров. Правильный подход состоит в том, чтобы использовать абсолютное позиционирование с большим отрицательным левым смещением (так называемое
позиционирование влево
), которое перемещает их за пределы экрана и, следовательно, по-видимому, невидимо для зрячих пользователей, но не удаляет их из визуализированного вывода и, следовательно, не делает влияют на вспомогательные устройства
Наконец, есть подробности о содержании самих меню и тонкостях дизайна, которые облегчают работу пользователя:
- выпадающее меню не является картой сайта; он не должен ссылаться на каждую страницу сайта
- одно меню не должно содержать больше ссылок, чем может поместиться над сгибом, и не должно требовать прокрутки пользователем
- ссылки меню или предпочтительно вся структура меню должны масштабироваться с учетом размера шрифта
- состояние перехода по ссылкам меню должно сохраняться вниз по дереву, чтобы пользователь мог сразу увидеть путь через структуру к тому месту, где он сейчас находится
Прежде чем закончить, я сделаю еще одно замечание о стилях и типах меню. Так называемые мега-меню
не отличаются от того, что мы называем выпадающими меню. У них разный контент и стиль в подменю, и все. Недавняя статья Джейкоба Нилсона на эту тему замутила воду, подразумевая, что этот тип меню по своей природе более удобен и доступен, но это просто не соответствует действительности. Чтобы доказать свою точку зрения, он сравнивает аспекты хороших мега-меню с аспектами плохих обычных выпадающих меню, что не является честным или научным сравнением, потому что он не сравнивает подобное с подобным. Его аргументы не совпадают, если сравнивать с хорошо реализованным выпадающим списком.
В этом коротком посте я надеюсь, что я разъяснил, что нужно для создания меню, которое будет полезным, доступным и построено с учетом принципов прогрессивного улучшения. И чтобы проиллюстрировать, вот две демонстрации, которые иллюстрируют все эти моменты:
Вы также можете скачать оба примера
Между прочим, эти меню прямо из антологии SitePoint JavaScript и полностью документированы в главах 15 и 16, которые, как вы, наверное, догадались, я написал!