各列がブラウザーを完全に埋めることができるように、css テーブルで作成された 3 列のレイアウトがあります。最初の列は実際にはメニューであり、クリックすると左に非表示/移動し、そのスペースを埋めるために中央の列が必要です。実際には画面から完全に移動するのではなく、少し露出したままにして、ユーザーがその領域をクリックしてアニメーションを元に戻すことができるようにする必要があります。
ここに私のフィドルがあります... http://jsfiddle.net/VJmfq/
現在、最初の列は、内部のコンテンツを完全に表示するか、コンテンツの幅を 0px にアニメーション化しない限り移動しないことに気付きました (ただし、列を少し露出させたいので、そのコンテンツを削除したくありません)。
内側のコンテンツの幅を下にアニメーション化しようとしましたが、幅をアニメーション化すると両側から入ってくるので、そのトリックは機能しません.たとえば、内側のコンテンツは最初の列の右側に突き合わせるべきですが、float:right を使用すると中央の列のコンテンツが台無しになるため、最初の行のコンテンツは margin-left を使用して横に配置されます...幅を下にアニメーション化すると、左側からアニメーション化されず、両方から幅が狭くなります同時に側面。
$(document).ready(function() {
$(".two").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ) {
//Show before animation!
$(".one").stop().animate({width:"197px"}, 170);
$(".one div").stop().animate({width:"137px"}, 310, function(){
});
$(this).removeClass("isDown");
} else {
//Hide after animation!
$(".one").stop().animate({width:"10px"}, 310);
$(".one div").stop().animate({width:"5px"}, 310, function(){
});
$(this).addClass("isDown");
}
return false;
});
});
私が言ったように、幅を狭くするだけで内部にコンテンツがなくても移動できますが、提供したコードは内部にコンテンツを入れようとしているため、実際には機能しません。
最初の列のmarginLeft:-185pxと言って中央のセクションを引っ張ることができればいいのですが、CSSテーブルのレイアウトのために列を移動することさえできません