Навигационное меню полностью на CSS

Наконец-то разрешилась известная и очень назойливая проблема, которая не позволяла использовать картинки в свойстве hover должным образом. Из-за Internet Explorer это CSS-свойство сильно ограниченно, но всё-таки нашлось замечательное применение этого свойства к интерфейсу навигации на сайтах с использованием так называемых закладок (CSS tabs).

Вы наверно не раз замечали, когда на каком-либо сайте одна картинка заменятся другой при наведении на неё курсором мыши. Этот метод часто используется в навигации (меню) веб-сайтов. Все картинки необходимо загрузить ещё в самом начале (image preload), вместе с загрузкой страницы сайта. В таких случаях часто используют JavaScript. Необходимые картинки сохраняются в кешэ (cache) браузера. Цель этого процесса — мгновенная смена изображения, чтобы в момент наведения курсора мыши посетитель сайта не ждал пока картинка загрузится с сервера.

Современные браузеры, поддерживающие спецификации W3C, позволяют применять свойство :hover к любому элементу. Проклятый Internet Explorer делает это возможным только для элементов ссылок — a:hover (Свойство :hover для любого CSS элемента).

Уже придумано много способов реализации доступного и семантически правильного навигационного меню на основе закладок, полностью на CSS. Например “Раздвижные двери CSS” (часть I и часть II).

Вскоре после адаптации этого метода эксперименты продолжились. Возникла идея сделать эффект hover на CSS используя картинки, тем самым делая навигацию на сайтах более привлекательной, и при этом не использовать JavaScript. Первым в плотную к этому приблизился Petr Stanicek (Fast Rollovers Without Preload). Оказалось, что возможно использовать только одну картинку для всех состояний (normal, hover, active, visited и т.д.).

Простейший пример использования одной картинки:

#example a {
height: 25px;
width: 175px;
background: url("image.gif") 0 0 no-repeat;
}
#example a:hover {
background-position: 0 -25px;
}

Используется всего одна картинка, а значить подгружать с сервера ничего не надо. Невидимая часть картинки поднимается вверх на 25 пикселей. В обычном состоянии видна верхняя часть, а уже при наведении курсора мыши становится видна нижняя часть картинки.

Рабочий пример навигации на CSS (XHTML и CSS в исходнике).

Mozilla, Opera, Safari, IE5 и IE5.5 без проблем справляются с этой задачей, но только не IE6. Этот браузер всё равно продолжает каждый раз подгружать картинку с сервера, создавая эффект мерцания.

К счастью, один из многочисленных недостатков Internet Explorer был исправлен благодаря Apache и человеку по имени Дин Эдвардс (Dean Edwards). В файле httpd.conf или в .htaccess нужно прописать следующие строки:

ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000

Эти строки говорят браузеру держать в кэше нужные типы файлов (например gif, jpeg и png) 30 дней, то есть 2592000 секунд. Вы можете изменять эти настройки взависимости от потребностей.