menu Accordion css3 sederhana

Salah satu fungsi dari menu Accordion adalah dapat meringkas dan juga mempercantik tampilan pada blog sehingga terlihat lebih keren. Karena dengan efek accordion maka yang akan ditampilkan secara utuh hanya satu widget saja sementara yang lain akan tersembunyi. Yang saya share disini, hanya menu sederhana saja. Anda bisa mengutak-atik sesuka hati. jadi blog Anda akan kelihatan lebih ringkas dan rapi.

Untuk Demonya dengan mengarahkan cursor dibawah ini:

• Menu Acordion Vertikal

• Slide Judul 1

  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.

• Slide Judul 2

  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.

• Slide Judul 3

  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.

• Slide Judul 4

  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.

• Slide Judul 5

  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.

• Menu Acordion Horizontal

• Titlebar 1

  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.

• Titlebar 2

  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.

• Titlebar 3

  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.

• Titlebar 4

  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.

• Titlebar 5

  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.

cara membuat menu Accordion css3 dengan sederhana.

1. Masuk ke Blogger.com
2. Klik Tata Letak => Tambahkan Gadget
3. Pilih HTML/JavaScript
4. Copy kode dibawah ini :

• Script untuk Menu Acordion Vertikal

<style type="text/css">
#Vertikal{height:300px}
#Vertikal li{height:20%;width:100%;-moz-transition:height .2s ease-out;-webkit-transition:height .2s ease-out;-o-transition:height .2s ease-out;transition:height .2s ease-out;overflow:hidden;margin-bottom:1px;text-shadow:1px 1px 1px rgba(0,0,0,0.25)}
#Vertikal 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}
#Vertikal 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}
#Vertikal:hover li{height:20%;width:100%}
#Vertikal li:hover{height:auto;width:100%}
.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}
</style>

<ul class="Vertikal" id="Vertikal">
<li class="slide-01">
<div>
<h2>
Slide Judul 1</h2>
<p>Isi konten 1</p></div>
</li>
<li class="slide-02">
<div>
<h2>
Slide Judul 2</h2>
<p>Isi konten 2</p></div>
</li>
<li class="slide-03">
<div>
<h2>
Slide Judul 3</h2>
<p>Isi konten 3</p></div>
</li>
<li class="slide-04">
<div>
<h2>
Slide Judul 4</h2>
<p>Isi konten 4</p></div>
</li>
<li class="slide-05">
<div>
<h2>
Slide Judul 5</h2>
<p>Isi konten 5</p></div>
</li>
</ul>

• Script untuk Menu Acordion Horizontal

<style type="text/css">
.accordion{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%;height:360px;overflow:hidden;-moz-transition:width .2s ease-out;-webkit-transition:width .2s ease-out;-o-transition:width .2s ease-out;transition:width .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:1px}
.accordion:hover li{width:10%}

.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%}
</style>
</li>
</ul>
<ul class="accordion" id="Horizontal">
<li class="slide-01">
<div>
<h2>
Titlebar 1</h2>
<p>Isi konten 1</p>
</div>
</li>
<li class="slide-02">
<div>
<h2>
Titlebar 2</h2>
<p>Isi konten 2</p>
</div>
</li>
<li class="slide-03">
<div>
<h2>
Titlebar 3</h2>
<p>Isi konten 3</p>
</div>
</li>
<li class="slide-04">
<div>
<h2>
Titlebar 4</h2>
<p>Isi konten 4</p>
</div>
</li>
<li class="slide-05">
<div>
<h2>
Titlebar 5</h2>
<p>Isi konten 5</p>
</div>
</li>
</ul>

• Note : Silakan ganti teks berwarna Merah untuk Judul heading menu accordion, teks berwarna Biru : Silahkan Anda isi dengan widget yang akan dipasang (bisa tulisan, script iklan maupun script widget).
• untuk kode css nya dari <style type="text/css"> sampai </style> bisa langsung anda pakai atau silahkan edit sesuai template anda. bisa anda coba edit disini atau langsung pada template sobat.
• Selamat bereksperimen.

5. SIMPAN dan lihat hasilnya.