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

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

    <ul id="nav">
      <li class="home"><a href="#"><span>Главная</span></a></li>
      <li class="news"><a href="#"><span>Новости</span></a></li>
      <li class="forum"><a href="#"><span>Форум</span></a></li>
      <li class="gallery"><a href="#"><span>Галерея</span></a></li>
      <li class="contact"><a href="#"><span>Контакты</span></a></li>
    </ul>

ul#nav {
  width: 420px;
  height: 30px;
  overflow:hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul#nav li {
  float: left;
}
ul#nav li a span {
  margin-left: -5000px;
}
ul#nav li a {
  display: block;
  background-image: url(reflectonav.gif);
  background-repeat: no-repeat;
  width: 75px;
  overflow:hidden; 
}
ul#nav li.home a {
  background-position: 0 0;
}
ul#nav li.home a:hover {
  background-position: 0 -40px;
}
ul#nav li.news a {
  background-position: -83px 0;
  width: 83px;
}
ul#nav li.news a:hover {
  background-position: -83px -40px;
}
ul#nav li.forum a {
  background-position: -172px 0;
  width: 63px;
}
ul#nav li.forum a:hover {
  background-position: -172px -40px;
}
ul#nav li.gallery a {
  background-position: -243px 0;
  width: 75px;
}
ul#nav li.gallery a:hover {
  background-position: -243px -40px;
}
ul#nav li.contact a {
  background-position: -325px 0;
  width: 90px;
}
ul#nav li.contact a:hover {
  background-position: -325px -40px;
}

Рис. 4.23. Конечный вид панели навигации (DEMO)

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

    <ul id="nav">
      <li class="home"><a href="#"><span>Главная</span></a></li>
      <li class="news"><a href="#"><span>Новости</span></a></li>
      <li class="forum"><a href="#"><span>Форум</span></a></li>
      <li class="gallery"><a href="#"><span>Галерея</span></a></li>
      <li class="contact"><a href="#"><span>Контакты</span></a></li>
    </ul>

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

Рис. 4.24. Фоновое изображение, используемое в данном примере

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

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

ul#nav {
  width: 420px;
  height: 30px;
  overflow:hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul#nav li {
  float: left;
}

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

ul#nav li a span {
  margin-left: -5000px;
}

Далее заменим текст фоновым изображением. Создадим для элемента a правило, в котором свойству display задано значение block, чтобы он занял всю отведенную для li область, а затем добавим фоновое изображение:

ul#nav li a {
  display: block;
  background-image: url(reflectonav.gif);
  background-repeat: no-repeat;
  width: 75px;
  overflow:hidden; 
}

При просмотре полученного на данный момент результата в браузере вы увидите четырехкратное повторение пункта ГЛАВНАЯ. Дело в том, что мы задали для каждого пункта списка фоновое изображение, располагающееся в его верхней части, как показано на рис. 4.25.

Рис. 4.25. Вид навигации после добавления фонового изображения

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

ul#nav li.home a {
  background-position: 0 0;
}  
ul#nav li.news a {
  background-position: -83px 0;
  width: 83px;
}  
ul#nav li.forum a {
  background-position: -172px 0;
  width: 63px;
}  
ul#nav li.gallery a {
  background-position: -243px 0;
  width: 75px;
}  
ul#nav li.contact a {
  background-position: -325px 0;
  width: 90px;
}
  

Рис. 4.26. Вид навигации после определения позиции фонового изображения

Осталось только добавить стиль для задания вида пункта списка при наведении на него указателя мыши. Это можно сделать таким же способом, как и в предыдущем примере со сменой изображений. С помощью CSS можно передвигать фоновое изображение, чтобы нужная область появилась в поле зрения:

ul#nav li.home a:hover {
  background-position: 0 -40px;
}  
ul#nav li.news a:hover {
  background-position: -83px -40px;
}  
ul#nav li.forum a:hover {
  background-position: -172px -40px;
}  
ul#nav li.gallery a:hover {
  background-position: -243px -40px;
}  
ul#nav li.contact a:hover {
  background-position: -325px -40px;
}