Динамические эффекты меню с помощью css без JavaScript
Все динамические эффекты в html базируются на css превдоклассе hover. К сожалению в дубинах IE данный псевдокласс поддерживается только для элемента <A href… , даже в 7 версии. Но несмотря на такую вот гадость - можно все равно создать на сайте красивые менюшки без применения JavaScript.
Итак для того, что бы заставить блок меню реагировать при наведении мыши нужно сделать так:
- Сделать элемент A блочным (display:block)
- Задать элементу высоту (height:25px; line-height:25px;)
- Определить поведение элемента с псевдоклассом :hover - выставить другой цвет фона или даже картинку
Для тех кто любит экстрим можно даже попробовать переопределить свойства элементов, включенных в A, например img, но такой ерундой я заниматься не советую.
Если кото-то интересует почему я сделал элемент блочным, то я поясню, что для inline тега, которым является A нельзя задать высоту, а точнее, высота блока будет равна высоте текста в блоке, а у блочному элементу можно задать высоту большую, чем высота текста в нем. Таким образом у нас получается квадратик с аккуратным текстом внутри, причем вся область квадратика кликабельная.
Особенности фоновой картинки при динамическом ее изменении
Эти особенности вы заметите только на слабом интернете. А суть проста, если у вас на :hover элементе установленна другая картинка на бекграунде, то при наведении курсора мыши в первый раз на данный эелемент картинка будет грузиться с сайта, и на слабом интернет канале будет видна задержка.
Бороться с такой фичей можно следующим образом: задать элементу меню фиксированную высоту (предположим 25px) а картинка на беке будет высотой в 50px причем верхняя часть (первые 25px) картинки будет соответствовать не активному пункту меню, а нижняя - псевдоклассу :hover. А в стилях мы просто меняем положение бекграунда относительно левого верхнего угла элемента (для не активного элемента background-position:0px 0px, a для :hover - background-position:25px 0;) вот и все. Получается мы не грузим заново картинку, а меняем положение уже кешированного бекграунда.
Глюк IE: он есть и сним нужно мириться, потому что ничего другого делать не остается. А глюк состоит в том, что IE (6 версия точно) не кеширует бекграунд и кажный раз при наведении грузит его по сети. Самое обидное то, что он перегружает один и тот же бекграунд даже если вы просто меняете его позицию (background-position).