Cara Membuat Animated Vertical Menu Dengan jQuery

Cara Membuat Animated Vertical Menu Dengan jQuery,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.

Currently Firefox, Safari and Internet Explorer(IE) have limited support for the proposed CSS border-corners.
We would love to hear your comments on Rounded Corners with Animation Effect.
Thank's for your visiting our blog!

http://rizkymakkah.blogspot.com/

Copy Paste Kode CSS Di bawah ini:

KODE CSS

.bgsGRVMnu{
       list-style:none;
       padding:0;
       margin:0;
       width:220px;
       background:#333 url(http://i27.tinypic.com/2lstsex/bgsGR/bgVmenu.jpg) top center no-repeat;
       padding:5px 3px;
       border:2px solid #555;
       border-top-left-radius: 12px;
       border-top-right-radius: 12px;
       -moz-border-radius-topleft: 12px;
       -moz-border-radius-topright: 12px;
       -webkit-border-top-left-radius: 12px;
       -webkit-bordertop-right-radius: 12px;
       border-radius: 12px;
       -moz-border-radius: 12px;
       -webkit-border-radius: 12px;
       }
.bgsGRVMnu li{
       margin:0;
       padding:0;
       margin-bottom:1px;
       border-radius: 3px;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       position:relative;
       background:#888 url(http://i49.tinypic.com/28cj9r5.jpg) bottom left repeat-x;
       }
.bgsGRVMnu li:hover{
       opacity:0.6;
       -moz-opacity:0.6;
       filter:alpha(opacity=60);
       }
.bgsGRVMnu li a{
       font-size:11px;
       font-family:Arial !important;
       display:block;
       border:1px solid #ccc;
       background:url(http://i44.tinypic.com/chrv9.gif) no-repeat 6px 9px ;
       border-radius: 5px;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       padding:7px 0 7px 30px;
       color: #fff;
       text-decoration:none;
       text-shadow:0px 1px 1px #5bc8fb;
       filter: Shadow(Color=#222, Direction=135, Strength=1);
       }
.bgsGRVMnu li a:hover{
       color:red;
       }
.bgsGRVMnu li:hover{
       background:url(http://i25.tinypic.com/new45k/bgsGR/images/bgbluelight.png);
       background-repeat: repeat-x;
       background-position:0 60%;
       }
.bgsGRVMnu li span{
       position:absolute;
       top:9px;
       left:7px;
       background: url(http://i26.tinypic.com/1zl7nf6/bgsGR/images/bgblue.png) center left no-repeat;
       width:13px;
       height:12px;
       }

http://www.negrionta.co.tv

Di bawah ini Kode HTML

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

Nara sumber dari gubhukreyot

Apabila ingin menggunakan javascript dan kode css yang sudah dalam bentuk link sekaligus sudah di kompres, silahkan KLIK link download di  SINI Semua tinggal pasang dan sudah ada petunjuk pemasangan di dalamnya