Оглавление

Реализация смены изображений на панели навигации без использования JavaScript

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

 

Решение
С помощью CSS можно создать эффект смены изображений без сценариев на JavaScript. Данное решение основано на приемах, описанных на WellStyled.com  Ниже представлен необходимый код:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Chapter 4 - Non-JavaScript rollover images</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="images.css" />
</head>
<body>
<ul id="nav">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Форум</a></li>
  <li><a href="#">Галерея</a></li>
  <li><a href="#">Контакты</a></li>
</ul>
</body>
</html>

 

body {
  margin: 0;
  padding: 2em;
  font: 1em Arial, Helvetica, sans-serif;
}

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

#nav a:link, #nav a:visited {
  display: block;
  width: 150px;
  padding: 1px 0 10px 32px;
  font: bold 80% Arial, Helvetica, sans-serif;
  color: #FF9900;
  background: url("peppers.gif") top left no-repeat;
  text-decoration: none;
}

#nav a:hover {
  background-position: 0 -48px;
  color: #B51032;
}

#nav a:active {
  background-position: 0 -96px;
  color: #006E01;
}


Результат обработки данного кода показан на рис. 4.19, однако чтобы увидеть полученный эффект во всей красе, перейдите на страницу примера!

 

Добавление нового эффекта к готовому меню с помощью изображений

Рис. 4.19. Добавление нового эффекта к готовому меню с помощью изображений

 

Обсуждение
Данное решение основано на использовании на панели навигации изображений без необходимости предварительной загрузки множества отдельных файлов.

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

 

Три состояния элемента навигации

Рис. 4.20. Три состояния элемента навигации


Разметка панели навигации представляет собой простой список:

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


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

#nav a:link, #nav a:visited {
  display: block;
  width: 150px;
  padding: 1px 0 10px 32px;
  font: bold 80% Arial, Helvetica, sans-serif;
  color: #FF9900;
  background: url("peppers.gif") top left no-repeat;
  text-decoration: none;
}


При активации состояния :hover фоновое изображение перемещается вверх ровно на столько пикселов, чтобы пользователь увидел рисунок красного значка. В данном примере используется значение 48 пикселов,
которое может меняться в зависимости от используемого вами изображения. Значение можно вычислить или подобрать на практике, каждый раз передвигая фоновое изображение на несколько пикселов до тех пор, пока не будет найдена оптимальная позиция:

#nav a:hover {
  background-position: 0 -48px;
  color: #B51032;
}


При активации состояния :active фоновое изображение передвигается вновь, и на этот раз при щелчке по ссылке мы видим изображение зеленого значка:

#nav a:active {
  background-position: 0 -96px;
  color: #006E01;
}


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

 

Предупреждение
Мелькание в Internet Explorer. При использовании описанного выше приема возможно мелькание элементов навигации в Internet Explorer. По результатам тестирования я пришла к выводу, что такой негативный эффект может возникнуть при использовании изображений большего размера, чем в данном примере. Если вы столкнулись с такой проблемой, то вам поможет подробно описанный способ ее решения
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити