Cara Membuat Animated Vertical Menu Dengan jQuery

Sampeyan pasti tak akan menyangka javascript yang tak seberapa banyak ini mampu menghasilkan sebuah menu vertikal dengan bentuk animasi dan dilengkapi fade effects. Script kurang dari 10 deret ini mampu membuat setiap link title pada menu bergoyang ke kanan dan ke kiri saat mouse menyentuh setiap link. Apabila blog sudah menggunakan jquery-1.3.2.js atau jquery-1.3.2.min.js, tinggal tambahkan javascript di bawahnya maka sebuah menu cantik yang sangat indah akan hadir dihalaman blog sampeyan. Boleh percaya atau tidak, tetapi silahkan lihat dulu scripnya yang hanya beberapa baris ini.

D E M O

Silahkan buka demonya agar lebih jelas bagaimana animasi yang tercipta pada vertical menu yang dibuat dengan menggabungkan kehebatan jQuery dan CSS3 ini.

DEMO: jQuery animated vertical menu

Javascript Animated Vertical Menu

Javascript :

<script type="text/javascript">  
//<![CDATA[
/* gubhug reyot - Vertical Animated Menu */ 
$(document).ready(function() {  
$(".bgsGRVMnu li").hover(function(){  
$(this).find('span').animate({ opacity: 0 }, 800);        
$(this).find('a').animate({paddingLeft:"50px"}, 800); },
function(){  
$(this).find('span').animate({ opacity: 1 }, 800);  
$(this).find('a').animate({paddingLeft: "28px"}, 800);  
});
});  
//]]>
</script>

Script di atas inilah yang akan menghadirkan menu vertical indah dengan animasi menarik. Untuk memberikan hasil maksimal pada bentuk tampilan menu, kita juga manfaatkan rounded corners effects, opacity effects dan text shadow sehingga nilai lebih menu animasi ini semakin terasakan.

Screenshoot Animated Vertical Menu Menggunakan jQuery-1.3.2.min.js

Kode CSS Animated Vertical Menu

Kode CSS:

.bgsGRVMnu{
       list-style:none;
       overflow:hidden;
       padding:0;
       margin:0;
       width:300px;
       background:#4080c4;
       background:linear-gradient(top, #4080c4 0%,#cedcef 8%,#4080c4 100%);
       background:-o-linear-gradient(top, #4080c4 0%,#cedcef 8%,#4080c4 100%);
       background:-moz-linear-gradient(top, #4080c4 0%, #cedcef 8%, #4080c4 100%); 
       background:-webkit-linear-gradient(top, #4080c4 0%,#cedcef 8%,#4080c4 100%);       
       background:-ms-linear-gradient(top, #4080c4 0%,#cedcef 8%,#4080c4 100%);      
       filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4080c4', endColorstr='#4080c4',GradientType=0);
       padding:10px 6px;
       border:2px solid #555;
       border-radius:6px;    
}
.bgsGRVMnu li{
       margin:0;
       padding:0;
       margin-bottom:1px;
       border-radius:3px;
       position:relative;
       background:#900;
       width:100%;
       transition:1s;
       -o-transition:1s;
       -moz-transition:1s;
       -webkit-transition:1s;
       -ms-transition:1s;
}
.bgsGRVMnu li:hover{
       opacity:0.8;
       filter:alpha(opacity=80);
       z-index:99999;
       width:150%;
}
.bgsGRVMnu li a{
       font-size:12px;
       font-family:Arial !important;
       display:block;
       border:1px solid #ccc;
       background:url(http://gubhugreyot-arrow.googlecode.com/svn/gr/arrow-blue-yellow-anima.gif) no-repeat 6px 9px ;
       border-radius: 5px;
       padding:7px 0 7px 30px;
       color: #fff;
       white-space:nowrap;
       text-decoration:none;
       text-shadow:0px 1px 1px #5bc8fb;
       filter: Shadow(Color=#222, Direction=135, Strength=1);
}
.bgsGRVMnu li a:hover{
       color:red;
       text-shadow:2px 2px 2px #888;
}
.bgsGRVMnu li:hover{
       background:#eee;
}
.bgsGRVMnu li span{
       position:absolute;
       top:9px;
       left:7px;
       background: url(http://gubhugreyot-arrow.googlecode.com/svn/gr/bgsGR_YellowArowRight12.jpg) 0px 1px no-repeat;
       background-size:17px 12px;
       width:13px;
       height:12px;
}

Dalam kode css di atas disertakan sebuah background image sebagai latar belakang (background) menu, sehingga ketika mouse menyentuh setiap link akan memperlihatkan gambar backgroundnya. Karena yang terlihat hanya secuil gambar pada setiap link terasentuh cursor, pastilah hal ini akan membuat penasaran siapapun untuk menggoyangkan cursor di semua link yang kita isikan. Efek seperti ini kita ciptakan melalui bantuan opacity effects pada kode css. Sampeyan juga bisa mengganti background ini dengan foto pribadi atau bintang idola sampeyan. He ... he ... pokoknya coba saja dan aku tanggung pasti puas.

Cara Memasang dan Menggunakan Animated Vertical Menu dengan jQuery

1. Login to BloGGeR (Login ke BloGGeR)
2. KLIK link Design (Rancangan).
3. KLIK link Edit HTML.
4. BackUp Template dengan cara KLIK link "Download Full Template (Download Template Lengkap), kemudian simpan file template di "folder PC".
5. Tetap di Edit HTML, kemudian cari kode <head>. Letakkan jquery-1.3.2.min.js dan javascript di atasnya..
   
   Bentuk pemasangannya seperti berikut :
   
   

   Pemasangan Kode :

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   <script type="text/javascript">
   //>![CDATA[  
   /* gubhug reyot - Vertical Animated Menu */ 
   $(document).ready(function() {  
   $(".bgsGRVMnu li").hover(function(){  
   $(this).find('span').animate({ opacity: 0 }, 800);        
   $(this).find('a').animate({paddingLeft:"50px"}, 800); },
   function(){  
   $(this).find('span').animate({ opacity: 1 }, 800);  
   $(this).find('a').animate({paddingLeft: "28px"}, 800);  
   });
   });  
   //]]>
   </script>
   
   <head>

6. Lanjutkan dengan mencari kode ]]></b:skin>, kemudian letakkan kode css Animated Vertical Menu tepat di atasnya. Lihat bentuk pemasangannya seperti di bawah ini :
   

   .bgsGRVMnu{
          list-style:none;
          padding:0;
          margin:0;
          ....
          ....
   }
   .... dst ...
   
   .bgsGRVMnu li span{
          position:absolute;
          ....
          ....
          height:12px;
   }
   ]]></b:skin>

7. SAVE Template (Simpan Template) : KLIK "SAVE Template/Simpan Template".

Cara Menggunakan atau Memasang Kode HTML Animated Vertical Menu

Kode HTMLnya adalah sebagai berikut :

xHTML :

<ul class="bgsGRVMnu">
<li><a href="Link-1">Link Title-1</a><span></span></li>
<li><a href="Link-2">Link Title-2</a><span></span></li>
<li><a href="Link-3">Link Title-3</a><span></span></li>
<li><a href="Link-4">Link Title-4</a><span></span></li>
<li><a href="Link-5">Link Title-5</a><span></span></li>
<li><a href="Link-6">Link Title-6</a><span></span></li>
<li><a href="Link-7">Link Title-7</a><span></span></li>
<li><a href="Link-8">Link Title-8</a><span></span></li> 
<li><a href="Link-9">Link Title-9</a><span></span></li>
<li><a href="Link-10">Link Title-10</a><span></span></li>
<li><a href="Link-11">Link Title-11</a><span></span></li>
<li><a href="Link-12">Link Title-12</a><span></span></li> 
</ul>

1. Copy dan simpan kode HTML di atas di widget blog dengan cara KLIK link "Page Elements (Elemen Laman)"
2. Lanjutkan dengan KLIK "Add Gadget/Tambah Gadget" baru kemudian KLIK "HTML/Javascript".
3. Copy-Paste Kode HTMl dan letakkan di box yang tersedia.
4. KLIK SAVE/Simpan.

Catatan/Keterangan :

1. Ganti Link-1 s/d Link-12 dengan link menu yang dikehendaki sesuai dengan kebutuhan blog sampeyan.
2. Ganti Link Title-1 s/d Link Title-12 dengan Judul/Nama link yang akan dipasang di blog.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Ngahad Pahing, Maret, 04, 2012

» Happy Blogging - gubhugreyot «