Попасть в команду портала Новые сообщения Участники Правила форума Поиск RSS

  • Страница 1 из 1
  • 1
Архив - только для чтения
Делаем меню с реалистичным эффектом
-=ШуРиК=-Дата: Суббота, 22.01.2011, 13:22:19 | Сообщение # 1
Группа: Гл. Модератор
Сообщений: 342
Награды: 1
Репутация: 0
демо

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

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)  
});  
});

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


  • Страница 1 из 1
  • 1
Поиск: