使用javascript和CSS切换抽屉

问题描述

我想要一个类似于Material ui appbar的sidenav，但我想在不使用jQuery，material-ui这样的库的情况下实现它

示例 我想要的是 ： Screenshot

解决方法

请检查一下。 您可以在那里播放以更新样式。

function show() { document.getElementById('navbar').classList.add('open');
}

function hide() { document.getElementById('navbar').classList.remove('open');
}

#navbar {
  position: absolute;
  left: -200px;
  top: 0;
  width: 200px;
  background-color: white;
  height: 100%;
  transition: left 0.5s;
}

#navbar.open {
  left: 0;
  box-shadow: 3px 0px 20px gray;
}

#navbar.open .overlay {
  content: ' ';
  background-color: rgba(0,0.3);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

#content {
  font-size: 50px;
}

#button {
  background-color: gray;
  color: white;
  display: inline-block;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
}

<div id="main">
  <div id="navbar">
    Navbar
    <div class="overlay" onclick="hide()">
    </div>
  </div>
  <div id="button" onclick="show()">
    ...
  </div>
  <div id="content">
    Content
    Content
    Content
    Content
    Content
  </div>
</div>