javascript - 创建可折叠的侧边菜单

Question

我想要达到的效果是: https://gesso-theme.myshopify.com/
当你点击左上角的折叠菜单时。

我坚持并努力实现的事情是:

1.) 当菜单向内移动时，如何使菜单看起来将正文内容向右移动？ (这不是很重要，但很高兴知道)
2.) 为什么隐藏我的正文内容的阴影 div 不能达到浏览器的全宽和全高？
3.) 无论我体内有什么内容，我都希望能够实现这一目标。
4.) 我想在没有插件或 Bootstrap 的情况下实现这一点，只有 javascript、jquery、css 和 html，这样我才能真正理解发生了什么。

$(".show-side-menu").click(function(){
$(".container").toggle();
$(".darkness").toggle();
});

*{
  margin:0;
  padding:0;
}
html, body{
  height: 100%;
    		margin: 0;
}
.container{
height:100%;
width:200px;
background:white;
position:absolute;
top:0;
bottom:0;
display:none;
}
a.show-side-menu{
  background:blue;
  color:white;
  font-size:20px;
  z-index:10;
  position:absolute;
}
.random-content{
height:500px;
width:500px;
margin:10px;
background:purple;
}
.darkness{

  background:rgba(136, 114, 114, 0.65);
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="show-side-menu">Show</a>
<div class="darkness"></div>
<div class="container">

</div>

<div class="random-content">
  
</div>

<div class="random-content">
  
</div>
<div class="random-content">
  
</div>
<div class="random-content">
  
</div>

Answer 1

用最简单的html和css这就是我能给你的

$(function() {
	$(".ui-menu-toggle").click(function() {
  	$(".ui-menu").toggleClass("open");
    console.info($(".ui-menu"));
  });
});

.ui-menu {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1001;
}
.ui-menu > .ui-menu-overlay {
  opacity: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
  position: fixed;
  background: #000;
  transition-property: opacity;
  transition-duration: 0.2s;
}
.ui-menu > .ui-menu-container {
  background-color: #fff;
  box-shadow: 0 -1px 24px rgba(0, 0, 0, 0.4);
  height: 100%;
  left: -340px;
  position: absolute;
  width: 320px;
  transition-property: transform;
  transition-duration: 0.3s;
} 

.ui-menu.open {
  display: block;
}

.ui-menu.open > .ui-menu-overlay {
  opacity: 0.3;
}
.ui-menu.open > .ui-menu-container {
  transform: translateX(340px);
} 

.ui-body {
  background: pink;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  transition-property: transform;
  transition-duration: 0.3s;  
}

.ui-menu.open > .ui-body {
  transform: translateX(320px);
  z-index: -1;
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ui-menu">
	<div class="ui-menu-overlay"></div>
	<div class="ui-menu-container">
    <a href="#" class="ui-menu-toggle">close menu</a>
		menu content
	</div>
  <div class="ui-body">
    <a href="#" class="ui-menu-toggle">open menu</a>
    body content
  </div>  
</div>