Accordion Menu Unik

Membuat accordion menu tentu membuat tampilan web anda menjadi semakin telihat mengesankan, namun akan lebih mengesankan jika tampilan dari accorion itu sendiri telihat unik dan berbeda dengan menu lainnya seperti contoh berikut:
DEMO | DOWNLOAD
CSS :

1. <style type="text/css"> 
2. .cp-accordion {width:250px; height:35px; margin:0 auto 450px auto; position:relative; z-index:100; 
3. -webkit-perspective:400px; 
4. -moz-perspective:400px; 
5. perspective:400px; 
6. -webkit-transform-origin: 50% 100%; 
7. -moz-transform-origin: 50% 100%; 
8. transform-origin: 50% 100%; 
9. } 
10. /* default settings */ 
11. .cp-accordion div {position:absolute; padding:10px; 
12. -webkit-transform-style:preserve-3d; 
13. -moz-transform-style:preserve-3d; 
14. transform-style:preserve-3d; 
15. top:100%; leftleft:0; width:230px; 
16. -webkit-transform-origin: 0 0; 
17. -moz-transform-origin: 0 0; 
18. transform-origin: 0 0; 
19. } 
20. .cp-accordion .odd {background:#ddd; 
21. -moz-transform:rotateX(-180deg); 
22. -webkit-transform:rotateX(-180deg); 
23. -webkit-transition: 1s; 
24. -moz-transition: 1s; 
25. -o-transition: 1s; 
26. transition: 1s; 
27. } 
28. .cp-accordion .even {background:#eee; 
29. -moz-transform:rotateX(180deg); 
30. -webkit-transform:rotateX(180deg); 
31. -webkit-transition: 1s; 
32. -moz-transition: 1s; 
33. -o-transition: 1s; 
34. transition: 1s; 
35. } 
36. .cp-accordion .first {background:#ddd; 
37. -moz-transform:rotateX(-100deg); 
38. -webkit-transform:rotateX(-100deg); 
39. -webkit-transition: 0.6s; 
40. -moz-transition: 0.6s; 
41. -o-transition: 0.6s; 
42. transition: 0.6s; 
43. } 
44. .cp-accordion .last {box-shadow:0 15px 10px -10px rgba(0,0,0,0.3); border-radius: 0 0 10px 10px;} 
45. .cp-accordion:hover .sub { 
46. -moz-transform:rotateX(0deg); 
47. -webkit-transform:rotateX(0deg); 
48. } 
49. .cp-accordion .sub img {display:block; float:leftleft; padding:0 10px 10px 0;} 
50. .cp-accordion .sub p {font: normal 12px/15px arial, sans-serif; color:#000; padding:0; margin:0;} 
51. .cp-accordion .sub p span {display:block; font: bold 14px/18px arial, sans-serif; color:#ea0;} 
52. .cp-accordion .sub p a {font: normal 12px/15px arial, sans-serif; color:#09c;} 
53. .cp-accordion .sub p a:hover {text-decoration:none;} 
54. .cp-accordion a.main {display:block; font: bold 15px/35px arial, sans-serif; text-align:center; text-decoration:none; color:#fff; background:#069; border-radius:10px 10px 0 0; position:relative; z-index:100;} 
55. </style> 

HTML :

1. <div class="cp-accordion"><a class="main" href="http://indrawan21.blogspot.com">Calon Programer</a> 
2.     <div class="sub first"><img src="images/antivirus.png" alt=""><p><span>Anti Virus</span>Download antivirus terbaru <a href="http://indrawan21.blogspot.com">full</a> secara GRATISSS.</p> 
3.     <div class="sub even"><img src="images/penguin.png" alt=""><p><span>Ubuntu</span>Tutorial Ubuntu <a href="http://indrawan21.blogspot.com">dan tips</a> trik ubuntu.</p> 
4.     <div class="sub odd"><img src="images/my_mac.png" alt=""><p><span>My Mac</span>Mac OS <a href="http://indrawan21.blogspot.com">calon prorgamer</a></p> 
5.     <div class="sub even"><img src="images/xchat.png" alt=""><p><span>Chat</span>Chat sosial networking <a href="http://indrawan21.blogspot.com">ada disini</a></p> 
6.     <div class="sub odd last"><img src="images/neotux.png" alt=""><p><span>New Tux</span>Tampilan Pinguin Unix Baru, <a href="http://indrawan21.blogspot.com">Calon Programer</a></p> 
7.     </div></div></div></div></div> 
8. </div>  Silahkan kalian modifikasi sesuai dengan kebutuhan website kalian

Semoga bermanfaat

DEMO | DOWNLOAD