Menu Rocking Rolling Rounded Dengan jQuery

Welcome To GENETIK [ Generasi Teknik Informatika ] :

Hallo Semua Sobat Inside Lovers, kali ini Blog's GENETIK [ Generasi Teknik Informatika ] akan memposting Menu Rocking Rolling Rounded Dengan jQuery,
oke tanpa basa basi lagi liat tutorialnya di bawah :

Live Demo

Sebenarnya versi asli dari menu navigasi  ini 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.

Nah sekarang untuk membuay menu navigasi ini pastikan dulu template kamu sudah dilengkapi dengan JQuery versi 1.3.2 sepeti ini :

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

Jika template mu sudah dilengkapi dengan di atas, kamu bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum, salin dulu kode di atas kemudian letakkan tepat di atas kode <heead>

Letakan kode dibawah ini sesudah JQuery tadi:

<script src='https://sites.google.com/site/blogcunayzblogspotcom/jquery/jquery-animate-css-rotate-scale.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogcunayzblogspotcom/jquery/jquery-css-transform.js' type='text/javascript'/>

Kemudian salin kode CSS di bawah ini dan letakan 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;
-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;
}

Terakhir tinggal meletakan kerangka objek saya,
Salin kode ini,kemudian letakan di tempat dimana kamu inginkan menu navigasi ini tampil,misalnya di bawah header.

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

Catatan :

1. 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, 
• Kode # dengan sebuah alamat URL. 
• Sesuaikan Nama Menu dengan nama menu yang kamu inginkan.

2. 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 biru dengan elemen formulir kotak penelusuran posting di templatemu agar elemen tersebut bisa bekerja.

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

Selamat berkreasi,jika ada masalah jangan sungkan untuk bertanya "di kotak komentar",... ^_^