Скачать книгу

Форма входа

Наш опрос

Статистика

Онлайн всего: 1

Гостей: 1

Пользователей: 0

Главная » 2011 » Апрель » 9 » Оригинальное горизонтальное плавающее меню в правом верхнем углу через css3 и jQuery

11:19

Оригинальное горизонтальное плавающее меню в правом верхнем углу через css3 и jQuery

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

Установка:

После /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);
  })
  });
  });
  </script>

Осталось лишь залить стиль из прикреплённого архива в папку css и картинку в папку images

«grafiky.net» — блоги dofollow. подними ТИЦ -пройдись по списку сайтов с высоким ТИЦ и PR.

1
2
3
4
5

Просмотров: 6285 | Добавил: gipervovanishe | Теги: Оригинальное горизонтальное плавающ | Рейтинг: 0.0/0

Маршала В.А. © 2024

$