0 Membuat Menu Animasi Dengan CSS3

Kali ini aku ingin membuat posting mengenai Cara Membuat Menu CSS3 di Blogger, yang hasilnya akan terlihat seperti gambar disamping, sebelumnya aku pernah membuat postingan mengenai Online Generator CSS3 dimana dalam postingan tersebut, kita bisa langsung mengenerate kode CSS3 dari bentuk yang kita inginkan.
Akan tetapi yang patut diingat, tidak semua browser support Menu CSS3 ini, untuk melihat tabel browser mana saja yang support CSS3, bisa dilihat di www.findmebyip.com.

Apabila browser anda support dengan CSS3, maka cobalah bermain dengan demo menu di bawah ini.

• Home
• Menu1
• Menu2
• Menu3
• Menu4
• Menu5

Nach lalu bagaimana proses diatas bisa sampai terjadi... yang perlu disiapkan adalah kode CSS3 dan HTML seperti di bawah ini :

<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(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.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(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2: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://www.karsono.co.cc'>Home</a></li>
<li class="menuqu2"><a href='URL 1'>Menu1</a></li>
<li class="menuqu1"><a href='URL 2'>Menu2</a></li>
<li class="menuqu1"><a href='URL 3'>Menu3</a></li>
<li class="menuqu2"><a href='URL 4'>Menu4</a></li>
<li class="menuqu1"><a href='URL 5'>Menu5</a></li>
</ul>
</div>

Langsung saja copy kode diatas di add widget blogger anda.

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
  

Selamat Mencoba ..