Добрый день.

После непродолжительного творческого отпуска снова продолжается работа над сайтом htmlbook.ru.

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

Свои вопросы и темы статей отправляйте на адрес vlad@htmlbook.ru

Виды навигации и меню

Под навигацией понимают систему перехода между документами сайта. Другими словами, навигация дает пользователю представление о структуре сайта и возможность перемещаться к нужной странице. Термин «навигация» давно уже стал объемным понятием и включает в себя не только способ перехода от страницы к странице, но также вид и представление ссылок. По этой причине к навигации относят элементы страницы, которые имеют к навигации косвенное отношение, например, меню. Тем не менее, это уже связанные понятия и подразумевая навигацию по сайту, обычно упоминают и меню, с помощью которого пользователь загружает в окно браузера требуемые веб-страницы.

В зависимости от типа сайта различают несколько видов навигации, которые рассмотрены далее.

«Хлебные крошки»

Все вы, наверняка, помните сказку про Мальчика-с-пальчик, сумевшего найти обратную дорогу домой по хлебным крошкам, которые предварительно разбросал. Только не надо говорить, что хлеб съели птицы, если бы это было так, мы никогда бы не узнали про этот простой и понятный способ навигации. «Хлебные крошки» представляют собой последовательность иерархически вложенных страниц. Например, у нас есть дуб, на котором висит сундук, в сундуке — утка, в утке жираф, а в жирафе — утюг. Тогда схема вложенности будет такая.

Дуб > Сундук > Утка > Жираф > Утюг

Если применить ее к сайту, то получим более привычную модель.

Главная страница > Дуб > Сундук > Утка > Жираф > Утюг

Каждая надпись, кроме последней, служит ссылкой на тот раздел или страницу, где идет описание предмета. «Главная страница», понятно, ведет к началу сайта. Последняя фраза в ряду крошек показывает, что вы находитесь на этой текущей странице, поэтому ссылка в данном случае не нужна.

Преимущества использования «крошек»

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

Несколько замечаний касательно оформления «крошек».

• В качестве разделителей лучше использовать символ больше (>), слэш (\) или обратный слэш (/). Символ вертикальная черта (|) в данном случае не годится, он плохо показывает вложенность пунктов.
• Начинать желательно всегда с главной страницы, чтобы показать начало сайта.
• Блок с «крошками» желательно размещать в верхней части страницы.
• Последний пункт должен совпадать с названием текущей страницы, при этом он не должен быть ссылкой. Если такой текст сделать жирным, то он будет выделяться на фоне остальных пунктов. В некоторых случаях такой необходимости нет, поэтому текст без ссылки оставляем обычного начертания.