创建垂直菜单

Question

是否可以创建菜单like this，（左侧固定菜单）。当高度降低导航收缩时。

我找到了sample form code pen，但崩溃不在这里

{{1}}

Answer 1

我制作了一支笔click here，它使用了transform: translateX(-5%)和CSS动画以及JavaScript OnClick功能。

document.getElementById('as').addEventListener("click", open);
var sd = document.getElementById('side');
function open() {
sd.style.animation = 'open 2s forwards';  
  
}

.saas2ws {
  width: 200px;
  height: 100px;
  z-index: 1;
  position: relative;
  left: 500px;
  font-size: 50px;

  
}



.side {
  background-color: blue;
  width: 200px;
  height: 100%;
  position: absolute;
 z-index: 2;
  transform: translateX(-150%);
  
}



@Keyframes open {
  0% {
   transform: translateX(-150%); 
    bac
    
  }
  
  50% {}
  
  100% {
   transform: translateX(-5%); 
    
  }
  
}

<div class="side" id="side"> </div>


<div class="saas2ws" id="as">click to open</div>