• Страница 1 из 1
  • 1
Горизонтальное плавающее меню через CSS3 и jQuery.
QuSpell Дата: Воскресенье, 05.06.2011, 01:54 | Сообщение # 1


Довольно-таки интересное горизонтальное меню, плавающее в правом верхнем углу. Фишка данного плагин состоит в том, что после каждой новой перезагрузки страницы пункты меню будут поворачиваться под произвольным углом.

Для начала посмотрите "ДЕМО" - ссылка.

Установка:

После "/head" на нужных страницах вставляйте:
Code
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen"/>       
       <ul id="navigation">       
       <li class="home"><a title="Home">Home</a></li>       
       <li class="about"><a title="About">About</a></li>       
       <li class="search"><a title="Search">Search</a></li>       
       <li class="photos"><a title="Photos">Photos</a></li>       
       <li class="contact"><a title="Contact">Contact</a></li>       
       </ul>


Следующий код в самый низ после тега "/body":
Code
<script type="text/javascript">       
       $(function() {       
       var d=300;       
       $('#navigation a').each(function(){       
       var $this = $(this);       
       var r=Math.floor(Math.random()*41)-20;       
       $this.css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'});       
       $('#content').css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'}) ;       
       $this.stop().animate({       
       'marginTop':'-70px'       
       },d+=150);       
       });       
       $('#navigation > li').hover(       
       function () {       
       var $this = $(this);       
       $('a',$this).stop().animate({       
       'marginTop':'-40px'       
       },200);       
       },       
       function () {       
       var $this = $(this);       
       $('a',$this).stop().animate({       
       'marginTop':'-70px'       
       },200);       
       }       
       ).click(function(){       
       var $this = $(this);       
       var name = this.className;       
       $('#content').animate({marginTop:-600}, 300,function(){       
       var $this = $(this);       
       var r=Math.floor(Math.random()*41)-20;       
       $this.css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'});       
       $('#content div').hide();       
       $('#'+name).show();       
       $this.animate({marginTop:-200}, 300);       
       })       
       });       
       });  


Осталось лишь залить стиль из прикреплённого архива в папку "css" и картинку в папку "images" - скачайте прикрепленный архив.

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

Лучшие пользователи
Пользователь Сообщений Группа
QuSpell 473 Проверенные
ppsha 446 Проверенные
skula 103 Проверенные
WinZeos 78 Проверенные
realhacking 59 Пользователи
Sezy 38 Проверенные
WinneR 35 Проверенные
GuideLess 19 Проверенные
JaYFuNk 19 Пользователи
ZUKO 11 Пользователи

Copyright © Форум поддержки по системе uCoz
Бесплатная адаптация шаблонов с CMS под uCoz
Бесплатные скрипты для uCoz
Бесплатные, готовые шаблоны от WinZeos
Уроки рисования и вёрстки макетов
Хостинг от uCoz