侧边栏推送内容答案

【问题标题】：Sidebar Push Content侧边栏推送内容
【发布时间】：2019-02-27 11:54:03
【问题描述】：

在触发菜单切换时，我一直试图将我的内容 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>

【问题讨论】：

你想在按下侧边菜单图标时隐藏内容 div 吗？
对于常规桌面视图，不是隐藏，而是滑到一边。基本上，如果侧边栏菜单从右向左滑出，宽度为 200px，则内容 div 应该以相同的动作向左滑出，基本上留下内容 div 边距 -200px。隐藏内容 div 对稍后的移动视图来说会很有趣，但这不是我最初关注的问题。
daneden.github.io/animate.css 用 jQuery 试试这个动画库。很容易实现。只是不要忘记在标题中包含 animate.css 文件:)
谢谢！！会调查的:)

标签： javascript jquery css slidetoggle

【解决方案1】：

我确实添加了这个：

.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>

【讨论】：

没问题。但是你永远不应该用 ID 选择器编写 CSS。尝试改用 CSS 类。我确实重构了我的答案。