CSS Grid 响应式布局，让网站随菜单动起来

Question

我看到一个网站，当汉堡菜单打开时，网站会随着菜单移动，效果很酷，我该如何实现？

目前我有这个:https://jsfiddle.net/xwvL2a70/1/

/* grid */
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
}

/* items */
.container > * {
  color: #353535;
  font-size: 1.2em;
  line-height: 1.5;
  padding: 20px;
  background: #d0cfc5;
}

/* nav styles */
.container nav {
  background: #136fd2;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  color: #d0cfc5
}

nav a:hover {
  text-decoration: none;
}

/* media query for grid layout */
@media only screen and (min-width: 600px) {

  /* grid */
  .container {
    grid-template-columns: repeat(4, 1fr);
  }

  /* specific item styles */
  .container header,
  .container nav,
  .container footer {
    grid-column: span 4;
  }
  .container section {
    grid-column: span 3;
  }

  /* nav styles */
  nav ul li {
    display: inline-block;
    padding: 0 20px 0 0;
  }

  /* hide toggle */
  .toggle {
    display: none;
  }

}

/* media query for nav styles */
@media only screen and (max-width: 599px) {

    #nav {
      transition: transform .3s ease-in-out;
      top: 0;
      bottom: 0;   
      position: fixed;
      width: 300px;
      right: -340px;
    }

    #nav:target {     
      transform: translateX(-340px);
    }

    .close {
      text-align: right;
      display: block;
      text-decoration: none;
      font-size: 3em;
      position: relative;
      top: -30px;
    }

  .open {
    text-align: left;
  }

}

我想制作一个像这个网站的动画:https://vizir.com.br/

当您点击菜单时，内容会随之向左移动。

我不知道这是不是一个简单的问题，我真的很陌生，只是想学习一些巧妙的效果，创建这样的菜单/网站动画很难吗？

Answer 1

我想您可能正在寻找的是这里的链接 How To Side Navigation

特别是这里的这一部分，它不仅通过漂亮的过渡改变了 sidenav 的宽度，而且还改变了主要内容的边距

/* Set the width of the side navigation to 250px and the left margin of the 
page content to 250px */
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
}