hasil dari pembuatan menu CSS3 akan tampak seperti gambar disamping.
akan tetapi yang perlu di ingat adalah bahwa tidak semua browser support menu CSS3,
untuk melihat tabel browser mana saja yang support dengan CSS3 bisa dilihat DISINI.
ok langsung aja kita masuk ke tahap cara pembuatan menu animasi CSS3 :
1. login ke blog kamu, pastikan posisi kamu sekarang berada di dasbor
2. klik rancangan,
3. elemen halaman,
4. tambah gadget/widget,
5. pilih HTML/Javascript
6. masukkan kode 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:all0.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:all0.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>
.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:all0.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:all0.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>
7. klik simpan, selesai
catatan:
Yang perlu diperhatikan dari kode diatas adalah kode yang berwarna merah, dan angka yang ada disekitarnya.
- angka 0.5s menandakan waktu perubahan dari animasi
- angka 25deg menandakan rotasi perputaran dari area menu
- angka 0deg 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.
sumber : http://lora-malunk.blogspot.com
Tidak ada komentar:
Posting Komentar
Terimakasih saya ucapkan..
karena anda telah memberikan komenter pada artikel ini..
gabung dengan saya di facebook.com >> http://www.facebook.com/ganta.a.tasya
gabung dengan saya di twitter.com >> http://twitter.com/GantaArgaTasya
gabung dengan saya di blorner.com >> http://blorner.com/GATOT12/
gabung dengan saya di Google+.com >> http://plus.google.com/111785983690816699275/posts
gabung dengan saya di digg.com >> http://digg.com/gatots
gabung dengan saya di bloggers.com >> http://bloggers.com/GATOT12
gabung dengan saya di planet-blog.com >> http://www.planet-blog.com/user/6855