SUPER ANIMASI CSS3 NAVIGATION MENU (navigation menu animasi)

Kode CSS Super Animated CSS3 Navigation Menu
.GRsuperAnima {
position: relative;
margin: 15px 0 0 10px;
overflow: hidden;
margin: 0;
padding: 0;
background: #1d1d1d url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgTitik2AnimaV21H21.gif);
}
ul#superAnima {
width: 590px;
margin: 10px 0 20px;
padding: 0;
margin: 3px 4px 3px 4px;
clear: both;
float: left;
}
ul#superAnima li {
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#superAnima li a.anima {
padding: 10px 10px;
font: 10px Arial;
float: left;
color: white;
text-decoration: none;
text-transform: uppercase;
text-shadow: 1px 1px 1px #000;
clear: both;
height: 18px;
line-height: 20px;
background: white url(http://i964.photobucket.com/albums/ae124/gubhugreyot/gradBlueH2V53.gif) top left repeat-x;
text-align: center;
-o-transition: all 1.2s ease-in-out;
-moz-transition: all 1.2s ease-in-out;
-webkit-transition: all 1.2s ease-in-out;
font-weight: bold;
border: 1px solid #999;
}
ul#superAnima li a.anima:hover {
-o-transform: scale(1.0) rotate(0deg) translate(0, -40px);
-moz-transform: scale(1.0) rotate(0deg) translate(0, -40px);
-webkit-transform: scale(1.0) rotate(0deg) translate(0, -40px);
}
ul#superAnima li a.anima span {
padding: 10px 9px;
color: transparent;
opacity: 0.2;
-o-transition: all 1.6s ease-out;
-moz-transition: all 1.6s ease-out;
-webkit-transition: all 1.6s ease-out;
-o-transform: scale(8.0) rotate(0deg) translate(0,-10px) ;
-moz-transform: scale(8.0) rotate(0deg) translate(0,-10px) ;
-webkit-transform: scale(8.0) rotate(0deg) translate(0,-10px) ;
}
ul#superAnima li a.anima span:hover {
opacity: 1.0;
padding: 4px 8px;
height: 18px;
-o-transform: scale(1.0) rotate(0deg) translate(0,0);
-moz-transform: scale(1.0) rotate(0deg) translate(0,0);
-webkit-transform: scale(1.0) rotate(0deg) translate(0,0);
color: red;
border: 1px solid #555;
background: #888;
text-shadow: 1px 1px 1px #000;
box-shadow: 1px 2px 15px #fff, 0px -2px 8px red, -3px -3px 10px orange, -4px 4px 10px yellow;
-moz-box-shadow: 1px 2px 15px #fff, 0px -2px 8px red, -3px -3px 10px orange, -4px 4px 10px yellow;
-webkit-box-shadow:1px 2px 15px #fff,0px -2px 8px red, -3px -3px 10px orange,-4px 4px 10px yellow;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}
ul#superAnima li {
border: 1px solid transparent;
background: #CC9933 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/gradOrangeBlackV45H2.gif);
}
ul#superAnima li:hover {
background: #000 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgTitik2AnimaV21H21.gif);
border: 1px solid #777;
}




xHTML Super Animated CSS3 Navigation Menu
<div class="GRsuperAnima">
<ul id="superAnima">
<li><a class="anima" href="http://gubhugreyot.blogspot.com">Tutorial BloGGeR<br /><br /><span>Tutorial BloGGeR</span></a></li>
<li><a class="anima" href="http://gubhugreyot.blogdetik.com">Home<br /><br /><span>Home</span></a></li>
<li><a class="anima" href="http://tantytm.blogspot.com">jQuery<br /><br /><span>jQuery</span></a></li>
<li><a class="anima" href="http://bloggerstuars.blogspot.com">CSS3<br /><br /><span>CSS3</span></a></li>
<li><a class="anima" href="http://gubhugreyot.blogspot.com">Adobe<br /><br /><span>Adobe</span></a></li>
<li><a class="anima" href="http://gubhugreyot.blogspot.com">Image Gallery<br /><br /><span>Image Gallery</span></a></li>
</ul>
</div>


Cara Membuat Super Animated CSS3 Navigation Menu
Login to BloGGeR dengan cara menuliskan User Name (Nama Pengguna) atau Email Address, kemudian tuliskan juga Password baru lanjutkan KLIK "Login".
Setelah login maka di hadapan sampeyan akan terlihat halaman Dasboard. KLIK link "Design (Rancangan).
Ketika terlihat Page Element (Elemen Laman), KLIK "Edit HTML".
Di sinilah kode CSS akan di simpan. Cari kode ]]></b:skin>. Supaya mudah mencarinya, gunakan Ctrl+F. KLIK secara bersamaan, baru lakukan pencarian kode.
Letakkan seluruh kode CSS tepat di atas kode ]]></b:skin> seperti yang terlihat pada kode CSS di atas.
KLIK SAVE Template (Simpan Template).
Simpan xHTMl melalui penambahan widget. Sampeyan ikuti seperti langkah di atas (login), hanya setelah masuk di Page Element (Elemen Laman), KLIK Add Gadget (Tambah Gadget) yang di bagian header atau di bawah header, baru kemudian KLIK "HTML/Javascript". Copy x-HTML dan pastekan di box penambahan widget.
KLIK SAVE/Simpan. Setelah proses penyimpanan selesai, bukalah blog untuk melihat hasilnya.
Sesuaikan width dengan jumlah menu dan lebar ruang yang ada dengan mengatur width pada syntax ul#superAnima {width: 590px;}
Posisi navigasi menu dapat diatur melalui perubahan nilai margin di syntax .GRsuperAnima {margin: 15px 0 0 10px;}
Secara berurutan dari 15px 0 0 dan 10px digunakan untuk mengatur jarak dari sebelah atas, kanan, bawah dan kiri. Margin juga bisa bernilai negatif.

Semoga bermanfaat untuk anda..
Jangan lupa Berkomentar kawan??