Cara Buat Menu Rolling Ala Goyang Ayu ting ting



Cara Buat Menu Rolling

Setelah memBuat Menu Flip Animasi Ala Mak EROT, Hadir kembali dengan hidangan Menu Navigasi Rolling dan goyang ala Ayu ting ting.
Efek menu Navigasi ini tergolong aneh unik dan keren, dimana hanya dengan sedikit di sawer " sentuh " maka Menu ini akan bergoyang dan berguling ria ala si Ayu ting-ting yang seksi. Cukup genit dan menggoda pengunjung mencoleknya, dan menurut si Ki Joko Bodo Menu ini berjenis kelamin wanita.
Penasaran? Ayo kita sama - sama Cek kebenarannya, Ke TKP Gan


Mau mencoba di blog sobat?, berikut caranya :

Pertama

Klik +

Kedua
Cari kode </head> dan setelah ketemu silahkan letakkan kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://kc-kumpulancara.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'></script>
<script src='http://kc-kumpulancara.googlecode.com/files/jquery-css-transform.js' type='text/javascript'></script>

Ketiga
Cari kode ]]></b:skin> atau </style>: dan letakkan kode berikut tepat di atas / sebelumnya.

Silahkan klik

Keempat
Klik + Pilih
Cara Buat Menu Flip Animasi keren Ala Restoran
Silahkan Copy dan Paste Kode Berikut ini

<div id='rocking-rolling'>
<div class='item'>
<a class='link icon_mail'></a>
<div class='item_content'>
<h2>KONTAK SAYA</h2>
<p>
<a href='#'>eMail</a>
<a href='#'>Twitter</a>
<a href='#'>Facebook</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_help'></a>
<div class='item_content'>
<h2>BANTUAN</h2>
<p>
<a href='#'>Buku Tamu</a>
<a href='#'>Lapor</a>
<a href='#'>Kritik dan Saran</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_find'></a>
<div class='item_content'>
<h2>TELUSURI</h2>
<p>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' method='get'>
<input name='q' type='text'/>
</form>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_photos'></a>
<div class='item_content'>
<h2>GALERI FOTO</h2>
<p>
<a href='#'>Kategori</a>
<a href='#'>Arsip</a>
<a href='#'>Daftar Isi</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_home'></a>
<div class='item_content'>
<h2>MULAI DARI SINI</h2>
<p>
<a href='#'>Pelayanan</a>
<a href='#'>Portfolio</a>
<a href='#'>Pembayaran</a>
</p>
</div>
</div>
<div style='clear:both;'></div>
</div>
<script type='text/javascript'>
function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').
stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)});</script>
Ganti JUDUL MENU dengan judul menu yang di kehendaki, dan kode # dengan sebuah alamat URL. Sesuaikan Nama Menu dengan nama menu yang di inginkan.

Selamat BerGuling Ria

Sumber: http://tympanus.net/codrops/2010/04/30/rocking-and-rolling-rounded-menu-with-jquery/
Cara Buat Menu Rolling Ala Goyang Ayu ting ting 10out of 10 based on 10 ratings. 10 user reviews.

facebook Comments



6 comments

Poskan Komentar

Terimakasih Kunjungan Anda - Silahkan Komentar- Salam Blogger Mohon Jangan Spam