我一直在尝试在触发菜单切换时将内容div向左移动,理想情况下没有跳转但只有推入过渡。内容div应该只在打开的侧边栏的宽度旁边滑动。下面的代码使侧边栏图标始终在视图中,这是我想要的,但是覆盖了内容div。为此,我需要在JQuery函数和CSS中添加什么?
jQuery(function($) {
$("#side").click(function() {
$('#slidable').toggleClass("open");
});
})
#side {
position:absolute;
right:100%;
width: 50px;
height: 50px;
z-index: 1000000;
color:black;
}
#slidable {
position: fixed;
top:0;
height: 100vh;
background: black;
width: 200px;
left: 100%;
transition: 0.4s;
z-index: 1000000;
color:black;
text-align:center;
font-size:25px;
font-weight: 300;
color:white;
}
#slidable.open{
left: calc(100% - 200px);
}
.fa {
font-size:30px!;
margin-top:25px;
color:black;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slidable">
<div id="side" class="icon">
<i class="fa fa-bars"></i>
</div>
<div>
<p>Link 1</p>
<p>Link 2</p>
<p>Link 3</p>
<p>Link 4</p>
<p>Link 5</p>
</div>
</div>
<div id="content">
<p>hallo</p>
</div>
答案 0 :(得分:2)
我确实添加了这个:
.content {
position: relative;
left: 0;
transition: left 0.4s;
}
.slidable.open + .content{
left: -200px;
}
我确实重构为在样式表中使用CSS类作为选择器。
jQuery(function($) {
$("#side").click(function() {
$('#slidable').toggleClass("open");
});
})
.side {
position: absolute;
right: 100%;
width: 50px;
height: 50px;
z-index: 1000000;
color: black;
}
.slidable {
position: fixed;
top: 0;
height: 100vh;
background: black;
width: 200px;
right: 0;
transition: 0.4s;
z-index: 1000000;
color: black;
text-align: center;
font-size: 25px;
font-weight: 300;
color: white;
}
.slidable.open{
right: 200px;
}
.content {
position: relative;
left: 0;
transition: left 0.4s;
}
.slidable.open + .content{
left: -200px;
}
.fa {
font-size: 30px;
margin-top: 25px;
color: black;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slidable" class="slidable">
<div id="side" class="side icon">
<i class="fa fa-bars"></i>
</div>
<div>
<p>Link 1</p>
<p>Link 2</p>
<p>Link 3</p>
<p>Link 4</p>
<p>Link 5</p>
</div>
</div>
<div id="content" class="content">
<p>hallo, give me just a bit more content here</p>
</div>