Красивое меню при наведении на ссылку красивое заливание подробности на демо
В CSS:
Code
a.men:link {text-decoration:none; color: #e3e4ff; font-family: "Arial Black"; font-size: 10pt}
a.men:active {text-decoration:none; color: #e3e4ff; font-family: "Arial Black"; font-size: 10pt}
a.men:visited {text-decoration:none; color: #e3e4ff; font-family: "Arial Black"; font-size: 10pt}
a.men:hover {text-decoration:none; color: white; font-family: "Arial Black"; font-size: 10pt}
В Верх. часть сайта:
Code
<style type="text/css">
<style type="text/css">
h2 {clear:both;padding-top:20px;}
ul {list-style:none;margin:0;padding:0;}
li#menu{float:left;width:88px;margin:0;padding:0;text-align:center;}
li
a {display:block;padding:5px
10px;height:100%;color:#3a3839;text-decoration:none;border-right:1px
solid #3a3839;border-left:1px solid #3a3839;}
#a a {background:url(http://ucoz-helps.ru/uh-menu.jpg) repeat -20px 35px;}
</style>
</style>
<script type="text/javascript" src="http://ucoz-helps.ru/jquery.bgpos.js"></script>
<script type="text/javascript">
$(function(){
$('#a a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
$('#b a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
$('#c a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
$('#d a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});
</script>
По месту вывода меню:
Code
<ul id="a">
<li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>
<li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>
<li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>
<li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>
<li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>
<li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>
<li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>
<li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>
</ul>
Источник:ucoz-helps.ru