Membuat Menu Accordion

Berikut langkah-langkah membuat accordion menu

jquery dan Javascript pembentuk jQuery Vertical Accordion Menu

Silahkan letakkan dan simpan di bawah kode

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src='http://vertical-accordion-menu.googlecode.com/files/GR_v-accordion-gubhugreyot.js' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
ddaccordion.init({
headerclass: "accordion",
contentclass: "ul_accordion",
revealtype: "click", // "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover"
collapseprev: true,
defaultexpanded: [0],
onemustopen: false,
animatedefault: false, 
persiststate: true,
toggleclass: ["", "aktif"],
togglehtml: ["prefix", "", ""],
animatespeed: "slow", 
oninit:function(headers, expandedindices){
},
onopenclose:function(header, index, state, isuseractivated){
}
})
//]]>
</script>

Kode CSS jQuery Vertical Accordion Menu

Untuk kode CSS, sampeyan bisa meletakkan dan menyimpan di atas
kode ]]>.

h3.selektor accordion{
font-weight: bold;
font-size:14px;
}
.molormenu{
background:#33333;
width:auto;
margin-top:10px;
font-family:Arial;
}
.molormenu .selektor{
font-weight: bold;
font-size:15px;
font-family:Times;
color: #e79958;
background: transparent url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-2.gif) repeat-x center left;
margin-bottom: 5px;
text-transform: uppercase;
padding: 10px 0 10px 10px;
cursor: pointer;
border-bottom:1px solid #666;
}
.molormenu .aktif{
background-image: url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-3.gif);
}
.molormenu ul{
background:transparent;
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px;
}
.molormenu ul li{
padding-bottom: 2px;
}
.molormenu ul li a{
color: #fceada;
background: url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-4.gif) no-repeat center left;
display: block;
padding: 2px 0;
padding-left: 19px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #666;
font-size: 11px;
font-weight:normal;
}
.molormenu ul li a:visited{
background:red;
color: #3a3838;
}
.molormenu ul li a:hover{
color:yellow;
background-color: black;
}
]]>

Kode HTML jQuery Vertical Accordion Menu

Kode HTML yang berisikan link dan nama setiap link menu yang akan ditampilkan di blog disimpan melalui penambahan widget. Sampeyan bisa menggunakan widget di bagian sidebar kanan atau kiri. Silahkan setiap link beserta nama link untuk diganti sesuai kebutuhan blog.

<div style="background:#222;padding:2px;border:1px solid 666;"> 
<div align="center" style="background:#2f4274 url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-1.gif);font-family:Monotype Corsiva;font-size:16px;font-weight:bold; margin:5px; color:#c2d2fa;padding:2px  5px;border:1px solid blue;">CLICK any categories for open!</div>
<div class="clear:both"></div>
<div class="molormenu">

<h3 class="selektor accordion">Menu-1</h3>
<ul class="ul_accordion">

<li><a href="Link-1a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

<h3 class="selektor accordion">Menu-2</h3>
<ul class="ul_accordion">

<li><a href="Link-2a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

<h3 class="selektor accordion">Menu-3</h3>
<ul class="ul_accordion">

<li><a href="Link-3a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

<h3 class="selektor accordion">Menu-4</h3>
<ul class="ul_accordion">

<li><a href="Link-4a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

<h3 class="selektor accordion">Menu-5</h3>
<ul class="ul_accordion">

<li><a href="Link-5a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

<h3 class="selektor accordion">Menu-6</h3>
<ul class="ul_accordion">

<li><a href="Link-6a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

</div>
</div>

Langkah yang harus dilakukan

Penyimpanan Javascript dan Kode CSS

Login : Login to BloGGeR (Login ke BloGGeR) dengan menuliskan User Name (Nama Pengguna) atau Email Address. Tuliskan juga Password atau Sandi
Dasboard (Dasbor) : Setelah memasuki halaman Dasbor, KLIK "Design (Rancangan)".
Design (Rancangan) : KLIK link "Edit HTML"
Backup Template : : Amankan template terlebih dahulu dengan KLIK "Download Full Template (Download Template Lengkap)". Lanjutkan dengan menyimpan (SAVE) file template di "Folder PC".
: Cari kode tersebut dengan menggunakan Ctrl+F untuk memudahkan pencarian kode. Kode terletak di bagian atas "Edit HTML". Letakkan jQuery dan javascript di bawahnya.
]]> : Cari kode ini dan gunakan juga Ctrl+F. Letakkan kode CSS di atasnya.
SAVE Template (Simpan Template) : KLIK SAVE Template/Simpan Template.
Lanjutkan dengan KLIK link "Page Elemen (Elemen Laman)".
Add Gadget : KLIK "Add Gadget (Tambah Gadget)" yang terletak di box dengan garis terputus-putus. Sampeyan bisa gunakan yang di bagian "Sidebar" kanan atau kiri.
Tunggu beberapa saat. KLIK pada "HTML/Javascript". Setelah terlihat box penyimpanan widget, copy dan pastekan kode HTML-nya.
KLIK "SAVE/Simpan" dan lihat hasilnya di dengan membuka blog.

My Blog Dairy

Membuat Menu Accordion

Artikel Terkait:

Post a Comment

Translate

Entri Populer