Rocking Rolling Rounded Menu dengan JQuery

Mungkin ini adalah satu-satunya tipe menu navigasi dengan efek paling aneh. Hanya dengan sebuah sentuhan saja dapat membuat menu ini tampil genit dan menari-nari. Saya rasa, menu navigasi ini berjenis kelamin wanita! Ayo kita cek sama-sama:

Lihat Jenis Kelamin

Versi asli menu navigasi ini sebenarnya menggunakan framework JQuery 1.5.2 sebagai mesinnya, namun setelah Saya coba dengan JQuery versi 1.3.2 ternyata masih bisa berjalan. Bahkan lebih baik!

Untuk membuat menu navigasi seperti ini, pertama-tama pastikan bahwa templatemu sudah dilengkapi dengan JQuery versi 1.3.2 seperti ini:

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

Jika templatemu sudah dilengkapi dengan script di atas, kamu bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum, salin dulu kode di atas kemudian letakkan tepat di atas kode </head>
Setelah itu salin script ini kemudian letakkan di bawah JQuery tadi:

<script src='http://reader-download.googlecode.com/svn/trunk/jquery-animate-css-rotate-scale.js' type='text/javascript'></script> 
<script src='http://reader-download.googlecode.com/svn/trunk/jquery-css-transform.js' type='text/javascript'></script>

Salin kode CSS ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

#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;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  -webkit-border-radius:30px; 
  -webkit-box-shadow:1px 1px 3px #555;
  -moz-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; 
  -webkit-box-shadow:none; 
  -moz-box-shadow:none; 
  box-shadow:none; 
}

Terakhir tinggal meletakkan kerangka objeknya saja.
Salin kode ini, kemudian letakkan di tempat dimana kamu menginginkan menu navigasi ini ditampilkan:

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

Pelajari beberapa alternatif peletakkan menu navigasi di sini »
Klik Pratinjau untuk memastikan hasil tampilannya, atau langsung saja simpan templatemu. Sekarang kita masuk ke tahap penyesuaian.

Tipografi Menu:

• Setiap unit menu navigasi R3MJ (Rocking Rolling Rounded Menu dengan JQuery) dapat didefinisikan sebagai berikut:
  
  

  <div class='item'> 
      <a class='nama_class'></a> 
      <div class='item_content'> 
          <h2>JUDUL MENU</h2> 
          <p> 
              <a href='#'>Nama Menu</a> 
              <a href='#'>Nama Menu</a> 
              <a href='#'>Nama Menu</a> 
          </p> 
      </div> 
  </div>

  
  Ganti JUDUL MENU dengan judul menu yang kamu kehendaki, dan kode # dengan sebuah alamat URL. Sesuaikan Nama Menu dengan nama menu yang kamu inginkan.
• Khusus untuk kotak penelusuran pada menu ini sudah Saya set agar dapat berfungsi pada situs-situs blogspot. Jika kamu bukan termasuk pengguna layanan blogspot, kamu harus mengganti kode yang Saya beri warna kelabu dengan elemen formulir kotak penelusuran posting di templatemu agar elemen tersebut bisa bekerja.
• Script yang Saya letakkan di bawah kerangka menu lebih baik jangan dipindahkan ke area <head> ... </head>. Sebagian besar script memang idealnya diletakkan di dalam wilayah kekuasaan <head>, namun beberapa dari mereka juga ada yang harus diletakkan setelah objek seperti pada menu ini.

Sumber: hatetepe://tympanus.net