Всем доброго времени суток, хотелось бы анимировать фон меню, чтобы при наведении курсора на пункт меню плавно появлялся фон у этого пункта по средствам css и js (примерно
как тут), а как это реализовать - я незнаю. Был был очень признателен за помощь
ибо в js я полный zero
Код меню:
|
Код:
|
<div class="navigation">
<a href="#" class="first"><span class="with-subtitle">Главная<div class="subtitle">Главная страница</div></span></a>
<a href="#"><span class="with-subtitle">Ваш пункт<div class="subtitle">Описание пункта</div></span></a>
<a href="#"><span class="with-subtitle">Ваш пункт<div class="subtitle">Описание пункта</div></span></a>
<a href="#"><span>Ваш пункт</span></a>
<a href="#"><span>Ваш пункт</span></a>
<a href="#"><span>Ваш пункт</span></a></div> |
и css стили
|
Код:
|
div.navigation {margin-left:30px;}
div.navigation a {display: block;float: left;font-family: Arial, Helvetica, sans-serif;font-size: 15px;color: #717475;text-transform: uppercase;text-decoration: none;background:none;text-shadow: #FFFFFF 0px 1px 0px;padding-right: 12px;outline: none;margin-top:4px;}
div.navigation a span {display: block;line-height: 13px;background: none;padding: 14px 0 15px 12px;}
div.navigation a:link {color: #717475;}
div.navigation a:visited {color: #717475;}
div.navigation a:active {color: #000000;}
div.navigation a:hover {background: url(button_r.png) no-repeat top right;color: #9D50CA;}
div.navigation a:hover span {background: url(button_l.png) no-repeat;}
div.navigation a.first {color: #9D50CA;}
div.navigation a span.with-subtitle {padding: 10px 0 6px 12px;}
div.navigation a span.with-subtitle div.subtitle {font-size: 9px;text-transform:none;} |
и маленькое пояснения для тех кто не хочет полностью изучать код
)) пункты меня состоят из 2 фоновых изображений, одно подключено к тегу <a> а второе к <span>