Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3

Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3 adalah salah satu cara mepercantik menu navigasi pada blog kamu, dengan memasang jQuery ini maka akan mempermudah juga bagi para pengunjungmu untuk bisa memilih menu yang diinginkan. saya sendiri sebenarnya suka dengan menu ini,hanya saja setelah saya mengukur berat blog ini dan ternyata cukup gemuk, maka Infonetmu tidak memasang menu ini, sama halnya dengan membuat daftar isi dengan jQuery Accordion widget ini tidak membuatjadi lelet. nah bagi kamu yang ingin memasangnya saya persilahkan juga.


Dan bagaimana Cara Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3 ? ikuti langkah-langkah dibawah ini:

2. Letakkan kode berikut diatas kode </head>
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

   Tapi jika dalam template kamu sudah terpasang script ini,maka kamu tinggalkan langkah ini.
   
   
3. Kemudian letakkan juga kode dibawah ini tepat dibawah kode JQuery 1.3.2 tadi.
   

   <script src='http://infonetmu.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>
   
   <script src='http://sabarmuanas.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>

4. Cari kode ]]></b:skin> dan letakkan kode diawah ini diatas kode ]]></b:skin>
   

   #rocking-rolling{
   width:auto;
   height:52px;
   text-align:left;
   font-family:"Trebuchet MS",sans-serif;
   font-size:16px;
   font-style:normal;
   font-weight:bold;
   text-transform:uppercase;
   }
   #rocking-rolling h2,#rocking-rolling p, #rocking-rolling form{
   /* netralisasi tampilan elemen heading, paragraf dan formulir */
   margin:0 0 0 0;
   pading:0 0 0 0;
   border:none;
   background:transparent;
   }
   #rocking-rolling .item{
   position:relative;
   background-color:#f0f0f0;
   float:right;
   width:52px;
   margin:0px 5px; height:52px;
   border:2px solid #ddd;
   -moz-border-radius:30px;
   -webkit-border-radius:30px;
   border-radius:30px;
   -moz-box-shadow:1px 1px 3px #555;
   -webkit-box-shadow:1px 1px 3px #555;
   box-shadow:1px 1px 3px #555;
   cursor:pointer;
   overflow:hidden;
   }
   #rocking-rolling .link{
   left:2px; top:2px;
   position:absolute;
   width:48px;
   height:48px;
   }
   #rocking-rolling .icon_home{
   background:transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;
   }
   #rocking-rolling .icon_mail{
   background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;
   }
   #rocking-rolling .icon_help{
   background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;
   }
   #rocking-rolling .icon_find{
   background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;
   }
   #rocking-rolling .icon_photos{
   background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;
   }
   #rocking-rolling .item_content{
   position:absolute;
   height:52px;
   width:220px;
   overflow:hidden;
   left:56px;
   top:7px; background:transparent; display:none;
   }
   #rocking-rolling .item_content h2{
   color:#aaa;
   text-shadow:1px 1px 1px #fff;
   background-color:transparent;
   font-size:14px;
   }
   #rocking-rolling .item_content a{
   background-color:transparent;
   float:left;
   margin-right:7px;
   margin-top:3px;
   color:#bbb;
   text-shadow:1px 1px 1px #fff;
   text-decoration:none;
   font-size:12px;
   }
   #rocking-rolling .item_content a:hover{
   color:#0b965b;
   }
   
   #rocking-rolling .item_content p{
   background-color:transparent;
   text-transform:none;
   font-weight:normal !important;
   display:none;
   }
   #rocking-rolling .item_content p input{
   border:1px solid #ccc;
   padding:1px;
   width:155px; float:left;
   margin-right:5px;
   box-shadow:none;
   -moz-box-shadow:none;
   -webkit-box-shadow:none;
   }

5. Terakhir adalah tag HTML untuk memanggil menu navigasi Rocking Rolling Rounded yang dapat diletakkan sesuai tempat menu ini tampil, misalnya dibawah header atau di atas header. Posisi header dalam template biasanya ditandai dengan kode <div id='header-wrapper'> Letakkan kode ini dibawah kode <div id='header-wrapper'>
   

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

6. Simpan template kamu.
   

Ganti yang berwarna merah dengan judul, dan warna biru untuk menunya,dan ganti tanda # dengan link yang dituju. nah cukup sekian cara Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3, semoga bermanfaat.