Membuat Rocking Rolling Rounded Menu with jQuery and CSS3

Membuat Rocking Rolling Rounded Menu with jQuery and CSS3

Mungkin Temen temen sudah pada tahu ya cara Membuat Rocking Rolling Rounded Menu with jQuery and CSS3, tapi gak pap soh, mungkin sahabat blogger lainya ada yang belum tahu ni tentang Membuat Rocking Rolling Rounded Menu with jQuery and CSS3, ini adalah accesories blog berupa menu yang menurut saya sendiri juga cukup bagus untuk di gunakan. 

Langkah langkah membuatnya yaitu :

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/AVvXsEjLbZc_Su-6gH1OI5_zVTLpwchODGYP5Tk6cRrIPUwYIy7re9ZDidvw0JvTwC8vaaS35UUqJ2IZHy7etN5s467x-wbfN2mixsg9j78gFaUiEGqcWJA-sKDNAt_Zltyac8e5oZOnqXT_is4/s1600/home.png) no-repeat top left;<br /> }<br /> .icon_mail{<br /> background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUYEcEBCAmK8yhnf_C9Beytb82XoDxwqAfubW33lKe-HtL8k_VerX1oc352Ah6etvR-IiigEB4v7nd5qH2L5b-aebFprje5jXJ916aZuJNEyrRpVbMQaYbaoQt_8vasn4bGx7E01nqU_U/s1600/mail.png) no-repeat top left;<br /> }<br /> .icon_help{<br /> background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKRhtXgajIQidOocuqwKhQZuZ_yqR6ACJ7GUWsYRyRfPsxmDQyuZuR9mZWfQYzREfgc2Ls6chh7GeQxDjos-qnSoRK_WH7RB-YmTTxyvbiwoWBiOcN1C-er2aQ5o1Xr8uOEmU6-K8xZFk/s1600/help.png) no-repeat top left;<br /> }<br /> .icon_find{<br /> background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg490Rd4cgDMVbXvv8Pl3aKJeyt-6IVLYtzmanGLarwEWEUi25LFI4OIVvnOlEYdqWuA87Z4sftLMeiZyWIoPEbUxk9VHEuOgmuuTGLa1sqZI0Myj18_8Fl5rJU4O9NWz5M0I6W7eaQ5lw/s1600/find.png) no-repeat top left;<br /> }<br /> .icon_photos{<br /> background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMcK96lPUIcniDtHO3DEtw46OZRfgdB5_dol9UExJzhYYo-fxOOaU4P1XAd_unJEVzW-_JuZRuMtZVdOtej5VKvgs7xGtjrUXvol9oktPJt-F_I6Hqjag-9fOw0oJvGL5tT1ZmCIgZG-A/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 /> }

4. Selanjutnya Cari  kode </body> dan letakan kode berikut diatasnya :

<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>

5. Sekarang Klik SAVE Template

6. Nah sekarang tinggal letakan di script dibawah ini di kotak HTML dan terserah kamu mau di tempatkan dimana.

<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 dibawah ini

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">

dapat diganti dengan script di bawah ini. 

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

Maksudnya penggantian itu jika kamu ingin efek putarannya hanya pada awal Hover saja seperti demo di situs http://tympanus.net/Tutorials/RockingRollingMenu/

By #http://www.ideini.com/