Cara Membuat Menu Animasi CSS3

Kali ini aku ingin membuat posting mengenai Cara Membuat Menu Animasi CSS3, yang hasilnya akan terlihat seperti gambar disamping, kita bisa langsung mengenerate kode CSS3 dari bentuk yang kita inginkan.

Akan tetapi yang patut diingat, tidak semua browser support Menu CSS3, untuk melihat tabel browser


 mana saja yang support dengan CSS3, bisa dilihat di www.findmebyip.com

Pertanyaanya adalah Bagaimana proses diatas bisa sampai terjadi.. ?

Yang perlu anda sisipkan adalah kode CSS3 dan HTML di bawah ini.

 

 

<style type="text/css">
.menuqu ul li{display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff; list-style: none;
-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; list-style: none;
-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://lora-malunk.blogspot.com'>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>

 

Masukkan ke Gadget HTML/JavaScript

Yang perlu diperhatikan dari kode diatas adalah kode yang berwarna merah, dan angka yang ada disekitarnya.

1. angka 0.5s menandakan waktu perubahan dari animasi
2. angka 25deg menandakan rotasi perputaran dari area menu
3. angka 0deg menandakan bentuk akhir dari rotasi perputaran dari area menu
4. untuk huruf menuqu1 dan menuqu2 merupakan kode untuk kondisi dari properti yang telah di tentukan pada kode CSS3-nya

 

Posted in: blog