在不移動相鄰內容的情況下滑動div

Question

我正在嘗試創建一個側欄，當用戶單擊某個按鈕時它將滑入並顯示內容。

我遇到的問題是當它點擊標題上的所有內容時，正文和頁腳正在移動。

我想滑動div來點擊時無需移動它的菜單和內容上滑動，創造一個覆蓋

檢查小提琴http://jsfiddle.net/livewirerules/tsmpraym/9/

下面是我到目前爲止已經試過

jQuery(document).ready(function($) { 
 
    $("#side").click(function() { 
 
     $('#slidable').animate({ 
 
      width: 'toggle' 
 
     }); 
 
    }); 
 
})

#menu { 
 
    background-color: green; 
 
    height: 100px; 
 
} 
 

 
#footer { 
 
    background-color: blue; 
 
    height: 100px; 
 
} 
 

 
#content { 
 
    background-color: red; 
 
    height: 400px; 
 
} 
 

 
#side { 
 
    float: left; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #BBB; 
 
} 
 

 
.hide { 
 
    display: none; 
 
} 
 

 
#slidable { 
 
    float: left; 
 
    height: 200px; 
 
    background: #888; 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<div id="slidable" class="hide">Foobar</div> 
 
<div id="side">+</div> 
 

 
<div id="menu"> 
 
    the menu 
 
</div> 
 
<div id="content"> 
 
    content 
 
</div> 
 

 
<div id="footer"> 
 
    the footer 
 
</div>

Answer 1

jQuery(function($) { // yep. DOM ready 
 
    
 
    $("#side").click(function() { 
 
    $('#slidable').toggleClass("open"); 
 
    }); 
 
    
 
})

body{margin:0;} /* yey? */ 
 

 
#menu { 
 
    background-color: green; 
 
    height: 100px; 
 
} 
 
#footer { 
 
    background-color: blue; 
 
    height: 100px; 
 
} 
 
#content { 
 
    background-color: red; 
 
    height: 400px; 
 
} 
 
#side { 
 
    /*float: left; huh? */ 
 
    position:absolute; /* add this */ 
 
    left:100%;   /* add this */ 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #BBB; 
 
} 
 
/*.hide { display: none;} */ 
 
#slidable { 
 
    /*float: left; why but why */ 
 
    position: fixed; /* add this */ 
 
    top:0; 
 
    height: 100vh; 
 
    background: #888; 
 
    width: 200px; 
 
    right: 100%; /* add this */ 
 
    transition: 0.4s; 
 
} 
 
#slidable.open{ 
 
    right: calc(100% - 200px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 

 
<div id="slidable"> 
 
    Foobar 
 
    <div id="side">+</div> 
 
</div> 
 

 

 
<div id="menu"> 
 
    the menu 
 
</div> 
 
<div id="content"> 
 
    content 
 
</div> 
 

 
<div id="footer"> 
 
    the footer 
 
</div>

Answer 2

你應該把位置絕對和保持availab也可以使用切換按鈕。

jQuery(document).ready(function($) { 
 
    $("#side").click(function() { 
 
    $('#slidable').animate({width: 'toggle'}); 
 
    $('#side').toggleClass('keepRight'); 
 
     }); 
 
    })

#menu { 
 
    background-color:green; 
 
    height:100px; 
 
} 
 

 
#footer { 
 
    background-color:blue; 
 
    height:100px; 
 
} 
 

 
#content { 
 
    background-color:red; 
 
    height:400px; 
 
} 
 
#side{ 
 
    float:left; 
 
    width:50px; 
 
    height:50px; 
 
    background:#BBB; 
 
    transition: all .5s; 
 
    transition-timing-function: swing; 
 
} 
 
.keepRight{ 
 
    margin-left: 200px; 
 
    transition: all .5s; 
 
    transition-timing-function: swing; 
 
} 
 

 
.hide{ 
 
    display:none; 
 
} 
 

 
#slidable{ 
 
    float:left; 
 
    height:200px; 
 
    background:#888; 
 
    width:200px; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div id="slidable"class="hide">Foobar</div> 
 
<div id="side">+</div> 
 
<div id="menu"> 
 
the menu 
 
</div> 
 
<div id="content"> 
 
content 
 
</div> 
 
    <div id="footer"> 
 
    the footer 
 
    </div>

Answer 3

CSS屬性position:absolute;將菜單位置絕對在其他元素之上。這樣它就不會重新流動它下面的元素的內容。

http://www.w3schools.com/css/css_positioning.asp

然而，在你的榜樣，這會抵消用於打開它的按鈕。您可能想要添加一個內部按鈕來關閉它。

我已經更新您的jsfiddle：

<div id="slidable"class="hide">Foobar<div id="close">+</div></div> 

您可以通過附加其ID相同屬性添加到它（或重構爲：

格您可以添加其他關閉按鈕，裏面的菜單一個共同的階級，而不是ID）：

#side, #close{ 
    float:left; 
    width:50px; 
    height:50px; 
    background:#BBB; 
} 

爲了讓掛完的一面，你可以把它帶負權值絕對定位：

#close { 
    position: absolute; 
    top:0px; 
    right:-50px; 
} 

關閉按鈕也需要觸發切換：

jQuery(document).ready(function($) { 
    $('#side').click(function() { 
    $('#slidable').animate({width: 'toggle'}); 
    }); 
    $('#close').click(function() { 
    $('#slidable').animate({width: 'toggle'}); 
    }); 
});