固定側欄重疊固定標題

Question

嗨我有一個標題是固定的位置和寬度100％，我也有一個從左側滑出的側欄，它也是固定的位置。問題是側欄與頁眉重疊，我希望頁眉隨着側欄滑出而縮小。我認爲它會自然而然地做到這一點，因爲它被設置爲寬度100％。但事實並非如此。

任何想法？

由於

部首

#header_wrapper{ 
    width:100%; 
    height: 50px; 
    /*background-color: #dddddd;*/ 
    background-color: #2a5f8c; 

    border-bottom: 2px solid #ffffff; 
    float: left; 
    position: fixed; 
    z-index: 80; 
    border-bottom: 1px solid #444444; 

} 

邊欄

#category_wrapper{ 
    width: 200px; 
    height: 100%; 
    position: fixed; 
    float: left; 
    border-right: 3px solid #333; 
    display: none; 
} 

Jquery的

$("#header_category").click(function() {   
    $('#category_wrapper').toggle(200); 
}); 

HTML

<div id="category_wrapper"></div><!--end category_wrapper-->   
<div id="header_wrapper"></div><!--end header_wrapper--> 

Answer 1

然後將標題的寬度設置爲100％，您可以將左側屬性設置爲0px，將右側屬性設置爲0px，然後當菜單滑出時，可以將左側屬性設置爲左側寬度菜單，然後當它返回到零的動畫。動畫的

例如：

$("#category_wrapper").animate({ 
    left: 200, 
    }, 200, function() { 
    // Animation complete. 
    });