Rocking Rolling Rounded Menu with jQuery and CSS3

Demonya bisa dilihat disini

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :
   
   /* -------------------------<br /> Rocking Rolling Rounded Menu with jQuery and CSS3<br /> ----------------------------------------------- */<br /> .item{<br /> position:relative;<br /> background-color:#f0f0f0;<br /> float:right;<br /> width:52px;<br /> margin:0px 5px;<br /> height:52px;<br /> border:2px solid #ddd;<br /> -moz-border-radius:30px;<br /> -webkit-border-radius:30px;<br /> border-radius:30px;<br /> -moz-box-shadow:1px 1px 3px #555;<br /> -webkit-box-shadow:1px 1px 3px #555;<br /> box-shadow:1px 1px 3px #555;<br /> cursor:pointer;<br /> overflow:hidden;<br /> }<br /> <br /> .link{<br /> left:2px;<br /> top:2px;<br /> position:absolute;<br /> width:48px;<br /> height:48px;<br /> }<br /> .icon_home{<br /> background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpS5VtUzPQr4jmY-7TAsjkZgUBpo4wjL9Tw9_9CHePeNzPj9q8aL1Am7R-B3zHtLLEjAj1kAD2mP6HzERP-Cp2vnI3kOhikOKUVMhGkYKPtWkIjidyxOVVG8xXm_RMZxPsFprUFj8Vwvc/s1600/home.png) no-repeat top left;<br /> }<br /> .icon_mail{<br /> background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwRobB7DNCj1SXafKmR2pgD1y22h1u_KVzxJmODfYXb1W01sVeJrAAawhZFP97Lsccq0p3ZBh-q4NfUp5rUiKpRj-EX9y2sWmCaFeqBFnSxSeXJE2d5YcHMgLAbPYE3Re9tz2dLekAB0/s1600/mail.png) no-repeat top left;<br /> }<br /> .icon_help{<br /> background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRkrJARAMFYswmXyJwRgA0SZWxmn6uwvBLODH7T5ox2HZyHrlA6uD5zH_ec2LZ74KMYn9ABrp0_kY2BYtimO0HR8rGFnK0wTX_xSXAlHObaOtzC951FezktRJjV3XmyiEsRn7nP3DQ2o0/s1600/help.png) no-repeat top left;<br /> }<br /> .icon_find{<br /> background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheYhjlCX93XliJo3Kr59E9gmzaY9XLOPW0PvD16tSweEKexXgFo7iDq610uwgah4LYSe2_e4cq9Rd18MJGCsbG4CTjJhOJBA5pYJUF4f3iaqyxl2POsxIbvrAGKHeJMEIYDvq82qVzRrc/s1600/find.png) no-repeat top left;<br /> }<br /> .icon_photos{<br /> background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWCyO0bBBrE27OptRNfLEEtpqxQaw932K2psjfjBR5W3vTjiwlhb0wveU1_FjJp6IJ0gK6Z5dzfEX9XFVv-ijdp-ZmmXbQgvkPv7ZwkpOlEbRWMHIhftxhviplpX2YZo7pKVtGout2Trw/s1600/photos.png) no-repeat top left;<br /> }<br /> .item_content{<br /> position:absolute;<br /> height:52px;<br /> width:220px;<br /> overflow:hidden;<br /> left:56px;<br /> top:7px;<br /> background:transparent;<br /> display:none;<br /> }<br /> .item_content h2{<br /> color:#aaa;<br /> text-shadow: 1px 1px 1px #fff;<br /> background-color:transparent;<br /> font-size:14px;<br /> }<br /> .item_content a{<br /> background-color:transparent;<br /> float:left;<br /> margin-right:7px;<br /> margin-top:3px;<br /> color:#bbb;<br /> text-shadow: 1px 1px 1px #fff;<br /> text-decoration:none;<br /> font-size:12px;<br /> }<br /> .item_content a:hover{<br /> color:#0b965b;<br /> }<br /> .item_content p {<br /> background-color:transparent;<br /> display:none;<br /> }<br /> .item_content p input{<br /> border:1px solid #ccc;<br /> padding:1px;<br /> width:155px;<br /> float:left;<br /> margin-right:5px;<br /> }
   
   selanjutnya simpan script berikut tepat diatas kode </body> :
   
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br /> <script src="http://kangdadang.googlecode.com/files/jquery-css-transform.js" type="text/javascript"></script><br /> <script src="http://kangdadang.googlecode.com/files/jquery-animate-css-rotate-scale.js" type="text/javascript"></script><br /> <script> $('.item').hover( function(){ var $this = $(this); expand($this); }, function(){ var $this = $(this); collapse($this); } ); function expand($elem){ var angle = 0; var t = setInterval(function () { if(angle == 1440){ clearInterval(t); return; } angle += 40; $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0); },10); $elem.stop().animate({width:'268px'}, 1000) .find('.item_content').fadeIn(400,function(){ $(this).find('p').stop(true,true).fadeIn(600); }); } function collapse($elem){ var angle = 1440; var t = setInterval(function () { if(angle == 0){ clearInterval(t); return; } angle -= 40; $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0); },10); $elem.stop().animate({width:'52px'}, 1000) .find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut(); } </script>
   
   terakhir cara pemanggilannya pada HTML (tata letaknya sesuaikan dengan template dan keinginan):
   
   <div class="item"> <a class="link icon_mail"></a><br /> <div class="item_content"> <h2>Contact us</h2> <p> <a href="#">eMail</a><br /> <a href="#">Twitter</a><br /> <a href="#">Facebook</a><br /> </p> </div> </div> <div class="item"> <a class="link icon_help"></a><br /> <div class="item_content"> <h2>Help</h2> <p> <a href="#">FAQ</a><br /> <a href="#">Live Support</a><br /> <a href="#">Tickets</a><br /> </p> </div> </div> <div class="item"> <a class="link icon_find"></a><br /> <div class="item_content"> <h2>Search</h2> <p> <input type="text"></input><br /> <a href="">Go</a><br /> </p> </div> </div> <div class="item"> <a class="link icon_photos"></a><br /> <div class="item_content"> <h2>Image Gallery</h2> <p> <a href="#">Categories</a><br /> <a href="#">Archives</a><br /> <a href="#">Featured</a><br /> </p> </div>
   
   Sebagai tambahan java script yang diberi warna Biru, bisa diganti dengan alamat link Js berikut
   

   http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js 

   maksudnya penggantian itu jika kawan-kawan ingin efek putarannya hanya pada awal Hover saja seperti demo di situs http://tympanus.net/Tutorials/RockingRollingMenu/
   
   Sumber