CSS3 Accordion

Sebuah vertical Accordion dengan kode css & css3 yang sangat luar biasa. Memanfaatkan click function untuk membuka setiap bagian accordion sehingga accordion ini menjadi sangat mempunyai nilai lebih karena animasi saat membuka dan menutup-nya tak ubahnya seperti sebuah accordioan yang dibuat dengan javascript, jQuery atau mootool.

htc code for IE

<public:attach event="onclick" onevent="trigger()" />

<script type="text/javascript">
function trigger(){
	element.document.all("GRaccordMenu").className="";
}
</script>

D E M O

• HOME
• gubhugreyot
• Menu Pertama
  • Menu Pertama-A
  • Menu Pertama-B
  • Menu Pertama-C
  • Menu Pertama-D
  • Menu Pertama-E
• Menu Kedua
  • Menu Kedua-A
  • Menu Kedua-B
  • Menu Kedua-C
• Menu Ketiga
  • Menu Ketiga-A
  • Menu Ketiga-B
  • Menu Ketiga-C
  • Menu Ketiga-D
  • Menu Ketiga-E
  • Menu Ketiga-F
• Menu Keempat
  • Menu Keempat-A
  • Menu Keempat-B
  • Menu Keempat-C
• Menu Kelima
  • Menu Kelima-A
  • Menu Kelima-B
  • Menu Kelima-C
  • Menu Kelima-D
• Menu Keenam
  • Menu Keenam-A
  • Menu Keenam-B
  • Menu Keenam-C
  • Menu Keenam-D
  • Menu Keenam-E
  • Menu Keenam-F
  • Menu Keenam-G
  • Menu Keenam-H
  • Menu Keenam-I
  • Menu Keenam-J
  • Menu Keenam-K
  • Menu Keenam-L
• Menu Ketujuh
  • Menu Ketujuh-A
  • Menu Ketujuh-B
  • Menu Ketujuh-C
  • Menu Ketujuh-D
• Menu Kedelapan
  • Menu Kedelapan-A
  • Menu Kedelapan-B
  • Menu Kedelapan-C
  • Menu Kedelapan-D
• Menu Kesembilan
  • Menu Kesembilan-A
  • Menu Kesembilan-B
  • Menu Kesembilan-C
  • Menu Kesembilan-D
• Menu Kesepuluh
  • Menu Kesepuluh-A
  • Menu Kesepuluh-B
  • Menu Kesepuluh-C
  • Menu Kesepuluh-D

Kode CSS

