[mootools]タブとFx.Slideの合わせ技

引き出しみたいなメニューっぽいものを作るサンプル。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも

実際やってみると分かるが、Fx.Slide要素にリストメニュー等をくっつけてタブっぽくさせると、
動かしたとき微妙に隙間が出来てしまう。（横方向にくっつけた場合は出来ない。）
それで色々考えた結果、position駆使すれば出来るじゃない、という結論が出た。

<div id="slide">
<div id="box">
<p>this is sample text.</p>
</div>
<div id="button"></div>
</div>

#slide { 
	left: 0px;
	top: 34px;
	position:absolute;
	height:30px;
}
#box { 
	left: 0px;
	top: 0px;
	z-index: 2;
	width: 200px;
	height:30px;
	background: #ccc;
	margin:0;
	position:relative;
}
#button {
	cursor: pointer;
    margin-left: 35px;
	text-align: center;
	height: 30px;
	position:absolute;
	width: 100px;
	background-color:#333333;
	z-index:1;
	top:31px;
}

var fx = function(box) {	
	var fx = new Fx.Style(box, {
		duration: 500
	})
}
window.addEvent('domready', function(){
 var mySlide = new Fx.Slide('slide', {mode: 'vertical'}).hide();
	$('button').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		fx(mySlide);	
		e.stop();
	});
});

position:abusoluteで移動した時の隙間が出来ないようにしている。