滑動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

您應該將位置設為絕對，並保持切換按鈕可用。

  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： http : //jsfiddle.net/tsmpraym/27/

在菜單div內，您可以添加另一個關閉按鈕：

<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'}); 
  });
});