javascript - 创建一个垂直菜单

Question

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

我找到了sample form code pen，但是折叠在这里不起作用

$(document).ready(function(){
  $(".menu-button").click(function(){
    $(".menu-bar").toggleClass( "open" );
  })
})

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>