Membuat Pure CSS3 Horizontal Accordion Menu (Tanpa Javascript Atau jQuery)
Text Resizer: Click for Resizer
Ocre, kali ini saya mau kembali ngajak anda main-main sama CSS3. Tepatnya, kali ini saya mau ngajak anda untuk membuat . Untuk yang gak tau apa itu "Accordion Menu", silahkan bayangkan sebuah "Harmonika Tangan" . Biar lebih gampang silahkan perhatikan gambar dibawah ini:Nha,
Accordion Menu punya bentuk yang saya asumsikan mirip dengan bentuk
Harmonika Tangan, yaitu ketika bagian lain dibuka bagian lainnya akan
menutup secara otomatis. Bentuk aslinya bisa anda lihat pada gambar
paling atas atau klo mau liat penampakannya secara langsung silahkan
menuju link demo dibawah ini:Abiz ngeliat demo, pasti anda penasaran donk sama cara bikinnya hhe... Ocre Let's Go...5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode tersebut:6.
Beralihlah, dan silahkan pikirkan dahulu mau ditaruh disebelah mana
Accordion Menu ini. Saya kasih waktu 5 Menit dari sekarang .... aku arep
nyruput kopi 'sik hhe...7. 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 , dan letakkan HTML dibawah ini setelah Kode tersebut atau tepat dibawahnya:8.
Tolong jangan ditanya-tanya apa arti dari kalimat-kalimat diatas,
soalnya itu saya ambil ngawur dari Template-template Free yang beralamat
di btemplates.com haha.. biar agak gaya aja gitu soalnya saya lagi
males ngarang tulisan panjang-panjang hhe... Dan kalimat tersebut bisa
anda ganti dengan Script Widget anda klo mau. Multifungsi sesuai
kebutuhan masing-masing lah haha...9. Klo Udah silahkan Save Template anda dan lihat Hasilnya.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.
Ocre, kali ini saya mau kembali ngajak anda main-main sama CSS3. Tepatnya, kali ini saya mau ngajak anda untuk membuat . Untuk yang gak tau apa itu "Accordion Menu", silahkan bayangkan sebuah "Harmonika Tangan" . Biar lebih gampang silahkan perhatikan gambar dibawah ini:Nha,
Accordion Menu punya bentuk yang saya asumsikan mirip dengan bentuk
Harmonika Tangan, yaitu ketika bagian lain dibuka bagian lainnya akan
menutup secara otomatis. Bentuk aslinya bisa anda lihat pada gambar
paling atas atau klo mau liat penampakannya secara langsung silahkan
menuju link demo dibawah ini:Abiz ngeliat demo, pasti anda penasaran donk sama cara bikinnya hhe... Ocre Let's Go...5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode tersebut:6.
Beralihlah, dan silahkan pikirkan dahulu mau ditaruh disebelah mana
Accordion Menu ini. Saya kasih waktu 5 Menit dari sekarang .... aku arep
nyruput kopi 'sik hhe...7. 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 , dan letakkan HTML dibawah ini setelah Kode tersebut atau tepat dibawahnya:8.
Tolong jangan ditanya-tanya apa arti dari kalimat-kalimat diatas,
soalnya itu saya ambil ngawur dari Template-template Free yang beralamat
di btemplates.com haha.. biar agak gaya aja gitu soalnya saya lagi
males ngarang tulisan panjang-panjang hhe... Dan kalimat tersebut bisa
anda ganti dengan Script Widget anda klo mau. Multifungsi sesuai
kebutuhan masing-masing lah haha...9. Klo Udah silahkan Save Template anda dan lihat Hasilnya.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."Accordion Menu"*Bukan Harmonika mulut
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>
]]></b:skin>
/*------------------------------------*\
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%;
}
<body><body>
<ul class="accordion">
<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>
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.
Comments