用相對位置div重新調整大小

我一直在玩這個有點，並不能完全弄清楚所以...用相對位置div重新調整大小

我有什麼本質上是一個滑動邊欄。

初始狀態看起來像這樣。

#sidebar { 
    position: fixed, 
    width: 200px 
}

另一種狀態是：

#sidebar { 
    position: fixed, 
    width: 200px, 
    left: -190px 
}

我想另一個是這種填充屏幕上的剩餘空間的權利。這應該也是動態的，所以當＃側欄被切換時，它會重新調整大小以便隨時填充空間。

注意：css更改爲#sidebar的動畫也是使用$ .animate，所以它應該隨着側邊欄重新調整大小而重新調整大小。

有沒有一種很好的方法來做到這一點與CSS。或者，是否有一個用於滑入/滑出邊欄的良好jscript/jquery庫。我看了卻找不到一個，所以我開始自己動手。

我能想到的唯一方法是用jscript手動調整其他尺寸，同時重新定位#sidebar。但這似乎過分殺人。

來源

2013-02-24 Roger

我認爲它可以使用表單元素來維護狀態，但我寧願用Javascript來管理UI。以下是CSS中水平手風琴的CSS示例http://jsfiddle.net/m_raffaele/Fzuz7/ – 2013-02-24 16:45:55

下面是一個例子：

CSS：

#sidebar 
{ 
    position: fixed; 
    width: 200px; 
    background-color:#9cf; 
    left:0; 
} 
#sidebar.tucked { left: -190px; } 
#content 
{ 
    margin-left:200px; 
} 
#content.tucked { margin-left:10px; }

的Javascript：

$(function() 
{ 
    $('#sidebar').on("click", function() 
    { 
     $('#sidebar, #content').toggleClass("tucked", 1000); 
    }); 
});

小提琴：http://jsfiddle.net/w9aWp/

來源

2013-02-24 16:43:29 Plynx

我已經把基於一個類似的項目這個小提琴我曾在：http://jsfiddle.net/DrdHJ/

基本上我只是有兩列：

<div id="sidebar"> 

    <a class="resize" data-width="300">Large</a> 
    <br> 
    <a class="resize" data-width="200">Small</a> 

</div> 

<div id="main"></div>

#sidebar是你的「滑」列，#main是其中包含的內容您的主要街區。

然後對CSS，我有以下：

html, body { width: 100%; height: 100%; } 

#sidebar { 
    width: 200px; 
    height: 100%; 
    float: left; 
    background-color: red; 
} 

#main { 
    width: auto; 
    height: 100%; 
    margin-left: 200px; 
    background-color: blue; 
}

需要注意的重要一點是，margin-left上#main就是到位保持英寸

然後對JavaScript我有以下幾點：

$('.resize').on('click',function(){ 

    var width = $(this).data('width'); 

    $('#sidebar').css('width',width+'px'); 
    $('#main').css('margin-left',width+'px'); 

});

這對於以調整事件監聽，然後調整#sidebar的基礎上的的data-width屬性的寬度和保證金左的#main偏移鏈接點擊。這顯然可以調整，以animate取代css()。

來源

2013-02-24 16:45:18 Fluidbyte

用相對位置div重新調整大小

回答

相關問題