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

Когда речь идет о создании удобной системы навигации, возможности CSS предстают во всей своей красе. Применяемые ранее методы были основаны, как правило, на использовании большого количества изо- бражений, вложенных таблиц и сценариев на JavaScript. Безусловно, это оказывало негативное влияние на юзабилити и доступность сай- тов. Если по сайту нельзя перемещаться при использовании устройств, не поддерживающих JavaScript, то вы рискуете потерять часть пользо- вательской аудитории, отключившей JavaScript, и тех, кто пользует- ся устройствами, воспринимающими исключительно текст (например, экранными дикторами). Не стоит забывать и о роботах поисковых си- стем, которые в такой ситуации не смогут пройти дальше главной стра- ницы сайта. Если ваших клиентов не беспокоят вопросы доступности, объясните им, что с такими неуклюжими меню они рискуют опустить- ся в самый низ списка в рейтинге поисковых систем!

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

Оформление списка

в виде навигационного меню

По сути, меню навигации представляет собой список разделов сайта, поэтому имеет смысл разметить его именно в виде списка, а затем при- менить стили CSS по отношению к его элементам. Однако визуально он должен отличаться от стандартного маркированного списка, который выводится на экран при использовании внутренней таблицы стилей броузера.

Решение

Меню навигации, представленное на рис. 4.1, является списком, оформ- ленным с помощью CSS.

Рис. 4.1. Создание навигации путем написания правил стилей для списка

Ниже представлена разметка, необходимая для создания списка:

chapter04/listnav1.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<head>

<title>Lists as navigation</title>

charset=utf-8” />

</head>

<body>

<ul>

<li><a href=”#”>Recipes</a></li>

<li><a href=”#”>Contact Us</a></li>

<li><a href=”#”>Articles</a></li>

<li><a href=”#”>Buy Online</a></li>

</ul>

</div>

</body>

</html>

Далее представлен полный CSS-код, преображающий незамысловатый маркированный список в привлекательное меню навигации:

chapter04/listnav1.css

#navigation {

width: 200px;

}

#navigation ul { list-style: none; margin: 0; padding: 0;

}

#navigation li {

border-bottom: 1px solid #ED9F9F;

}

#navigation li a:link, #navigation li a:visited {

font-size: 90%;

display: block;

padding: 0.4em 0 0.4em 0.5em; border-left: 12px solid #711515; border-right: 1px solid #711515; background-color: #B51032;

color: #FFFFFF;

text-decoration: none;

}

Обсуждение

Для создания панели навигации на основе маркированного списка не- обходимо прежде всего создать сам список, разместив ссылки внутри элементов li:

chapter04/listnav1.html (фрагмент)

<ul>

<li><a href=”#”>Recipes</a></li>

<li><a href=”#”>Contact Us</a></li>

<li><a href=”#”>Articles</a></li>

<li><a href=”#”>Buy Online</a></li>

</ul>

Затем разместим список внутри элемента div с соответствующим ID:

chapter04/listnav1.html (фрагмент)

<ul>

<li><a href=”#”>Recipes</a></li>

<li><a href=”#”>Contact Us</a></li>

<li><a href=”#”>Articles</a></li>

<li><a href=”#”>Buy Online</a></li>

</ul>

</div>

Как видно на рис. 4.2, при применении внутренней таблицы стилей, используемой броузером по умолчанию, такая разметка выглядит до- вольно обычно.

Рис. 4.2. Первоначальный вид списка (стилевое оформление отсутствует)

Оформление списка лучше начать с написания правил стилей для кон- тейнера, в котором размещается сам список, – в данном случае с иден- тификатором navigation:

chapter04/listnav1.css (фрагмент)

#navigation {

width: 200px;

}

Данное правило задает ширину контейнера. Если бы он являлся ча- стью сверстанного на CSS макета, то, скорее всего, нужно было бы доба- вить в него информацию о позиционировании.

Затем займемся написанием правил стилей для списка:

chapter04/listnav1.css (фрагмент)

#navigation ul { list-style: none; margin: 0; padding: 0;

}

Как видно на рис. 4.3, вышеприведенное правило удаляет маркеры спи- ска и убирает внешние отступы, создаваемые броузером вокруг списка по умолчанию.

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

Теперь настало время создать стиль для дочерних элементов li блока

navigation, добавив для них нижнюю рамку:

chapter04/listnav1.css (фрагмент)

#navigation li {

border-bottom: 1px solid #ED9F9F;

}

Наконец, зададим стиль для самой ссылки:

chapter04/listnav1.css (фрагмент)

#navigation li a:link, #navigation li a:visited {

font-size: 90%;

display: block;

padding: 0.4em 0 0.4em 0.5em; border-left: 12px solid #711515; border-right: 1px solid #711515; background-color: #B51032;

color: #FFFFFF;

text-decoration: none;

}

Большинство изменений вносятся именно с помощью указанных выше правил CSS, задающих стиль рамки справа и слева, удаляющих под- черкивание и т. д. Первое описание присваивает значение block свойству display, благодаря чему ссылка отображается как блочный элемент. Это означает, что при наведении указателя мыши на любое место навигаци- онной «кнопки» она будет активирована. Аналогичного эффекта можно было бы достичь путем использования изображения в качестве ссылки.

Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.

Популярное

Категории

Навигация

Похожие посты:

Комментировать Cancel reply