html{
    -webkit-animation:safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix{
    0%{zoom:1;} 
    100%{zoom:1;}
}
/* trigger for IE */
ul#GRaccordMenu li a.sub, body{behavior:url(http://gubhugreyot-menu.googlecode.com/svn/htc/GRaccord.htc)}
ul#GRaccordMenu{
    border:5px solid #444;
    border-width:12px 3px;
    font-family:arial, sans-serif;
    border-radius:12px 12px 12px 12px;
}
ul#GRaccordMenu, ul#GRaccordMenu ul,ul#GRaccordMenu li{
    padding:0;
    margin:0 auto;
    list-style:none;
    width:220px;
}
ul#GRaccordMenu li a{
    padding:0;
    margin:0;
}
ul#GRaccordMenu ul{
    position:relative;
    z-index:-1;
}
ul#GRaccordMenu li{
    position:relative;
    z-index:100;
}
ul#GRaccordMenu ul li{
    margin-top:-23px;
    transition:0.5s linear 0.5s;
    -o-transition:0.5s linear 0.5s;
    -ms-transition:0.5s linear 0.5s;
    -moz-transition:0.5s linear 0.5s;
    -webkit-transition:0.5s linear 0.5s;
}
ul#GRaccordMenu li a{
    display:block;
    width:205px;
    padding-left:15px;
    background:#666;
    color:#ccc;
    text-shadow:1px 0 1px #000;
    text-decoration:none;
    font-size:12px;
    font-weight:bold;
    line-height:25px;
    outline:0;
}
ul#GRaccordMenu li a.sub{
    transition:background-color 1s,color 1s;
    -o-transition:background-color 1s,color 1s;
    -ms-transition:background-color 1s,color 1s;
    -moz-transition:background-color 1s,color 1s;
    -webkit-transition:background-color 1s,color 1s;
}
ul#GRaccordMenu li a.sub{
    color:#099;
    width:195px;
    background:#666;
    border-top:1px dotted #222;
    border-bottom:1px dotted #666;
    padding-left:25px;
    padding-right:0;   
}
ul#GRaccordMenu li:hover a.sub{
    color:#f00;
    background:#444 url(https://lh4.googleusercontent.com/-6ZeWm4Hvia4/UBf8M7oJGOI/AAAAAAAAC-Y/yUt4mdI7f-M/s128/icon_add_hover.gif) right center no-repeat;
    border-top:1px dotted #222;
    border-bottom:1px dotted #666;
}
ul#GRaccordMenu li a + span{
    display:block;
    width:220px;
    height:25px;
    position:absolute;
    left:0;
    top:0;
    display:none;
    cursor:pointer;
}
ul#GRaccordMenu li a:hover{background-color:#900;}
ul#GRaccordMenu ul li a{
    background:#eee;
    color:#000;
    text-shadow:0 0 1px #fff;
    font-size:11px;
    line-height:22px;
    border-bottom:1px solid #ccc;
}
ul#GRaccordMenu ul li a:hover{background:#aaa;color:#000;}
ul#GRaccordMenu a.sub:focus{outline:0;background:rgba(0,0,0,.7);}
ul#GRaccordMenu a:focus ~ ul li{
    margin-top:0;
    transition:0.5s linear;
    -o-transition:0.5s linears;
    -ms-transition:0.5s linear;
    -moz-transition:0.5s linear;
    -webkit-transition:0.5s linears;
}
ul#GRaccordMenu a:focus + span{display:block;}
ul#GRaccordMenu a.sub:active{outline:0;background:rgba(0,0,0,.7);}
ul#GRaccordMenu a:active ~ ul li{margin-top:0;}
ul#GRaccordMenu a:active + span{display:block;}
ul#GRaccordMenu ul:hover li{margin-top:0;}
ul#GRaccordMenu li span{
    background:url(https://lh4.googleusercontent.com/-a4iA4T0EE-I/UBhDkIhHZaI/AAAAAAAAC_g/pGHeepJZgY0/s128/gr_arrow-down-dynamic-view.png) right center no-repeat;
}

xHTML

<ul id="GRaccordMenu">
<li><a href="http://bestbloggermenus.blogspot.com" target="_blank">HOME</a></li>
<li><a href="http://gubhugreyot.blogspot.com" target="_blank">gubhugreyot</a></li>
<li><a class="sub p1" href="#x" tabindex="1">Menu Pertama</a><ul class="u1">
<li><a href="URL">Menu Pertama-A</a></li>
<li><a href="URL">Menu Pertama-B</a></li>
<li><a href="URL">Menu Pertama-C</a></li>
<li><a href="URL">Menu Pertama-D</a></li>
<li><a href="URL">Menu Pertama-E</a></li>
</ul>
</li>
<li><a class="sub p2" href="#x" tabindex="1">Menu Kedua</a><ul class="u2">
<li><a href="URL">Menu Kedua-A</a></li>
<li><a href="URL">Menu Kedua-B</a></li>
<li><a href="URL">Menu Kedua-C</a></li>
</ul>
</li>
<li><a class="sub p3" href="#x" tabindex="1">Menu Ketiga</a><ul class="u3">
<li><a href="URL">Menu Ketiga-A</a></li>
<li><a href="URL">Menu Ketiga-B</a></li>
<li><a href="URL">Menu Ketiga-C</a></li>
<li><a href="URL">Menu Ketiga-D</a></li>
<li><a href="URL">Menu Ketiga-E</a></li>
<li><a href="URL">Menu Ketiga-F</a></li>
</ul>
</li>
<li><a class="sub p4" href="#x" tabindex="1">Menu Keempat</a><ul class="u4">
<li><a href="URL">Menu Keempat-A</a></li>
<li><a href="URL">Menu Keempat-B</a></li>
<li><a href="URL">Menu Keempat-C</a></li>
</ul>
</li>
<li><a class="sub p5" href="#x" tabindex="1">Menu Kelima</a><ul class="u5">
<li><a href="URL">Menu Kelima-A</a></li>
<li><a href="URL">Menu Kelima-B</a></li>
<li><a href="URL">Menu Kelima-C</a></li>
<li><a href="URL">Menu Kelima-D</a></li>
</ul>
</li>
</ul>