MENU ACCORDIAN DENGAN CSS3 6

Untuk membuat menu accordian dengan css3, sistemnya hampir sama dengan postingan membuat sub menu dengan css3,
jadi disini aku gak akan jelasin dari awal, tetapi hanya akan aku tampilkan kode HTML maupun CSS3-nya.


Untuk melihat DEMO-nya bisa dilihat di Link ini.


Hal pertama adalah membuat kode HTML-nya seperti dibawah ini :

<ul id="menuq-wrap">
<li class="menuq">About Me
<ul>
<li><a href="http://id-id.facebook.com/karsono.sajah">Facebook</a></li>
<li><a href="http://twitter.com/#!/karsono">Twitter</a></li>
<li><a href="http://id.linkedin.com/in/karsono">Linkedin</a></li>
</ul>
</li>
<li class="menuq" style="border-top:1px solid #000; border-bottom:1px solid #000">Kategori
<ul>
<li><a href="http://www.karsono.co.cc/search/label/ACCES">Acces</a></li>
<li><a href="http://www.karsono.co.cc/search/label/Curahan%20Hati">Curahan Hati</a></li>
<li><a href="http://www.karsono.co.cc/search/label/Domain%20dan%20Host%20Gratis">Domain dan Host Gratis</a></li>
<li><a href="http://www.karsono.co.cc/search/label/Free%20Template">Free Template</a></li>
<li><a href="http://www.karsono.co.cc/search/label/Generator%20Kode%20HTML">Generator Kode HTML</a></li>
<li><a href="http://www.karsono.co.cc/search/label/Macro%20Excel">Macro Excel</a></li>
<li><a href="http://www.karsono.co.cc/search/label/Tips%20Excel">Tips Excel</a></li>
<li><a href="http://www.karsono.co.cc/search/label/Trick%20Blog">Trick Blog</a></li>
</ul>
</li>
<li class="menuq">Another Blog
<ul>
<li><a href="http://twittin.blogspot.com">Twittin</a></li>
<li><a href="http://forum.karsono.co.cc">Forum</a></li>
<li><a href="http://www.sedulur.co.cc">sedulur</a></li>
</ul>
</li>
</ul>

Selanjutnya, tinggal memasang kostumnya, dengan kode css, seperti dibawah :

#menuq-wrap { background: #F6F5F1; margin: 50px 0 0 0; width: 190px; border:1px solid #ccc; -moz-border-radius: 15px;
border-radius: 15px; padding-bottom:10px; -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 5px #888;}
.menuq { padding-left:10px; margin-left:-30px; background: #F6F5F1;overflow: hidden;-webkit-transition: height 1s ease-in-out; font-size: 22px; font-weight: bold; color: #000; cursor: pointer; height: 50px; width: 200px; line-height: 50px;}
.menuq:hover { height: 208px;}
.menuq ul li{list-style: none; margin: 2px 0 0 -50px; }
.menuq ul li a{ background: #8bb2cf; padding-left:10px; display: block; height: 50px; width: 200px; text-decoration: none; font-weight: normal; }
.menuq ul li a:hover{ color:#fff; background:#CC716A; -webkit-transition: padding 1s ease-in-out; padding-left: 50px;}

Selesai, untuk hasil yang memuaskan, bisa dilihat pada browser google chrome... karena pada kode CSS3, aku pake kode transition, jadi akan lebih atraktif bila dilihat pada google chrome... hidup google.