- 2008-04-13 (日) 18:50
- MooTools
引き出しみたいなメニューっぽいものを作るサンプル。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも
実際やってみると分かるが、Fx.Slide要素にリストメニュー等をくっつけてタブっぽくさせると、
動かしたとき微妙に隙間が出来てしまう。（横方向にくっつけた場合は出来ない。）
それで色々考えた結果、position駆使すれば出来るじゃない、という結論が出た。
HTML:
CSS:
-
#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;
-
}
JavaScript:
-
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で移動した時の隙間が出来ないようにしている。
関連記事
- Newer: [CSS]Safari3.X用CSSハック
- Older: [CSS]透過PNGと透過フィルターの使い方
