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

Решение
Поскольку карта сайта является списком доступных разделов вашего сайта, ее лучше всего разметить как набор вложенных списков. Пунктами основного списка станут основные навигационные разделы; каждый из пунктов будет содержать подпункты – навигацию второго уровня. Такой метод подойдет и для сайтов с многоуровневой системой навигации; благодаря такой разметке новые пункты будет легко создавать с помощью системы управления контентом. На рис. 4.21 отображается результат обработки следующего кода:

<ul id="sitemap">
  <li><a href="#">Главная</a>
  <ul>
    <li><a href="/about/team">Пользователи</a></li>
    <li><a href="#">Профиль</a></li>
  </ul>
  </li>

  <li><a href="#">Новости</a>
  <ul>
    <li><a href="#">Новости XOOPS</a></li>
    <li><a href="#">Новинки</a></li>
    <li><a href="#">На этой неделе</a></li>
  </ul>
  </li>
    <li><a href="#">Форум</a>
  <ul>
    <li><a href="#">Недавние темы</a></li>
    <li><a href="#">Непрочитанные</a></li>
  </ul>
  </li>
    <li><a href="#">Галерея</a></li>
  <li><a href="#">Контакты</a></li>
</ul>

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

ul#sitemap ul {
  padding-left: 1em;
  list-style: none;
}

ul#sitemap li {
  border-bottom: 2px solid #FFFFFF;
}

ul#sitemap li a:link, ul#sitemap li a:visited{
  background-color: #CCCCCC;
  display: block;
  padding: 0.4em;
  text-decoration: none;
  color: #057FAC;
}

ul#sitemap li a:hover {
  background-color: #999999;
  color: #FFFFFF;
}

ul#sitemap li li a:link, ul#sitemap li li a:visited{
  background-color: #FFFFFF;
  display: block;
  padding: 0.4em;
}

ul#sitemap li li a:hover {
  background-color: #FFFFFF;
  color: #057FAC;
}

Рис. 4.21. Оформленная с помощью CSS карта сайта

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

Будьте внимательны при работе со вложенными списками. Вложенный список необходимо разместить перед закрывающим тегом </li> родительского списка. Без применения таблицы стилей карта сайта будет выглядеть, как на рис. 4.22. Теперь создаем стили для родительского списка и вложенных списков. Для первого списка я убрала внутренние и внешние отступы, а для вложенных списков добавила отступ слева размером в 1em, чтобы сразу было видно, что они представляют собой следующий уровень навигации:

Рис. 4.22. Вид карты сайта без использования CSS

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

ul#sitemap ul {
  padding-left: 1em;
  list-style: none;
}

Теперь следует создать отличительный стиль пунктов основного списка, чтобы подчеркнуть, что они представляют основные разделы сайта. Как и при оформлении навигации, я задаю стиль элементу, присвоив значение block свойству display, чтобы пользователь для перехода по ссылке мог щелкнуть по всей занимаемой элементом области, а не только по самому тексту:

ul#sitemap li {
  border-bottom: 2px solid #FFFFFF;
}

ul#sitemap li a:link, ul#sitemap li a:visited{
  background-color: #CCCCCC;
  display: block;
  padding: 0.4em;
  text-decoration: none;
  color: #057FAC;
}

ul#sitemap li a:hover {
  background-color: #999999;
  color: #FFFFFF;
}

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

ul#sitemap li li a:link, ul#sitemap li li a:visited{
  background-color: #FFFFFF;
  display: block;
  padding: 0.4em;
}

ul#sitemap li li a:hover {
  background-color: #FFFFFF;
  color: #057FAC;
}

Вот мы и написали таблицу стилей для оформления карты сайта. На основе представленных приемов вы вполне сможете создать свои собственные стили.