Jumat, 29 Maret 2013

Make Accordion Selonjor Ser-Ser

Trik ini dibuat perpaduan tutorial antara accordion use css3 dan accordion with css3 transitions! Versi pertama markup HTML menggunakan input type checkbox, sedang versi kedua pemakaian trik hover dalam membuka konten. Intinya fitur accordion ya memang seperti itu, tutup buka (show hide) Yuk kita mix kedua jenis tut's accordion tersebut menjadi auto hover ketika membuka konten bukan memakai tag input check-box, memakai icon panah murni pakai CSS!
Bingung juga bagian menerangkan dengan kata-kata. Soalnya Koben jg belajar secara otodidak, harap maklum deh jadinya yaaa...eik eik eik :p Selagi ada live demo, pasti deh bakal paham apa yang dimaksudkan :)
DEMO
Bayangkan hanya dengan trick ini, sobat dapat memiliki banyak area tersembunyi untuk menanamkan gadget apapun (HTML/Javascript)
<ul id="lonjor">
<li class="dropdown">
<h2>TITLE 1<span class="bullet"></span></h2>
<div>
BLAH-BLEH-BLOH I
</div>
</li>
<li class="dropdown">
<h2>TITLE 2<span class="bullet"></span></h2>
<div>
BLAH-BLEH-BLOH II
</div>
</li>
<li class="dropdown">
<h2>TITLE 3<span class="bullet"></span></h2>
<div>
BLAH-BLEH-BLOH III
</div>
</li>
<li class="dropdown">
<h2>TITLE 4<span class="bullet"></span></h2>
<div>
BLAH-BLEH-BLOH IV
</div>
</li>
<li class="dropdown">
<h2>TITLE 5<span class="bullet"></span></h2>
<div>
BLAH-BLEH-BLOH V
</div>
</li>
</ul>
ul#lonjor {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
border-radius: 5px;
}
.dropdown h2 {
font-size: 18px;
color: #eee;
cursor: pointer;
background: #000;
border-radius: 5px;
padding: 3px 5px;
margin: 5px 0;
}
ul#lonjor li span.bullet {
width: 0px;
height: 0px;
float: right;
margin-top: 0;
border-width: 6px;
border-style: solid;
border-color: transparent transparent #FFF;
border-image: none;
}
ul#lonjor li div {
height: 0px;
opacity: 0;
overflow: hidden;
margin: 0 7px;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
ul#lonjor li div {
font-size: 13px;
}
ul#lonjor li:hover div {
opacity: 1;
height: 150px;
overflow: auto;
}
ul#lonjor li.dropdown:hover span.bullet {
margin-top: 8px;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
Demikian tutorial membuat accordion selonjor ser-ser pure 100% memakai atribut CSS3 :)
Happy coding \m/

Tidak ada komentar:

Posting Komentar