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
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe6-z-J_rXB1ujX_J9nPPy5UjeMSqRYNPTbm7ugyOhwqExpxDdGudNfDaQhbFfYFmoRzMPYYJVSKngP0c4se1KLXQJevGgYxgH1_CcnVGfUtuVVOFeCAoCFYoNVwXsp9Pf-0dptFwVfrU/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>
Tidak ada komentar:
Posting Komentar