Красивое горизонтальное меню на jQuery для uCoz
Установка.
В тег :
Код
<script type="text/javascript" src="http://webuilder.info/ucoz/1/u.js"></script>
Этот код нужно установить в таблицу стилей(CSS):
Код
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://webuilder.info/ucoz/1/home.png)no-repeat center;}
#blog{background:url(http://webuilder.info/ucoz/1/blog.png)no-repeat center;}
#load{background:url(http://webuilder.info/ucoz/1/load.png)no-repeat center;}
#forum{background:url(http://webuilder.info/ucoz/1/img.png)no-repeat center;}
#img{background:url(http://webuilder.info/ucoz/1/forum.png)no-repeat center;}
#rss{background:url(http://webuilder.info/ucoz/1/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;}
.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://webuilder.info/ucoz/1/home.png)no-repeat center;}
#blog{background:url(http://webuilder.info/ucoz/1/blog.png)no-repeat center;}
#load{background:url(http://webuilder.info/ucoz/1/load.png)no-repeat center;}
#forum{background:url(http://webuilder.info/ucoz/1/img.png)no-repeat center;}
#img{background:url(http://webuilder.info/ucoz/1/forum.png)no-repeat center;}
#rss{background:url(http://webuilder.info/ucoz/1/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;}
Там где нужно вывести меню, устанавливайте код:
Код
<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>
<script>
jQuery(function(){
$('.menu td').append('<div align="center"><img src="http://webuilder.info/ucoz/1/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>
<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>
<script>
jQuery(function(){
$('.menu td').append('<div align="center"><img src="http://webuilder.info/ucoz/1/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>
Готово.
Другие новости |
Поделиться ссылкой
|
2 |
logotip1079 пишет: | 19.07.2012 | 15:01
Страница с комментарием |
проблема пропала тень внизу!
(0)
|