Membuat Animasi Menu CSS3

2/27/2011 Blog Tutorial Blogger Tips Trik Blog Tutorial Blogger Widget
Kali ini saya ingin membuat posting mengenai Cara Membuat Menu CSS3 di Blogger, yang hasilnya akan terlihat seperti gambar disamping, sebelumnya saya pernah membuat postingan mengenai 30+ Menu Navigasi Horizontal dengan CSS dan kode HTML dimana dalam postingan tersebut, kita bisa langsung membuat Navigasi Horizontal dengan bermacam-macam jenis.

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 Animasi Menu CSS3 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 di atas di add widget blogger sobat.

PERHATIAN!!
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


Setelah semua langkah-langkah di atas terlaksanakan dengan baik. Sekarang sobat tinggal Simpan dan lihat hasilnya.

Selamat mencoba semoga bermanfaat.



RESENSI
Karsono | http://www.karsono.co.cc/




KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

9 comments