制作滑动侧导航菜单以进行响应式设计

本教程向您展示了如何使用JavaScript和CSS构建响应式响应的可扩展侧导航菜单。 最终结果是一个时尚，现代的菜单。

这是一个现场演示：

1。 HTML结构：

从添加侧面菜单的HTML开始：

这将设置侧面菜单（

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

<nav class="topnav">
  <a class="ham-icon" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
    <svg height="30" id="icoOpen" width="30">
      <path d="M0,5 30,5" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
      <path d="M0,14 30,14" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
      <path d="M0,23 30,23" stroke="https://www.php.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>

），汉堡图标（

）以打开它，一个关闭按钮（sidenav）和主内容区域（ham-icon>）。 close-btnmain 2。 JavaScript功能：

此JavaScript处理菜单的打开和关闭操作：>

>单击汉堡图标展开菜单；单击“关闭”按钮崩溃了。

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";
});

3。 CSS样式：

CSS样式菜单及其动画： >此CSS提供了平滑的幻灯片动画，处理溢出，并为较小的屏幕增加了响应能力。 身体上的

可防止水平滚动。

https://www.php.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;
  }
}

4。删除幻灯片动画（可选）：

overflow-x: hidden;>

要删除幻灯片动画，将

的属性设置为> ：

这使菜单出现并立即消失。 transition0s结论：

.sidenav {
  transition: 0s;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmain {
  transition: margin-left 0s;
}

这个简单而有效的侧面导航菜单很容易自定义，并且可以适应各种设计需求。 考虑使用Bootstrap或Bulma等CSS框架以获取更高级的样式选项。 感谢Monty Shokeen的贡献！

以上是制作滑动侧导航菜单以进行响应式设计的详细内容。更多信息请关注PHP中文网其他相关文章！