Animasi Menu

Tweet

Demonya

• Beranda
  
  Cyiberart
• About us
  
  cyiberart
• Follow
  
  Cyiberart
• Menu
  
  Cyiberart
• Fanspage
  
  Cyiberart

Navigation di atas hanya menggunakan kode CSS. Animasi pada menu tercipta dengan memanfaatkan CSS3 Transformasi dan Transisi dengan memanfaatkan efek opacity, scale, translate dan background image.

Nih Kodenya Sob

.cyiberart{
        position:relative;
        margin:15px 0 0 10px;
        overflow:hidden; 
        margin:0; 
        float:left;
        padding:0;
        background:#1d1d1d url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
}
ul#bengellz{ 
        width:599px;
        margin:10px 0 20px; 
        padding:0; 
        margin:3px 4px 3px 4px;
        clear:both;
        float:left;
}
ul#bengellz li{
        margin:0; 
        padding:0; 
        overflow:hidden; 
        float:left; 
        height:40px; 
}
ul#bengellz li a.keren{
        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(https://lh4.googleusercontent.com/-a0zdLvnsQE8/T2XFNjkIrWI/AAAAAAAAAcQ/rrmwCSZMx3k/h120/gradBlueH2V53.gif) top left repeat-x; 
        text-align:center;
        transition:all 1.2s ease-in-out;
        -o-transition:all 1.2s ease-in-out;
        -moz-transition:all 1.2s ease-in-out;
        -webkit-transition:all 1.2s ease-in-out; 
        -ms-transition:all 1.2s ease-in-out; 
        font-weight:bold; 
        border:1px solid #999;
}   
ul#bengellz li a.keren:hover{
        transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -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);
        -ms-transform:scale(1.0) rotate(0deg) translate(0, -40px);
}  
ul#bengellz li a.keren span{
        padding:10px 9px; 
        color:transparent; 
        opacity:0.2;
        filter:alpha(opacity=20);
        border:2px solid transparent;
        transition:all 1.6s ease-out;
        -o-transition:all 1.6s ease-out; 
        -moz-transition:all 1.6s ease-out;
        -webkit-transition:all 1.6s ease-out; 
        -ms-transition:all 1.6s ease-out; 
        transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -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);
        -ms-transform:scale(8.0) rotate(0deg) translate(0,-10px);
}  
ul#bengellz li a.keren span:hover{ 
        opacity:1.0;
        filter:alpha(opacity=100);
        padding:4px 9px; 
        height:18px;
        transform:scale(1.0) rotate(0deg) translate(0,0);
        -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);
        -ms-transform:scale(1.0) rotate(0deg) translate(0,0);
        color:#FF0; 
        border:2px solid #000;
        background:#555; 
        text-shadow:1px 1px 1px #000;
        box-shadow:1px 2px 15px #fff, 0px -1px 3px red, -2px -2px 2px orange, -3px 3px 3px yellow;
        border-radius:4px; 
}
ul#bengellz li{
        border:1px solid transparent;
        background:#CC9933 url(https://lh4.googleusercontent.com/-Tk55wbQOL_s/T2XGvQfF2WI/AAAAAAAAAcY/1_THN4F2g7A/h120/gradOrangeBlackV45H2.gif);
}   
ul#bengellz li:hover{ 
        background:#000 url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif); 
        border:1px solid #777;
}

]]></b:skin>

xHTML Super Animated CSS3 Navigation Menu

<div class="cyiberart">
<ul id="bengellz">
<li><a class="keren" href="http://cyiberart.blogspot.com/">Beranda

Cyiberart</a></li>
<li><a class="keren" href="http://cyiberart.blogspot.com/#bengellz-cakep">About us

cyiberart</a></li>
<li><a class="keren" href="http://cyiberart.blogspot.com/#bengellz-segalanya">Contact

Cyiberart</a></li>
<li><a class="keren" href="http://cyiberart.blogspot.com/2012/08/tukeran-link.html#comment-form">Tukeran Link

Cyiberart</a></li>
<li><a class="keren" href="http://www.blogger.com/follow-blog.g?blogID=8397213218864317483">Follow

Cyiberart</a></li>
<li><a class="keren" href="http://cyiberart.blogspot.com/p/daftar-menu_7422.html">Menu

Cyiberart</a></li>
<li><a class="keren" href="https://www.facebook.com/pages/QUEENIDYA/252100348185248?ref=hl">Fanspage

Cyiberart</a></li>
</ul>
</div>

Dan Ini Caranya Sob

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 di atas.
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.