Анимированное меню для сайта uCoz

<div id="menu"> <ul id="nav"> <li> <a href="ВАША ССЫЛКА" class="icon1"> <span>Главная</span> </a> </li> <li> <a href="ВАША ССЫЛКА" class="icon2"> <span>Портфолио</span> </a> </li> <li> <a href="ВАША ССЫЛКА" class="icon3"> <span>Мой блог</span> </a> </li> <li> <a href="ВАША ССЫЛКА" class="icon4"> <span>Сервис</span> </a> </li> </ul> </div>

/*======== Horizontal menu =========*/ #menu { width: 100%; background: #a7cfdf; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #a7cfdf 0%, #23538a 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); /* IE10+ */ background: radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ position: relative; margin-top: 100px; border-top: 4px solid #eee; border-bottom: 4px solid #FFF; overflow: hidden; } #nav { z-index: 99999; margin:0; padding:0; } #nav li a,#nav li { float:left; } #nav li { list-style:none; position:relative; } #nav li a { padding: 0 10px; width: 130px; height: 102px; text-decoration:none; margin:0; font-size:12px; font-weight:400; text-transform:uppercase; text-align: center; color:#FFF; } #nav li a.icon1 { background: url(http://clipak.ucoz.ru/skripty/newskryptis/11.png) no-repeat center 0; } #nav li a.icon2 { background: url(http://clipak.ucoz.ru/skripty/newskryptis/22.png) no-repeat center 0; } #nav li a.icon3 { background: url(http://clipak.ucoz.ru/skripty/newskryptis/33.png) no-repeat center 0; } #nav li a.icon4 { background: url(http://clipak.ucoz.ru/skripty/newskryptis/44.png) no-repeat center 0; } #nav li a span{ position: absolute; top: 70px; left:0; right: 0; font-size: 17px; color:#cfcfcf; } #nav li a:hover span{ color:#fff; } /*======== Horizontal menu =========*/

<script type="text/javascript" src="http://mega.ucoz.ua/demo/menuSurprise/js/jquery.backgroundPosition.js"></script> <script type="text/javascript" src="http://mega.ucoz.ua/demo/menuSurprise/js/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function(){ $('#nav li a') .css( {backgroundPosition: "52px -240px"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(52px 10px)"}, {duration:1500, easing : 'easeOutElastic'}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(52px -240px)"}, {duration:500, easing : 'easeOutCubic', complete:function(){ $(this).css({backgroundPosition: "52px -240px"}) }}) }) }); </script>