Javascript 侧边栏将幻灯片切换到右侧

下面是我的代码：

HTML

JS

JSFIDLE如下所示：

正如你们所看到的，当我按下链接时，它是一个侧边栏滑向右侧。当我按下它时，它会挤压屏幕右侧的内容

---

我想要的是内容的右侧滑动到屏幕后面的右侧，而不是将所有内容挤在一起。有什么想法吗？

给

包装

元素指定固定的

宽度作为
视口的宽度

用于设置宽度

视口宽度的1/100




$（“#菜单切换”）。单击（功能（e）{
e、 预防默认值（）；
$（“#包装器”）.toggleClass（“toggled”）；
});
*{
保证金：0；
填充：0；
}
#包装纸{
宽度：100vw；
左侧填充：0；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
#包装器。切换{
左侧填充：250px；
}
#边栏包装{
z指数：1000；
位置：固定；
左：250px；
宽度：0；
身高：100%；
左边距：-250px；
溢出y：自动；
背景#050545；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
盒影：嵌入-10px 0px 10px-7px灰色；
}
#wrapper.toggled#侧栏包装器{
宽度：250px；
}

边栏
这对我个人来说是一个严重的健康挫折，但CN的核心优势之一是我们有一位经验丰富、组织严密的高级管理人员
如果他想扩展
背景色
的话，包装纸的样式也一样。左边的黄色怎么样？当它滑到左边时，它似乎也挤压了内容。如何将其隐藏在下面？@Coolguy然后您可以使用
animate（）
来设置侧边栏左侧的
动画
<div id="wrapper" style="background-color:red">
    <div id="sidebar-wrapper" style="background-color:yellow">sidebar
        <div id="result"></div>
    </div>
     <div id="header" class="container-fluid">
        <div class="navbar">
            <a href="#menu-toggle" id="menu-toggle" >Press</a>    
            <div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior  <span id="counterId"></span></div>
        </div>
    </div>
  </div>

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled {
    padding-left: 250px;
}
#sidebar-wrapper {
    z-index: 1000;
    position: fixed; 
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y:auto;
    background: #050545;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    box-shadow: inset -10px 0px 10px -7px grey;
}
#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});

#wrapper {
  ...
  width: 100vw; // vw: Viewport width when page is loaded
}