Поиск:
  • Страница 1 из 1
  • 1
Делаем меню с реалистичным эффектом
Дата: Пятница, 28.01.2011, 19:09 | Сообщение # 1
Offline
  • Премиум

  • [ReVs]
  • 1719 Сообщения


Сегодня мы будем делать меню для сайта. Очень захотелось создать что то в этом роде. Это подойдет многим сайтам. Здесь выложу только сам скрипт, ради длины поста. Код небольшой, много места не занимает.

Code
//код запускается после загрузки страницы   

jQuery(function(){   
         
//аппендим для каждой ссылки тень   
$('.menu td').append('   
<div align="center"><img src="img/icons-shadow.png"></div>   
')   
         
//действия при наведении курсора на ссылку   
$('.menu td').hover(function(){   
//поднимаем картинку с ссылкой на 30px   
$(this).find('a').stop().animate({top:'-30'},300);   
//и тут же опускаем на 10px (для эффекта bounce)   
$(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,bottom:'20px'},300)   
//увеличиваем тень и убираем прозрачность   
$(this).find('img').stop().animate({opacity:1.0,height:'30px'},300)   
});   
});

Вряд ли меню правильно отображается в эксплорере, но зато красиво смотрится в опере, лисе и хроме (в остальных браузерах не тестил).

Помог ? Ставь + !


Сообщение отредактировал: ReVs - Пятница, 28.01.2011, 19:11
Дата: Суббота, 29.01.2011, 12:32 | Сообщение # 2 Данный пользователь заблокирован, возможно он мошенник!
Offline
  • Забаненный
  • Ранг: Генерал-лейтенант
  • 0 Сообщения
спасибо !
НеТу
Дата: Суббота, 29.01.2011, 12:38 | Сообщение # 3
Offline
  • Пользователь
  • Ранг: Подполковник
  • 102 Сообщения
ReVs, вауу..спасибо. Красиво получается
Дата: Суббота, 29.01.2011, 13:41 | Сообщение # 4
Offline
  • Премиум

  • [ReVs]
  • 1719 Сообщения
StarDUST, m4a1, незачто , от + не откажусь
  • Страница 1 из 1
  • 1
Поиск:
Администрация проекта не несет ответственности за публикуемые материалы.
Дизайн полностью принадлежит "Up-Rise.Ru".
Дизайн сайта разработал life_man.
© 2024 Сайт управляется системой uCoz.