Приднестровская поддержка XOOPS
При наведении указателя мыши на кнопку навигационного меню ее вид может изменяться, привлекая к себе внимание. Для реализации такого эффекта в навигации, основанной на применении графики, необходимо использовать два изображения и JavaScript.
Решение
Создать такой привлекательный эффект гораздо проще с помощью CSS, а не графики. Для этого используется селектор псевдокласса :hover, как и при задании стиля для ссылок при наведении на них указателя мыши.
Вернемся к рассмотренному ранее примеру навигационного меню и добавим в таблицу стилей следующее правило:
chapter04/listnav2.css (фрагмент)
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}
На рис. 4.4 показан вид меню при наведении курсора на первый пункт:
Рис. 4.4. Эффект смены визуального оформления пунктов меню, реализованный средствами CSS (DEMO)
Обсуждение
Используемый для создания такого эффекта CSS-код предельно прост. Механизм создания разного визуального оформления ссылок одинаков при работе со ссылками различной сложности. В данном примере реализована смена цвета фона ссылки на цвет левой части рамки, однако в вашем распоряжении имеется огромное количество возможностей для создания интересных навигационных эффектов: например, можно изменить цвет фона, текста и рамки.
В ранних версиях Internet Explorer для перехода по ссылке необходимо было щелкнуть по ее тексту, поскольку ссылка не заполняла весь контейнер (в данном случае – элемент li) целиком. Это означает, что для перехода к определенному разделу пользователь должен щелкнуть по тексту: щелчок по красному фоновому цвету не сработает.
Данную проблему можно решить путем увеличения ширины ссылки средствами CSS (однако такой способ приемлем только для Internet Explorer 6 и ниже).
Здесь представлено необходимое для этого правило стиля:
* html #navigation li a {
width: 100%;
}
Безусловно, в некоторых случаях вполне можно обойтись без таких трюков и оставить все как есть. Мы рассмотрим проблему создания кросс-браузерного кода более подробно в главе 7.
Отправитель | Нити |
---|
9 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 9 далее... |