Универсальная схема навигации

Как построить навигацию, если сайт состоит из нескольких страниц, каждая из которых содержит подчиненные страницы?

• начало
• страница1
  • страница11
  • страница12
  • страница13
• страница2
  • страница21
  • страница22
  • страница23
• страница3
  • страница31
  • страница32
  • страница33
• страница4
  • страница41
  • страница42
  • страница43

Двухуровневая навигация

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

Такая технология требует использование скриптов, но, главное, она не слишком хороша: подменю пользователь не видит все время, и ему сложнее понять, где он находится и куда может пойти.

Предлагается следующая навигационная схема:

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

Такая схема хорошо подходит для двухуровневой иерархии.

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

Меню второго уровня располагается на вертикальной полоске слева. Раздел, соответствующий текущей странице, присутствует, но не является ссылкой.

Макет предложенной навигационной схемы можно посмотреть в этом примере.

Универсальная навигация

Представить себе сайт, содержащий только два уровня иерархии, трудно, обычно уровней гораздо больше. Как в этом случае устроить навигацию?

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

Пусть топология сайта имеет такой вид:

• начало
• страница1
  • страница11
  • страница12
    • страница121
    • страница122
    • страница123
  • страница13
• страница2
• страница3
• страница4

Щелчок по ссылке страница12 меняет экран так:

Если теперь щелкнуть по ссылке страница121, то экран примет вид:

Строка:

страница1 > страница12 > страница121

показывает, что сейчас на экране страница121 (эта запись — не ссылка), что верхние иерархические этажи этой страницы: страница12 и страница1, и мы можем напрямую попасть на любой уровень в этой цепочке.

Очень важно в иерархической схеме иметь ориентированный значок типа “>” — он показывает направление движения от корня вглубь иерархии. Заменять этот значок на безликий знак типа “-” не рекомендуется.

Макет предложенной навигационной схемы можно посмотреть в этом примере.

      Иван Сидоров kurs@robotland.pereslavl.ru