我尝试创建一个侧边栏,当用户点击按钮时,该侧边栏会滑入并显示内容。
我遇到的问题是当它点击标题,正文和页脚上的所有内容时都会被移动。
我希望滑动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>
&#13;
答案 0 :(得分:2)
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>
答案 1 :(得分:1)
您应该将位置置于绝对位置并保持可用的切换按钮。
jQuery(document).ready(function($) {
$( "#side" ).click(function() {
$('#slidable').animate({width: 'toggle'});
$('#side').toggleClass('keepRight');
});
})
&#13;
#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;
}
&#13;
<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>
&#13;
答案 2 :(得分:1)
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'});
});
});