• Bm7
    Terima kasih sudah berkunjung xD
Home » » Jquery Vertical Accordion

Jquery Vertical Accordion

Diposting oleh khaidar Senin, 07 November 2011 Label:
Jquery vertical accordion!!!Seperti apa? jawabannya adalah seperti yang tampak pada bagian kiri blog milik saya
seperti gambar di bawah ini
klik :

Nah cara membuat menu seperti gambar diatas dapat dilakukan dengan cara sbb :

Kode dibawah ini Silahkan letakkan dan simpan di atas kode<head>

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


Untuk kode CSS di bawah ini,kamu bisa meletakkan dan menyimpan di atas kode ]]></b:skin>
klik :
/* ---------------
Jquery Molor/acordion
---------------------------------- */
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: -moz-linear-gradient(top, #393E41, #00FFFF);font-weight:bold;line-height:1.4em;margin-bottom:5px;overflow:hidden;white-space:nowrap;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-decoration: none;font: 14px/100% Snap ITC, Times New Roman, Times New Roman;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 1px 1px 4px #AAAAAA;box-shadow: 0 1px 2px rgba(0,0,0,.2);color: #e9e9e9;border: 2px solid white !important;background:#000 url("http://pintarsegala.xtgem.com/ok3-1.gif")repeat center left;
margin-bottom: 5px;
text-transform: uppercase;
padding: 10px 0 10px 10px;
cursor: pointer;
border-bottom:1px solid #666;
}
.molormenu .aktif{
background-image:-moz-linear-gradient(top, #393E41, #00FFFF);font-weight:bold;line-height:1.4em;margin-bottom:5px;overflow:hidden;white-space:nowrap;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-decoration: none;font: 14px/100% Monotype Corsiva, Times New Roman, Times New Roman;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 1px 1px 4px #AAAAAA;box-shadow: 0 1px 2px rgba(0,0,0,.2);color: #e9e9e9;border: 2px solid white !important;background:#000 url("http://pintarsegala.xtgem.com/r85dfm.gif")no-repeat center left;
}
.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://pintarsegala.xtgem.com/image%20jquery/DoubleRedArrow.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:transparent;
color: #3a3838;
}
.molormenu ul li a:hover{
color:red;
background-color:transparent;
}


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.
klik :
<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>



Cara memasang kode HTML dapat dilakukan dengan cara berikut
1.Login keblog sobat
2.Klik rancangan
3.Pilih edit laman
4.Tambahkan gadget
5.Pilih HTML/Javascript
6.Lalu masukkan kode diatas klik save


.: Artikel Terkait :.

0 komentar:

Posting Komentar

Silahkan berkomentar asalkan tidak mengandung SPAM/SARA, jika komentar mengandng spam maka komentar tidak akan ditampilkan atau dihapus oleh admin blog ini. TERIMAKASIH

Langganan: Posting Komentar (Atom)

Facebook