Cara Membuat Menu Tab Accordion

Share :

Tweet

Cara Membuat Menu Tab Accordion - Bentuk menu accordion ini sangat menarik, dan sangat cocok untuk di pasang di blog sobat. Karena tab ini menggunakan animasi sliding. Dan juga cara pemasangannya cukup mudah.... Bagi sobat blogger yang berminat memasang Menu Tab Accordion bisa mengikuti langkah-langkah di bawah ini.


1. Login ke akun blogger sobat.
2. Klik Rancangan > Add Widget > HTML/Javascript
3. Lalu Copy Paste script di bawah ini

<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#0e0e0e;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</style>
<script type="text/javascript" src="http://javscript-code.googlecode.com/files/menuaccordion.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mousedown(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">JUDUL TAB</h5>
<div class="msg_body">
ISI TAB MENU
</div>
<h5 class="msg_head">JUDUL TAB</h5>
<div class="msg_body">
ISI TAB MENU
</div>
<h5 class="msg_head">JUDUL TAB</h5>
<div class="msg_body">
ISI TAB MENU
</div>
<h5 class="msg_head">JUDUL TAB</h5>
<div class="msg_body">
ISI TAB MENU
</div>
</div>

4. Ganti JUDUL TAB dengan judul tab menu yang sobat inginkan. dan Ganti ISI TAB MENU dengan isi tab menu yang sobat inginkan.

Nah, itu dia sob Cara Membuat Tab Accordion, untuk DEMO nya bisa di lihat di sidebar saya.

Semoga Bermanfaat

^_^

Tag : Blogging