Добро Пожаловать на сайт Clana C.S.R.IP Role Play: 46.174.48.27:27275 IP DM: 212.76.130.197:27281

Главная Файлы Форум Чат Новости Регистрация Вход

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Всё для Ucoz » Меню для Ucoz » Великолепное горизонтальное меню (jQuery) (Великолепное горизонтальное меню (jQuery))
Великолепное горизонтальное меню (jQuery)
PriboyДата: Пятница, 22.06.2012, 13:28 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 142
Награды: 1
Репутация: 953
Статус:


Очень красивое горизонтальное меню на jQuery. Подойдёт для сайтов с любой цветовой схемой. Проверено порталом MAKAKAZ.

Установка:

В верхнюю часть сайта, в то место, где будет меню, вставляем код:


[green]<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>
[/green]

[red]Заменяем на свои картинки в этих строках:
{background:url(http://joomla.ucoz.com/load.png)no-repeat center;} [/red]


 
Форум » Всё для Ucoz » Меню для Ucoz » Великолепное горизонтальное меню (jQuery) (Великолепное горизонтальное меню (jQuery))
Страница 1 из 11
Поиск:

Мини-чат
200
Облако тегов
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
  • Shock-World (0)
  • hi (0)
  • КВ (2)
  • Скрипт вид фотографий Под ЗП (2)
  • Новая лига RUSHCENS.RU (0)
  • Круглое меню на CSS (0)
  • Крутая Менюшка для тёмных дизайнов для Ucoz (0)
  • Горизонтальное меню для uCoz на тему Windows (0)
  • Темное горизонтальное меню с подкатегориями (0)
  • Мега панель (0)
  • заявка в вступление в клан (3)
  • банерообмен (3)
  • КВ (2)
  • Скрипт вид фотографий Под ЗП (2)
  • Цветные шкурки с зонами пробития (1)
  • Arhangel (1)
  • Заявки на дружбу (1)
  • Правила cw (1)
  • JorDaN_____/-5k/ (1)
  • Вступление в клан! SorrY :D (1)
  • Priboy
  • KReeD
  • hrushkaaaaa
  • Кл
  • vlad
  • DEX
  • levarub
  • [Limper]
  • БАБУСЯ
  • John_doe
  • li-wong-sho12:16
    forbetalzzz212:07
    shakirovazat7223:09
    shramogin1515:59
    yrakhorev9615:05
    snapkovsasha17:56
    rayxxs17:33
    strike177rus04:27
    temawild9917:26
    Snap18:49


    Clan.::[C.[S].R.]::. © 2017

    CSR-TEAM