Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
логин:
пароль:

Регистрация Забыл пароль
Скрипты для uCoz Шаблоны для uCoz
Для того что бы оставлять сообщения на форуме вам необходимо зарегистрироваться или войти под своим профилем.

Делаем меню с реалистичным эффектом - Форум


  • Страница 1 из 1
  • 1
Модератор форума: Fro0st, lewonchik  
Форум » Веб мастеру » Интересные решения в uCoz » Делаем меню с реалистичным эффектом
Делаем меню с реалистичным эффектом
FrоstДата написания: Воскресенье, 23.05.2010, 09:59:15 | Сообщение № 1

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469

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

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

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




Сообщение отредактировал Fro0st - Воскресенье, 23.05.2010, 22:12:56
 
-=MORDER=-Дата написания: Среда, 14.07.2010, 01:53:04 | Сообщение № 2

-=MORDER=-
Сообщений: 22
Награды: 7
Репутация: 34
кульное меню,надо бы его переделать))

 
midlersenДата написания: Воскресенье, 09.01.2011, 13:25:54 | Сообщение № 3

-= Уровень: 1 =-
Сообщений: 27
Награды: 0
Репутация: 16
Спасибо, превосходное меню! :)

http://www.lesslife.ru/
 
slemikДата написания: Вторник, 15.02.2011, 01:56:09 | Сообщение № 4

-= Уровень: 2 =-
Сообщений: 41
Награды: 4
Репутация: 25
Спасибо большое за меню переделаю под себя и поставлю себе:)

[move]Я 919 дней На Rucoz.com[/move]
 
Форум » Веб мастеру » Интересные решения в uCoz » Делаем меню с реалистичным эффектом
  • Страница 1 из 1
  • 1
Поиск:
Обсуждение темы на форуме веб мастеров 3aKa4Ka.at.ua

© 3aka4ka.at.ua 2008 - 2022г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.