![]() |
![]() |
![]() |
![]() |
Наверное, вы не раз видели на web-страницах меню, наподобие тех, которые активно используются в программных приложения, когда при наведении курсора мыши на пункт меню, фон этого пункта и цвет надписи меняются. Часто подобного эффекта добиваются с помощью JavaScript. По моему мнению, этот метод является слишком тяжеловесным, к тому же, если броузер клиента не поддерживает JavaScript (или поддерживает) или JavaScript у клиента отключен, то это может обернуться неприятными последствиями. Поэтому для создания меню я рекомендую использовать CSS. Это удобно и намного проще чем JavaScript. Итак, как же все это будет устроено? Каждый пункт меню будет представлять собой обычную гипперссылку, для которой будет определен особый стиль. При наведении на ссылку курсора мыши она будет менять цвет фона и цвет шрифта. Этот эффект будет достигнут с помощью псевдоклассов. Но обо всем по порядку Начнем с определения стиля:
А теперь – обо всем по порядку. Для определения стилей мы используем определенный нами регулярный класс menulink и псевдокласс link (подробнее о регулярных кассах и псевдоклассах можно прочитать в разделе синтаксис). Это значит, что стиль будет применяться только к тем тегам <A>, для которых значение параметра class равно menulink. Сначала мы определим стиль всей ссылки вообще. Мы определяем:
Затем мы определяем: стиль для посещенной ссылки, для активной ссылки и для ссылки, на которую наведен указатель мыши. Если вы внимательно прочитали предыдущую часть, то с разбором этих стилевых правил у вас не должно возникнуть проблем. Стили мы определили, теперь пора писать и само меню. Это делается так:
Здесь тоже все должно быть понятно, кроме, может быть, последней строчки. Вспомните, что когда мы определяли стиль ссылки, мы задали толщину всех сторон рамки, кроме нижней, 1 пиксель. Когда пунты меню идут один под другим, верхняя рамка нижнего становится нижней рамкой верхнего. Но тогда у последней строчки меню не будет нижней рамки. Чтобы ее задать, мы используем встроенный стили. Теперь вы можете проверить это меню. Убедитесь, что этот пример работает верно на броузерах, поддерживающих стили. А на броузерах, не поддерживающих стили, это меню, по крайней мере, не портит вид страницы. |
![]() |
![]() |
![]() |
![]() |