Главная » Файлы » Прочие скрипты » jQuery

Оригинальное горизонтальное плавающее меню в правом верхнем углу через css3 и jQuery
23.06.14, 11:29:25

Скачать файл




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

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<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:
Код
<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

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: горизонтальное, Оригинальное, правом, Через, плавающее, JQuery, углу, верхнем, CSS3, Меню
Просмотров: 327 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: