滑动div而不移动相邻内容

Question

我正在尝试创建一个侧边栏，当用户单击按钮时，侧边栏将滑入并显示内容。

我遇到的问题是，当它被点击时，页眉、正文和页脚上的所有内容都会被移动。

我希望滑动div滑动到菜单和内容的顶部而不移动它，当点击时创建一个覆盖

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