На главную Статьи Функции

Ролловер меню без JavaScript




Все мы много раз видели различные по красоте меню на сайте, которые меняют фон при наведении мыши или цвет шрифта и тому подобное. Такие меню очень легко делать без использования JavaScript. Достаточно вспомнить о псевдостилях гиперссылок.
Итак, стиль ссылки в CSS можно задать так:
a  {
font-size:14px;
font-weight:li normal;
color:#FFFFFF;
}
Вид ссылки при наведении мыши задается как:
a:hover {
font-size:12px;
font-weight:boldl;
color:#CCCCCC;
}
Ну и выглядеть будет такая ссылко как-то так:Ссылка

Во многих случаях этого достаточно, однако иногда возникает потребность сделать ссылки более красивыми, например с фоновым рисунком. Мы знаем что есть свойство блочных элементов background-image, с помощью которого задается фоновое изображение. Все что нам осталось сделать, это сделать ссылку блочным элементом при помощи свойства display.
Теперь добавляем свойства background-image и display к ссылке:

a {
display:block;
background-image: url(ПУТЬ_К_ИЗОБРАЖЕНИЮ);
background-repeat: repeat-x;
height:40px;
padding:20px 10px 0 10px;
}
a:hover {
display:block;
background-image: url(ПУТЬ_К_ДРУГОМУ_ИЗОБРАЖЕНИЮ);
background-repeat: repeat-x;
height:40px;
padding:20px 10px 0 10px;
}
Ссылка Ну вот как-то так, дальше все зависит от вашей фантазии. Ну и не забудьте, что если вы хотите разместить несколько ссылок в строку нужно воспользоваться CSS свойством float.



© 2010-2019 При использовании материалов ссылка на сайт www.webchaynik.ru обязательна

обратная связь