Sekali lagi..., meskipun belum lama berselang kita telah bahas pembuatan Vertical Accordion Menu dengan judul "Animated jQuery Accordion Menu Serba Guna", karena salah seorang sobat blogger menanyakan tentang bagaimana membuat vertical accordion seperti yang digunakan di blog ini, maka kita akan bongkar seluruh javascript dan kode css yang membentuk fungsi vertical accordion ini agar para sobat blogger bisa membandingkan keduanya. Meskipun kalau ditilik dari fungsi sebenarnya hampir tidak banyak perbedaan, namun sebenarnya jika ditinjau dari javascriptnya, maka akan kita lihat beberapa perbedaan, baik dari bentuk script maupun besar script yang digunakan.
Javascript maupun kode CSS yang nantinya kita perlihatkan, hampir tidak ada pengurangan atau penambahan dari kode aslinya, hanya beberapa kode CSS saja yang dirubah dengan pertimbangan supaya hasil akhir bentuk accordion akan sama disemua blog. Hal yang terpaksa dilakukan karena tanpa perubahan maka hasil yang didapat pastilah akan berbeda dengan bentuk accordion seperti yang terlihat di samping (beberpa kode css secara terpadu dipekerjakan juga untuk fungsi lain di keseluruhan blog!).
JQuery-1.3.2.min.js masih menjadi pilar utama bekerjanya accordion, yang dipadukan dengan sejumlah script lain hingga dapat membentuk sebuah fungsi dinamis dengan bentuk tampilan yang terbangun sepenuhnya melalui beberapa kode css dan background image.
jquery dan Javascript pembentuk jQuery Vertical Accordion Menu
Silahkan letakkan dan simpan di atas kode <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src='http://h1.ripway.com/lefrans/ddaccordion.fR.js' type='text/javascript'></script>
<script type="text/javascript">
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 ]]></b:skin>.
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://i1214.photobucket.com/albums/cc489/Gray_December/album%20gmbr%20blog/fr2.png) 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://i1214.photobucket.com/albums/cc489/Gray_December/album%20gmbr%20blog/bg06.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://i964.photobucket.com/albums/ae124/gubhugreyot/Arrow/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:red;
color: #3a3838;
}
.molormenu ul li a:hover{
color:yellow;
background-color: black;
}
Kode HTML jQuery Vertical Accordion Menu
<div style="background:#222;padding:2px;border:1px solid 666;">
<div align="center" style="background:#2f4274 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6MKA9xD8j7ijYwvFnTq79zWWjHppRBUNR5SoLKosfbl4f_bq6e8dUvOqxrvUC5dkg8e2hwgP76zQkQLdd80rI1E8T-f_duq6krvEuQXWBfakqqfuJ9hp59uh58M7aKeNTUTEpKST0o2U/s320/m9of1t.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>
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.
<script src='http://h1.ripway.com/lefrans/ddaccordion.fR.js' type='text/javascript'></script>
<script type="text/javascript">
Pilih Salah Satu
<script type="text/javascript">
0 komentar:
Posting Komentar
silahkan tinggalkan komentar