[英]Sliding a div without moving neighbouring content
我正在尝试创建一个侧栏,当用户单击按钮时,该侧栏将滑入并显示内容。
我遇到的问题是单击标题,正文和页脚上的所有内容时都已移动。
我希望滑动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>
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>
您应该将位置设为绝对,并保持切换按钮可用。
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>
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'});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.