Кратонное горизонтальное плавающее меню на CSS3 и jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen"/> <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> <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> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
