引き出しみたいなメニューっぽいものを作るサンプル。
※このサンプルは前バージョン(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で移動した時の隙間が出来ないようにしている。