Home » , » Cara Membuat Menu Animasi CSS3

Cara Membuat Menu Animasi CSS3

Kali ini aku ingin membuat posting mengenai Cara Membuat Menu Animasi CSS3, yang hasilnya akan terlihat seperti gambar disamping, sebelumnya aku pernah membuat postingan Membuat Menu Dropdown dengan 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, 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
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 9 komentar

20 November 2011 pukul 14.10

contohnya mana gan?

Terimakasih Rudy Azhar atas Komentarnya di Cara Membuat Menu Animasi CSS3
20 November 2011 pukul 16.10

Ga ada live demonya ya mas?

Terimakasih Agus Mulyadi atas Komentarnya di Cara Membuat Menu Animasi CSS3
22 November 2011 pukul 13.23

Contohnya seperti Gambarnya. Dan menu itu bergoyang apabila disentuh dengan mouse.

24 November 2011 pukul 10.58

Mantab Kang Bro... :)

Terimakasih Unknown atas Komentarnya di Cara Membuat Menu Animasi CSS3
26 November 2011 pukul 20.30

menarik untuk desa yang belum/masih mencari bentuk nih...dites kenapa ga yo?!lihat sana-sini, ini bagus, itu bagus..pinginnya template dan menu2 seprti milik lora tuh...ada yang free ga ya?
tetap sehat dan...salam ubi cilembu

Terimakasih Mang Lembu atas Komentarnya di Cara Membuat Menu Animasi CSS3
8 Desember 2011 pukul 15.45

iya nih keren tips nya :)

Terimakasih Unknown atas Komentarnya di Cara Membuat Menu Animasi CSS3
12 Desember 2011 pukul 10.00

Mantab gan..........!!!!

Terimakasih SDN KANUNG 02 atas Komentarnya di Cara Membuat Menu Animasi CSS3
29 Januari 2012 pukul 02.12

mantap ... gan :)

Terimakasih ddlaptop atas Komentarnya di Cara Membuat Menu Animasi CSS3
19 Desember 2012 pukul 18.30

Mantab Gan, btw CSS3 akan segera menyingkirkan jQuery nih

Terimakasih CaraGitar atas Komentarnya di Cara Membuat Menu Animasi CSS3

Posting Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger