Effi Haryanti » Javascript http://www.effiharyanti.com Once In A Lifetime Wed, 28 Dec 2011 15:30:27 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Cara Membuat Accordion Effect Untuk Sidebar http://www.effiharyanti.com/cara-membuat-accordion-effect-untuk-sidebar/ http://www.effiharyanti.com/cara-membuat-accordion-effect-untuk-sidebar/#comments Fri, 04 May 2007 01:57:36 +0000 Effi http://www.effiharyanti.com/cara-membuat-menu-accordion/ Read more...]]> 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="http://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>

]]> http://www.effiharyanti.com/cara-membuat-accordion-effect-untuk-sidebar/feed/ 3