Приднестровская поддержка XOOPS
При создании навигации исключительно средствами 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;
}
Вот и все! Данный эффект может быть испорчен, если пользователь увеличит размер шрифта, поскольку при этом могут быть видны края скрытых изображений. Не забывайте о возможности возникновения такой ситуации – ее можно предотвратить, оставив больше пустого пространства между изображениями.
Отправитель | Нити |
---|
3 пользователь(ей) активно (3 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 3 далее... |