Setelah perjalan panjang mondar mandir di gogle untuk design blog ku akhirnya nemu deh tu "catatan karsono" yang memberikan kode css untuk animasi menu akhirnya aku coba tu kodenya yang akhir nya jadi kaya gambar di Atas :
untuk membuatnya sangat mudah jika sudah mendapatkan kode cssnya heheheheheh
kode di bawah ini sbetulnya saya dapat dari ini tapi saya rubah dan saya tambah stilenya
Caranya adalah anda harus
1. Open Dashboard
2. Buka menu design
3. Add a Gedget
4. Copy Paste Kode berikut :
<style type="text/css">
.menuqu ul li{list-style: none; display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-9deg);-moz-transform:rotate(-9deg);-o-transform:rotate(-9deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);
}
.menuqu3 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #FFFF00; border: 2px solid #fff;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu4 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #FF0000; border: 2px solid #fff;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-18deg);-moz-transform:rotate(-18deg);-o-transform:rotate(-18deg);
}
.menuqu5 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #FE2E9A; border: 2px solid #fff;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);
}
.menuqu1:hover, .menuqu2:hover, .menuqu3:hover, .menuqu4:hover, .menuqu5:hover,{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
</style>
<div class="menuqu">
<ul>
<li class="menuqu1"><a href='http://arndy7-chyz.blogspot.com/'>Beranda</a></li>
<li class="menuqu2"><a href='url anda'>menu kedua</a></li>
<li class="menuqu3"><a href='url anda'>menu brikutnya</a></li>
<li class="menuqu4"><a href='url anda'>menu berikutnya</a></li>
<li class="menuqu5"><a href='url anda'>menu terakhir anda</a></li>
</ul>
</div>
.menuqu ul li{list-style: none; display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-9deg);-moz-transform:rotate(-9deg);-o-transform:rotate(-9deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);
}
.menuqu3 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #FFFF00; border: 2px solid #fff;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu4 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #FF0000; border: 2px solid #fff;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-18deg);-moz-transform:rotate(-18deg);-o-transform:rotate(-18deg);
}
.menuqu5 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #FE2E9A; border: 2px solid #fff;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);
}
.menuqu1:hover, .menuqu2:hover, .menuqu3:hover, .menuqu4:hover, .menuqu5:hover,{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
</style>
<div class="menuqu">
<ul>
<li class="menuqu1"><a href='http://arndy7-chyz.blogspot.com/'>Beranda</a></li>
<li class="menuqu2"><a href='url anda'>menu kedua</a></li>
<li class="menuqu3"><a href='url anda'>menu brikutnya</a></li>
<li class="menuqu4"><a href='url anda'>menu berikutnya</a></li>
<li class="menuqu5"><a href='url anda'>menu terakhir anda</a></li>
</ul>
</div>
Yang perlu diperhatikan dari kode diatas adalah kode yang berwarna merah, dan angka yang ada di antaranya.
- angka 0.5s disini menandakan waktu perubahan dari animasi
- angka 25deg disini menandakan rotasi perputaran dari area menu
- angka 0deg disini menandakan bentuk akhir dari rotasi perputaran dari area menu
- untuk huruf menuqu1 dan menuqu2 merupakan kode untuk kondisi dari properti yang telah di tentukan pada kode CSS3-nya
5. simpan dan lihat Apa yang akan Terjadi..
Slamat mencoba semoga Sukses...
sumber : ini
0 komentar