Super animated Menu

Membuat navigasi menu horizontal ini amatlah mudah dan cepat. Yah ... ini semua karena hanya kode CSS yang digunakan. Kode tak seberapa banyak tapi coba sampeyan lihat bentuk hasil akhirnya. Wuh ... nggak ngira, dah, klo navigasi menu ini tanpa jQuery, motool atau javascript yang lain. Animasinya, mbul ... Sangar, kata orang. Gimana? Mo lihat tampilannya? Ho ... ho ... Jangan lewatkan pokoknya. Nih, caranya

Cara Membuat Super Animated CSS3 Navigation Menu

1. Login to BloGGeR dengan cara menuliskan User Name (Nama Pengguna) atau Email Address, kemudian tuliskan juga Password baru lanjutkan KLIK "Login".
2. Setelah login maka di hadapan sampeyan akan terlihat halaman Dasboard. KLIK link "Design (Rancangan).
3. Ketika terlihat Page Element (Elemen Laman), KLIK "Edit HTML".
4. 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 Dibawah
5. KLIK SAVE Template (Simpan Template).
6. 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.
7. KLIK SAVE/Simpan. Setelah proses penyimpanan selesai, bukalah blog untuk melihat hasilnya.
8. Sesuaikan width dengan jumlah menu dan lebar ruang yang ada dengan mengatur width pada syntax ul#superAnima {width: 590px;}
9. Posisi navigasi menu dapat diatur melalui perubahan nilai margin di syntax .GRsuperAnima {margin: 15px 0 0 10px;}
10. Secara berurutan dari 15px 0 0 dan 10px digunakan untuk mengatur jarak dari sebelah atas, kanan, bawah dan kiri. Margin juga bisa bernilai negatif.

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(Alamat bacground anda) 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;
     }

]]></b:skin>

xHTML Super Animated CSS3 Navigation Menu

<div class="GRsuperAnima">
     <ul id="superAnima">
          <li><a class="anima" href="http://lefransnote.blogspot.com">Tutorial BloGGeR<br /><br /><span>Tutorial BloGGeR</span></a></li>
          <li><a class="anima" href="http://lefransnote.blogspot.com">Home<br /><br /><span>Home</span></a></li>
          <li><a class="anima" href="http://lefransnote.blogspot.com">jQuery<br /><br /><span>jQuery</span></a></li>
          <li><a class="anima" href="http://lefransnote.blogspot.com">CSS3<br /><br /><span>CSS3</span></a></li>
          <li><a class="anima" href="http://lefransnote.blogspot.com">Adobe<br /><br /><span>Adobe</span></a></li>
          <li><a class="anima" href="http://lefransnote.blogspot.com">Image Gallery<br /><br /><span>Image Gallery</span></a></li>
     </ul>
</div>

Semoga Berhasil

Di Baca Juga Ya...Artikel Terkait Lainnya :

Widget By : lefransnote's Site