<div class="sidenav" id="sideNavigation">
  <a class="close-btn" href="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">×</a>
  <a href="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a>
  <a href="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Features</a>
  <a href="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact Us</a>
</div>

<nav class="topnav">
  <a class="ham-icon" href="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
    <svg height="30" id="icoOpen" width="30">
      <path d="M0,5 30,5" stroke="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
      <path d="M0,14 30,14" stroke="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
      <path d="M0,23 30,23" stroke="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
    </svg>
  </a>
</nav>

<main id="main">
  <h1>This Side Navigation Menu Looks Good!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>

）以打開它，一個關(guān)閉按鈕（sidenav）和主內(nèi)容區(qū)域（ham-icon>）。 close-btnmain 2。 JavaScript功能：

此JavaScript處理菜單的打開和關(guān)閉操作：>

document.querySelector("a.ham-icon").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
});

document.querySelector("a.close-btn").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
});

CSS樣式菜單及其動畫： >此CSS提供了平滑的幻燈片動畫，處理溢出，并為較小的屏幕增加了響應(yīng)能力。 身體上的

http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmain {
  transition: margin-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  padding: 20px;
  width: 100%;
}

body {
  overflow-x: hidden;
}

a svg {
  transition: all 0.5s ease;
}

a svg:hover {
  transform: rotate(180deg);
}

@media screen and (max-height: 480px) {
  .sidenav {
    padding-top: 3rem;
  }
  .sidenav a {
    font-size: 1.5rem;
  }
}

overflow-x: hidden;>

的屬性設(shè)置為> ：

這使菜單出現(xiàn)并立即消失。 transition0s結(jié)論：

.sidenav {
  transition: 0s;
}

http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmain {
  transition: margin-left 0s;
}