Membuat Pure CSS3 Vertical Accordion Menu (Tanpa Javascript Atau jQuery)
Masih Lanjutan dari postingan sebelumnya, kali ini saya masih akan ngajak anda untuk membuat "Accordion Menu" dengan Pure CSS3, cuma klo sebelumnya kan yang kita buat versi Horizontalnya tuh, nha kali ini saya mau ngajak anda untuk membuat versi Verticalnya hhe... Dan klo anda belum baca postingan yang Horizontal mending anda baca dulu deh biar nyambung sama postingan yang ini.
Ocre, bentuknya kaya gambar diatas, atau klo mau liat langsung silahkan menuju Link Demo dibawah ini:
Terus gimana cara membuatnya?
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:
]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:
/*------------------------------------*\
ACCORDION
\*------------------------------------*/
.accordion{
width:940px;
overflow:hidden;
list-style:none;
margin-bottom:10px;
text-shadow:1px 1px 1px rgba(0,0,0,0.25);
}
.accordion li{
float:left;
width:20%;
overflow:hidden;
height:250px;
-moz-transition:width 0.2s ease-out;
-webkit-transition:width 0.2s ease-out;
-o-transition:width 0.2s ease-out;
transition:width 0.2s ease-out;
}
.accordion li:first-of-type{
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-o-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
}
.accordion li:last-of-type{
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
}
.accordion div{
padding:10px;
}
.accordion:hover li{
width:10%;
}
.accordion li:hover{
width:60%;
}
.slide-01 { background:red; color:white; }
.slide-02 { background:orange; color:white; }
.slide-03 { background:yellow; color:#333; text-shadow:none; }
.slide-04 { background:green; color:white; }
.slide-05 { background:blue; color:white; }
.accordion:hover li{
width:10%;
}
.accordion li:hover{
width:60%;
}
6. Coba perhatikan kode CSS diatas, koQ bentuk dan variabel yang saya buat sama aja ya sama yang sebelumnya? aneh gak sih? terus jadinya Horizontal lagi donk? nha saya cuma mau nunjukkin ke anda bahwa Kode CSS diatas itu Kode CSS dasar yang saya gunakan dan secara default yang kebentuk ya si Accordion Horizontal, untuk itu silahkan lanjutkan dengan menambahkan Kode CSS berikut dibawah kode CSS diatas:
/*------------------------------------*\
VERTICAL
\*------------------------------------*/
#vertical{
height:300px;
}
#vertical li{
float:none;
height:20%;
width:100%;
-moz-transition:height 0.2s ease-out;
-webkit-transition:height 0.2s ease-out;
-o-transition:height 0.2s ease-out;
transition:height 0.2s ease-out;
}
#vertical li:first-of-type{
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
-o-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;
}
#vertical li:last-of-type{
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
-o-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
}
#vertical:hover li{
height:10%;
width:100%;
}
#vertical li:hover{
height:60%;
width:100%;
}
7. Klo udah silahkan beralih, dan seperti yang biasa saya tanyakan, mending pikir dulu deh mau taro dimana hhe... saya mau nyruput kopi lagi ya haha...
8. Udah? klo menurut anda Accordion ini lebih tepat jadi Widget Silahkan letakkan HTML yang akan saya berikan setelah ini di Edit Laman > Add Gadget atau klo anda lebih minat meletakkannya ditempat yang suka-suka anda dibawah postingan, diatas postingan atau bahkan pengganti postingan hha.... silahkan Cari kode <body>, dan letakkan HTML dibawah ini setelah Kode <body> tersebut atau tepat dibawahnya:
<ul class="accordion" id="vertical">
<li class="slide-01">
<div>
<h2>Slide one</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</div>
</li>
<li class="slide-02">
<div>
<h2>Slide two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</div>
</li>
<li class="slide-03">
<div>
<h2>Slide three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</div>
</li>
<li class="slide-04">
<div>
<h2>Slide four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</div>
</li>
<li class="slide-05">
<div>
<h2>Slide five</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
</div>
</li>
</ul>
9. Sekarang Silahkan ubah kalimat diatas dengan widget atau apapun yang anda inginkan
10. Save Template anda dan lihat hasilnya...
Selamat Mencoba...
Keterangan: Untuk ng'ganti lebarnya silahkan ganti angka di Width yang saya kasih warna merah, dan klo gak suka dengan warna Background yang saya hadirkan silahkan ganti warna yang udah saya bikin warna-warni diatas dengan warna yang anda inginkan atau klo mau lebih spesifik pake aja Kode Warna Hexa.
cara yang bagus.,...
BalasHapus@ adjie purbojati : makasih mas.. :)
BalasHapuswah keren mas,hehe
BalasHapuscara yang bagus dan unik