Красивое горизонтальное меню на jQuery для uCoz

  



Code
<title>Real Menu</title>  
  <script type="text/javascript" src="http://s101.ucoz.net/src/u.js"></script>  
  <script>  
  jQuery(function(){  
  $('.menu td').append('<div align="center"><img src="http://joomla.ucoz.com/icons-shadow.png"></div>')  
  $('.menu td').hover(function(){  
  $(this).find('a').stop().animate({top:'-30'},300);  
  $(this).find('a').animate({top:'-20'},300)  
  $(this).find('img').stop().animate({opacity:'.3',height:'25px'},300)  
  $(this).find('span').stop().animate({opacity:'.7',bottom:'15px'},300)  
  },  
  function(){  
  $(this).find('a').stop().animate({top:'10',}, 300);  
  $(this).find('span').stop().animate({opacity:'0.0',bottom:'20px'}, 300)  
  $(this).find('img').stop().animate({opacity:'1.0',height:'30px'}, 300)  
  });  
  });  
  </script>  
  <style>  
  body{margin:0}  
  .menu td{width:110px;height:200px;text-align:center;}  
  .menu a{display:block;width:90px;height:90px;position:relative;left:10px;top:10}  
  #home{background:url(http://joomla.ucoz.com/home.png)no-repeat center;}  
  #blog{background:url(http://joomla.ucoz.com/blog.png)no-repeat center;}  
  #load{background:url(http://joomla.ucoz.com/load.png)no-repeat center;}  
  #forum{background:url(http://joomla.ucoz.com/img.png)no-repeat center;}  
  #img{background:url(http://joomla.ucoz.com/forum.png)no-repeat center;}  
  #rss{background:url(http://joomla.ucoz.com/rss.png)no-repeat center;}  
  .menu span{opacity:.0;position:relative;font-weight:700;background:#555;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;color:#FFF;border:1px solid #000;padding:3px;bottom:20px;}  
  </style>  
  <table align="center" class="menu" border="0" cellspadding="0" cellspacing="0">  
  <tr>  
  <td><a id="home" href="#"></a><span>Главная</span></td>  
  <td><a id="blog" href="#"></a><span>Блог</span></td>  
  <td><a id="load" href="#"></a><span>Файлы</span></td>  
  <td><a id="forum" href="#"></a><span>Альбомы</span></td>  
  <td><a id="img" href="#"></a><span>Форум</span></td>  
  <td><a id="rss" href="#"></a><span>RSS</span></td>  
  </tr>  
  </table>
Красивое горизонтальное меню на jQuery для uCoz - Меню для uCoz - Каталог файлов - Все для uCoz, DLE, Joomla, скрипты для uCoz

Категория: Меню для uCoz Просмотров: 1448