- •23. Создание страниц с навигационными меню
- •Введение
- •Инструменты создания меню в html — ссылки, анкеры и списки
- •Требование гибкости
- •Различные типы меню
- •Навигация по странице (оглавление)
- •Навигация по сайту
- •Контекстные меню
- •Нумерация страниц
- •Когда списков недостаточно — карты ссылок и формы
- •Задание горячих точек картами ссылок
- •Сохранение экранного пространства и предотвращение перегруженности ссылками с помощью форм
- •Где разместить меню
- •Заключение
- •Контрольные вопросы
- •Об авторе
Навигация по сайту
Навигация по сайту является, вероятно, наиболее распространенным типом меню, которое требуется создавать. Это меню для всего сайта (или его подмножества), показывающее как варианты перехода, которые может выбирать посетитель, так и иерархию сайта. Списки прекрасно подходят для этого, как вы видите в примере навигации по сайту.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example of site navigation</title>
</head>
<body>
<h1>Home</h1>
<ul id="mainmenu">
<li><strong>Home</strong></li>
<li><a href="about.html">About Us</a></li>
<li><a href="clients.html">Our Clients</a></li>
<li><a href="products.html">Our Products</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</body>
</html>
Здесь не слишком много сюрпризов, по крайней мере, с точки зрения чистого HTML. Позже в курсе мы поговорим о задании стилей меню такого рода с помощью CSS и добавлении поведения с помощью JavaScript. Необходимо рассмотреть одну важную вещь, как выделить текущий документ в меню, чтобы создать у пользователя ощущение присутствия в определенном месте, и что он меняет свое местоположение (даже хотя в реальности это и не так, за исключением, конечно, случая использования мобильных устройств для просмотра Web!). Именно это мы и рассмотрим далее.
Создание у посетителей чувства "присутствия в определенном месте"
Одно из золотых правил разработки и навигации в Web состоит в том, что текущий документ никогда не должен ссылаться на себя самого, но, наоборот, должен явно отличаться от других записей в меню. Это важно, так как дает посетителям точку опоры и говорит им, где они находятся в своем путешествии по сайту. Существуют крайние случаи, такие как Web-приложения, permalinks в блогах, и так называемые "одностраничные" Web-сайты, но в 99% случаев ссылка на документ, на который вы уже смотрите, является избыточной и путающей посетителя.
В руководстве по ссылкам я утверждал, что ссылка является соглашением и обязательством: вы предлагаете посетителям способ получить дополнительную информацию, которая им нужна, но нужно быть осторожным - вы потеряете авторитет и доверие, если эта ссылка не предоставляет пользователям то, что они хотят получить, и/или приводит к неожиданному поведению. Если вы предлагаете, например, ссылку, которая указывает на текущий документ, активация ее приведет к перезагрузке документа. Как пользователь, вы этого не ожидаете - какой смысл щелкать на этой ссылке? Возникает только дополнительная путаница.
Это является причиной, почему текущая страница никогда не должна присутствовать в меню ссылок. Можно удалить ее вообще, или еще лучше деактивировать ее как ссылку, но выделить (например, с помощью элемента strong) - это предоставит пользователям визуальную подсказку и сообщит также слепым посетителям, что это важно - этот пример с выделением текущей страницы показан ниже.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example of site navigation</title>
</head>
<body>
<h1>About Us</h1>
<ul id="mainmenu">
<li><a href="home.html">Home</a></li>
<li><strong>About Us</strong></li>
<li><a href="clients.html">Our Clients</a></li>
<li><a href="products.html">Our Products</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</body>
</html>
Сколько возможностей предоставлять пользователям единовременно?
Другой вопрос для рассмотрения, сколько возможностей вы хотите предоставить посетителям. Многие меню, которые встречаются в Web, пытаются сделать каждую страницу сайта доступной из одного единственного меню. Здесь на помощь приходят сценарии и приемы использования CSS - можно сделать меню более управляемым, скрывая части меню, пока пользователь не выберет определенную область (разворачивающиеся меню, как их иногда называют). Это хорошо придумано с технической точки зрения, но при таком подходе возникает несколько проблем:
Не все посетители смогут использовать эту возможность как предполагается; пользователи клавиатуры, например, будут вынуждены перемещаться по всем ссылкам на странице с помощью клавиши Tab, только чтобы добраться до требуемой ссылки.
Потребуется добавлять много кода HTML в каждый документ сайта, чтобы это реализовать, и большая часть его будет избыточна на многих страницах. Если я спустился на три уровня в меню, чтобы добраться до документа, который хочу прочитать, я не должен видеть варианты, ведущие на 4, 5, и 6 уровни глубины.
Можно запутать посетителей, если предоставить им сразу слишком много возможностей - люди не любят принимать решения. Представьте себе, сколько может потребоваться времени, чтобы выбрать блюдо из длинного меню ресторана.
Если на странице имеется не слишком много контента, но много ссылок, поисковые системы будут предполагать, что на этой странице находится не слишком много действительной информации, и не будут уделять странице много внимания, поэтому ее будет трудно найти при поиске в Web.
В конце концов, вам решать, сколько пунктов поместить в меню - различные проекты будут требовать различных вариантов - но если сомневаетесь, необходимо попробовать сократить меню до ссылок только на основные разделы сайта. Всегда можно будет добавить дополнительные подменю, где потребуется.