В JavaScripte есть такие функции, как onMouseClick или onMouseDown и их часто применяют для того, что бы при клике на какой-нибудь элемент с ним происходили различные метаморфозы. Например, при нажатии на ссылку изменялось фоновое изображение. Но что делать, если у пользователя отключен JavaScript?
Я предлагаю решать этот вопрос с помощью CSS. Ведь в у нас есть все необходимое для решения этой задачи.
Итак, создадим обыкновенный неупорядоченный список:
<ul> <li><a>Item</a></li> <li><a>Item</a></li> <li><a>Item</a></li> <li><a>Item</a></li> </ul>
Ну и обстилим его:
ul {
list-style: none;
}
ul li {
display: inline;
margin: 0;
padding: 0;
}
ul li a {
float: left;
display: block;
width: 81px;
height: 26px;
color: #333;
text-align: center;
background-image: url(NavigationBackground.png);
background-repeat: none;
background-position: 0 0;
}
ul li a:hover {
background-position: 0 -26px;
color: #cccccc;
}
ul li a:active {
background-position: 0 -52px;
color: #cccccc;
}
Тут, вполне будет законным вопросом: а где изображение для состояния :hover и :active?
Я решил схитрить и сдвигать изображение вниз по мере необходимости. Вот само изображение:
Пример использования.
Скачать пример
Случайные посты:
