在不移动相邻内容的情况下滑动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'}); 
    }); 
});