Установка:
Javascript, вставляем между и
Code
<script type="text/javascript">
$(document).ready(function() {
$('#nav a')
.css( {backgroundPosition: "6px 6px"} )
.mouseover(function(){
$(this).stop()
.animate(
{backgroundPosition:"(-25px 6px)"},
{duration:200})
.animate(
{backgroundPosition:"(-25px -23px)"},
{duration:5})
.animate(
{backgroundPosition:"(6px -23px)"},
{duration:200})
})
.mouseout(function(){
$(this).stop()
.animate(
{backgroundPosition:"(-25px -23px)"},
{duration:200})
.animate(
{backgroundPosition:"(-25px 6px)"},
{duration:5})
.animate(
{backgroundPosition:"(6px 6px)"},
{duration:200})
})
});
</script>
Это в CSS:
Code
ul#nav {
border-top: 1px solid #dfdfdf;
}
ul#nav li {
display: inline;
}
ul#nav li a {
display: block;
padding: 5px 10px 5px 27px;
color: #556565;
text-decoration: none;
border-bottom: 1px solid #dfdfdf;
background: url(http://3aka4ka.net.ru/img/other/sliding-menu/nav-bg.gif) no-repeat 6px 6px;
}
ul#nav li a:hover {
color: #2b5f1a;
background-color: #e5f3d7;
}
HTML код меню, вставляем там где хотим видеть меню:
Code
<ul id="nav">
<li><a href="http://life.on-portal.ru/">Life</a></li>
<li><a href="http://life.on-portal.ru/forum/36">Скрипты для uCoz</a></li>
<li><a href="http://life.on-portal.ru/load/vse_dlja_ucoz/1">Шаблоны для uCoz</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
Источник скрипта:http://www.dvq.co.nz/web-design/create-a-sliding-menu-background-with-jquery/
