+7 (911) 913-40---
menu
person

20:00
Меню горизонтальное с иконками

Code

<title> Menu</title>
<script>
jQuery(function(){

$('.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:150;height:200px;text-align:center;}
.menu a{display:block;width:140px;height:140px;position:relative;left:10px;top:10}

#blog{background:url(http://artnov.ucoz.com/Ikonki/Harry_Potter_Icons_004.png)no-repeat center;}
#load{background:url(http://artnov.ucoz.com/Ikonki/w512h5121339360019database.png)no-repeat center;}
#forum{background:url(http://artnov.ucoz.com/Ikonki/color-palette1.png)no-repeat center;}
#img{background:url(http://artnov.ucoz.com/Ikonki/book.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 class="menu" cellspadding="0" align="center" border="0" cellspacing="0">
<tbody><tr>

<td><a id="blog" href="http://artnov.ucoz.com/blog/"></a><span>Блог</span></td>
<td><a id="load" href="http://artnov.ucoz.com/load"></a><span>Файлы</span></td>
<td><a id="forum" href="http://artnov.ucoz.com/photo"></a><span>Галерея</span></td>
<td><a id="img" href="http://artnov.ucoz.com/gb"></a><span>Гостевая книга</span></td>

</tr>
</tbody></table>

Категория: Веб дизайн | Просмотров: 3762 | Добавил: artnov
2 голоса

Всего комментариев: 0
avatar