umade.ru

Навигационное меню полностью на 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 секунд. Вы можете изменять эти настройки взависимости от потребностей.

Всего оставлено 10 комментариев

  1. YouS 29 ноября 2004

    Никита а зачем делать такой грамосткий код в CSS’e , есле можно воспользоваться JAVA (onMouseOver, onMouseOut)…

  2. Никита 29 ноября 2004

    Чтобы избавиться от JavaScript и сделать код html страницы более ‘чистым’

  3. YouS 30 ноября 2004

    Ну этот код же совсем маленький.. занимает всего символов 100 и того меньше… а так ты нагружаешь CSS файл… какой смысл убрать в одном месте и запихнуть в другое??? :) )

  4. Никита 18 декабря 2004

    Уже давно признано считать списки (ul) для навигации наиболее компактным, доступным для текстовых браузеров, PDA, телефонов…

    CSS имеет возможность манипулировать этими списками, и, как видишь, совсем неплохо.

  5. игорь 9 октября 2005

    отличная идея :) спасибо

  6. Neoline 18 октября 2006

    Идея клевая, а то менюхи на JS достали.
    Буду переписывать свою менюшку :)

  7. Эгоист 4 марта 2008

    Спасибо ,интересная статья.
    А почему у вас на сайте так часто используются заглавные буквы вместо строчных?

  8. SiteDiz 20 мая 2008

    ДА, согласен. Жаба скрипт достал немного..! CSS rulez !!!

  9. fred perry 19 июня 2008

    Спасибо давно хотел найти что то подобное и впервую очередь из за поисковой оптимизации

  10. Ксения 17 ноября 2008

    Идея клевая, а то менюхи на JS достали.

Поиск по сайту

Из последнего

Архив статей и записей