Cara Membuat Accordion Effect Untuk Sidebar

Beberapa teman menanyakan bagaimana cara membuat sidebar accordion effect seperti yang ada di menu sidebar TemplatePanic.com. Jadi daripada menjawab satu-persatu, saya akan mempostingkan tutorial ini di sini.

Download mootools.release.83.js. Lalu upload file tersebut ke directory utama anda, sehingga menjadi http://www.NamaBlogAnda.com/mootools.release.83.js

Masukkan kode berikut ke stylesheet anda:
#box1 h2 {
display:block;
cursor:hand;
margin: 0 0 18px 0;
background: #ffffff;
font: 1.05em Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding: 9px 0px 12px 24px;
color: #32474B;
}


#box1 h2:hover
{
opacity:.75;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
}


.box p {
margin-left: 18px;
}

Taruh kode berikut ini di header, yaitu antara <head> dan </head>:

<script type="text/javascript" src="https://www.NamaBlogAnda.com/mootools.release.83.js"></script>
<script type="text/javascript">


function sliderinit() {
var ht = $S('htmlcode');


var htmlSlider = new Fx.Slide('htmlcode', {
duration: 500,
onComplete: function(){
if (this.now[0] > 0) this.wrapper.setStyle('height', '');
}
});


var jsSlider = new Fx.Slide('jscode', {
duration: 500,
onComplete: function(){
if (this.now[0] > 0) this.wrapper.setStyle('height', '');
}
});


jsSlider.hide();
htmlSlider.hide();


$('showhtml').addEvent('click', function(){htmlSlider.toggle();});
$('showjs').addEvent('click', function(){jsSlider.toggle();});
}


function accordioninit(){
var trig = $S('.trigger');
var box = $S('.slider');
var ac = new fx.Accordion(trig, box, {'alwaysHide' : true, 'start': 'all-closed'});
}


Window.onDomReady(function(){
accordioninit();
sliderinit() ;
});

Terakhir, masukkan kode berikut ke sidebar:

<div id="box1" class="box">
<h2 class="trigger">Links</h2>
<div class="slider">
<p>
<ul>
<li><a href="http://www.templatepanic.com">TemplatePanic: Free Blog Templates</a></li>
<li><a href="http://www.1001MovieBox.com/">1001 Movie Box</a></li>
<li><a href="http://www.1001ChristianClipart.com/?s=webhosting">1001 Christian Clipart</a></li>
</ul>
</p>
</div>

6 comments Add yours
  1. mohon lebih diperjelas dong mba, soalnya pemula ni,..setelah ngedownload “mootools biar masuk Url:,…ga tahu saya alias buntu mohon di penjelasanya ya mba makasih sebelumnya

Leave a Reply to kutulis Cancel reply

Your email address will not be published. Required fields are marked *