Примеры меню
Примеры этой ветви справочника помогут вам сделать многоуровневую систему навигации сайта.
Во-первых, старайтесь делать главное меню всегда горизонтальным.
Если даже перечень ссылок очень длинный, его можно уменьшить, сгруппировав однородные ссылки в один пункт меню.
Почитать об этом: The Case Against Vertical Navigation.
Меню более низкого уровня делайте также горизонтальным, ниже первого меню. Такая компоновка двух меню наиболее распространена в Интернете, поскольку не требует вертикальной прокрутки окна.
Ярким примером одной из разновидностей такой компоновки, именуемой меню с вкладками (tabs menu) был сайт Amazon.com, пока он не разросся до такой степени, что в горизонтальном виде было уже невозможно уместить все направления деятельности.
Почитать об этом: История навигационной панели Amazon.com, оригинал:
The History of Amazon’s Tab Navigation.
Пример Amazon.com доказывает также то, что делать подряд три горизонтальных меню не нужно, так как это дезориентирует посетителей сайта. Это касается и вертикальных древовидных меню (tree menu). По этой причине все примеры кодов даны только для компактных двойных меню.
Вообще, горизонтальное меню используйте для коротких перечней из неоднородных слов, а вертикальное меню - для длинных перечней с однородными словами.
Рассмотрим схематично все возможные случаи многоуровневой системы навигации.
Дальше продолжать добавлять новые меню, оставляя все меню более высокого уровня, не рекомендуется. Обычно оставляют меню самого верхнего уровня, а также непосредственное родительское меню, а промежуточные меню опускают. Рекомендуется также отображать навигационную цепочку.
Кстати, не забывайте о простом способе организации последнего уровня навигации, вообще не создавая меню. Просто размещайте на странице не одну статью, а все статьи сразу, как в блогах.
Примечания
- Далее во всех примерах коды, как для вертикальных, так и для горизонтальных перечней ссылок сделаны в виде ненумерованных списков (элемент UL). Это сделано в целях поисковой оптимизации (search engine frendly).