Новые сообщения · Участники · Правила форума · Поиск
  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: z-17, Anarki  
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » Делаем меню с реалистичным эффектом
Делаем меню с реалистичным эффектом
FrostДата: Воскресенье, 23.05.2010, 22:10 | Сообщение # 1
Рядовой
Сообщений: 11
Репутация: 17
Социальная репутация:

Статус: Offline

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

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

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

Не поленитесь просмотреть весьма внушительный Список рабочих uCoz скриптов


Сообщение отредактировал Frost - Воскресенье, 23.05.2010, 22:36
 
pikassoДата: Понедельник, 24.05.2010, 10:33 | Сообщение # 2
Генерал-полковник
Сообщений: 925
Репутация: 80
Социальная репутация:

Статус: Offline
а где увидеть меню в работе?

 
z-17Дата: Понедельник, 24.05.2010, 13:38 | Сообщение # 3
Генералиссимус
Сообщений: 2233
Репутация: 117
Социальная репутация:

Статус: Offline
на картинку демо нажми)
мой блог
мои услуги в системе uCoz
все вопросы пишите на форуме, а не в ЛС. Так вам быстрее ответят.
 
FrostДата: Понедельник, 24.05.2010, 13:55 | Сообщение # 4
Рядовой
Сообщений: 11
Репутация: 17
Социальная репутация:

Статус: Offline
pikasso, здесь
 
pikassoДата: Понедельник, 24.05.2010, 17:47 | Сообщение # 5
Генерал-полковник
Сообщений: 925
Репутация: 80
Социальная репутация:

Статус: Offline
Frost, прикольно!

 
SleepWalkerДата: Вторник, 25.05.2010, 01:16 | Сообщение # 6
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
Frost, странно кстати чего оно не работает в ие. я сам пока не пытался учить jQuery (у меня своя маничка... хочу для начала научится самостоятельно все писать, а потом буду себе делать облегчения), но по идее библиотека кроме упрощения работы с языком еще и кроссбраузерность поддерживает.

З.Ы. в очередной раз респект тебе за скрипты

Time Waits For No One
 
FrostДата: Четверг, 27.05.2010, 14:28 | Сообщение # 7
Рядовой
Сообщений: 11
Репутация: 17
Социальная репутация:

Статус: Offline
SleepWalker, согласен. Но видимо не полностью поддерживает кроссбраузерность. Когда меню открыл в ие, ужаснулся. Будто грузовик переехал. cry
 
kaZimДата: Четверг, 03.06.2010, 17:49 | Сообщение # 8
Сержант
Сообщений: 35
Репутация: 3
Социальная репутация:

Статус: Offline
А как его на сайт вставить?
 
FrostДата: Четверг, 03.06.2010, 17:50 | Сообщение # 9
Рядовой
Сообщений: 11
Репутация: 17
Социальная репутация:

Статус: Offline
В архив загляни. Или в коде здесь посмотри
 
kaZimДата: Четверг, 03.06.2010, 18:05 | Сообщение # 10
Сержант
Сообщений: 35
Репутация: 3
Социальная репутация:

Статус: Offline
Quote (Frost)
В архив загляни. Или в коде здесь посмотри

Беда в том, что в архиве нет... а код взял с демо))) СПС!
 
FrostДата: Четверг, 03.06.2010, 18:07 | Сообщение # 11
Рядовой
Сообщений: 11
Репутация: 17
Социальная репутация:

Статус: Offline
Что значит "в архиве нет". Описания - да нет. А исходный код в архиве можно посмотреть.
 
kaZimДата: Четверг, 03.06.2010, 18:57 | Сообщение # 12
Сержант
Сообщений: 35
Репутация: 3
Социальная репутация:

Статус: Offline
Quote (Frost)
Что значит "в архиве нет". Описания - да нет. А исходный код в архиве можно посмотреть.

Проверь архив...
 
FrostДата: Четверг, 03.06.2010, 19:17 | Сообщение # 13
Рядовой
Сообщений: 11
Репутация: 17
Социальная репутация:

Статус: Offline
Ну проверил. Сам html файл и папка с картинками. И что?
 
kaZimДата: Четверг, 03.06.2010, 20:40 | Сообщение # 14
Сержант
Сообщений: 35
Репутация: 3
Социальная репутация:

Статус: Offline
Конечно кулл! Но есть проблем.... на некоторых страницах не отображаются картинки((, например *Всё о сайте*,*Темы форума* и т.д... (там есть ещё..((
 
FrostДата: Четверг, 03.06.2010, 20:42 | Сообщение # 15
Рядовой
Сообщений: 11
Репутация: 17
Социальная репутация:

Статус: Offline
Перед ссылками пиши слэш.
Quote
src="/img/..."
 
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » Делаем меню с реалистичным эффектом
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: