3D Menu Drop Down dengan Animasi Melipat

Untuk membuat 3D Menu Dropdown tersebut silahkan gunakan Kode CSS dan HTML dibawah ini, silahkan lihat cara pemasangannya seperti beberapa artikel yang sudah saya tayangkan sebelumnya.

<style type="text/css">
.concertina {width:250px; height:35px; margin:0 auto 450px auto; position:relative; z-index:100;
-webkit-perspective:400px;
-moz-perspective:400px;
perspective:400px;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
/* default settings */
.concertina div {position:absolute; padding:10px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
top:100%; left:0; width:230px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}

.concertina .odd {background:#ddd;
-moz-transform:rotateX(-180deg);
-webkit-transform:rotateX(-180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.concertina .even {background:#eee;
-moz-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.concertina .first {background:#ddd;
-moz-transform:rotateX(-100deg);
-webkit-transform:rotateX(-100deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.concertina .last {box-shadow:0 15px 10px -10px rgba(0,0,0,0.3); border-radius: 0 0 10px 10px;}
.concertina:hover .sub {
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
}

.concertina .sub img {display:block; float:left; padding:0 10px 10px 0;}
.concertina .sub p {font: normal 12px/15px arial, sans-serif; color:#000; padding:0; margin:0;}
.concertina .sub p span {display:block; font: bold 14px/18px arial, sans-serif; color:#ea0;}
.concertina .sub p a {font: normal 12px/15px arial, sans-serif; color:#09c;}
.concertina .sub p a:hover {text-decoration:none;}
.concertina 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;}
</style>

<div id="info">

<div class="concertina"><a class="main" href="#url">Products</a>
<div class="sub first"><img src="https://sites.google.com/site/archivesiugi/javascr/antivirus.png" alt="" /><p><span>Anti Virus</span>Lorem ipsum dolor sit amet, consectetur <a href="#url">adipiscing</a> elit. Sed metus diam, tristique.</p>
<div class="sub even"><img src="https://sites.google.com/site/archivesiugi/javascr/penguin.png" alt="" /><p><span>Penguin</span>Vestibulum ante <a href="#url">ipsum primis</a> in faucibus orci luctus et ultrices posuere cubilia.</p>
<div class="sub odd"><img src="https://sites.google.com/site/archivesiugi/javascr/my_mac.png" alt="" /><p><span>My Mac</span>Aenean consectetur mi vel <a href="#url">ante congue</a> congue. Integer at augue quam.</p>
<div class="sub even"><img src="https://sites.google.com/site/archivesiugi/javascr/xchat.png" alt="" /><p><span>Chat</span>Aenean interdum <a href="#url">interdum</a> nisi, sit amet elementum metus tempus eget.</p>
<div class="sub odd last"><img src="https://sites.google.com/site/archivesiugi/javascr/neotux.png" alt="" /><p><span>New Tux</span>Vivamus massa odio, <a href="#url">posuere</a> at bibendum id, accumsan vitae lorem.</p>
</div></div></div></div></div>
</div>

</div> <!-- end info -->