Меню с реалистичной тенью и эффектом анимации - Форум
Главная Форум Гостевая книга Регистрация
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Скрипты для ucoz » Менюшки » Меню с реалистичной тенью и эффектом анимации
Меню с реалистичной тенью и эффектом анимации
ВэйДлинДата: Воскресенье, 20.09.2009, 23:04 | Сообщение # 1
Админ
Группа: Администраторы
Сообщений: 100
Репутация: 3
Статус: Offline
Меню с реалистичной тенью и эффектом анимации (выбранный пункт меню как бы подпрыгивает вверх,отбрасывая при этом тень)В примере два варианта меню - с зеркальным отражением и с отбрасыванием тени:

Установка

в HEAD страницы :

Code
<link rel="stylesheet" type="text/css" href="css/screen.css" media="all" />   
   <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>   
   <script type="text/javascript" src="scripts/jquery-ui-1.7.1.custom.min.js"></script>   
   <script type="text/javascript" src="scripts/execute.js"></script>

после тега bоdу (здесь код для сразу двух меню):
Code
<div id="content">   
   <h1>Reflection</h1>   
   <ul id="nav-reflection">   
   <li class="button-color-1"><a href="#" title="My fancy link">Link Text</a></li>   
   <li class="button-color-2"><a href="#" title="My fancy link">Link Text</a></li>   
   <li class="button-color-3"><a href="#" title="My fancy link">Link Text</a></li>   
   <li class="button-color-4"><a href="#" title="My fancy link">Link Text</a></li>   
   </ul><!-- end reflection navigation -->   
   <h1>Shadow</h1>   
   <ul id="nav-shadow">   
   <li class="button-color-1"><a href="#" title="My fancy link">Link Text</a></li>   
   <li class="button-color-2"><a href="#" title="My fancy link">Link Text</a></li>   
   <li class="button-color-3"><a href="#" title="My fancy link">Link Text</a></li>   
   <li class="button-color-4"><a href="#" title="My fancy link">Link Text</a></li>   
   </ul><!-- end shadow navigation -->   
    

Read the full article <a href="http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/" title="View the full article on adrianpelletier.com">here</a>.</p>   
</div><!-- end content -->
Прикрепления: demo.zip(48Kb)
 
Форум » Скрипты для ucoz » Менюшки » Меню с реалистичной тенью и эффектом анимации
Страница 1 из 11
Поиск:
Главная | Форум

Конструктор сайтов - uCoz
Правообладателям
         
  Баннер   Баннер