使用HTML，CSS和JavaScript创建响应式侧面导航栏-css教程-PHP中文网

使用HTML，CSS和JavaScript创建响应式侧面导航栏

碧海醫心

发布： 2025-02-18 16:30:14

原创

1124人浏览过

使用html，css和javascript创建响应式侧面导航栏

本教程将指导您如何仅使用HTML、CSS和少量JavaScript代码构建一个响应式侧边导航栏菜单。该侧边栏将具备以下功能：

移动设备上的切换按钮，用于打开和关闭侧边栏。
桌面设备上可折叠的菜单，可在展开视图和图标视图之间切换。

我们将分三个主要步骤完成：构建HTML结构创建侧边栏的基础，使用CSS进行样式设计以确保布局在视觉上吸引人且具有响应性，最后使用JavaScript添加交互性，实现视图之间的动态切换。

1. HTML结构

首先，定义页面的基本结构，包括侧边栏（sidenav）、切换按钮和内容区域：

立即学习“Java免费学习笔记（深入）”；

<code class="html"><!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式侧边导航栏</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button class="toggle"><i class="fa fa-bars"></i></button>

    <nav id="sidenav">
        <ul>
            <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"><i class="fa fa-home"></i> 首页</a></li>
            <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"><i class="fa fa-envelope"></i> 消息</a></li>
            <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"><i class="fa fa-cog"></i> 设置</a></li>
        </ul>
    </nav>

    <main>
        <h1>欢迎</h1>
        <p>Lorem ipsum dolor sit amet...</p>
    </main>

    <script src="script.js"></script>
</body>
</html></code>

登录后复制

解释：

<nav></nav> 元素包含侧边栏菜单。
切换按钮 (<button></button>) 用于显示/隐藏侧边栏。
<main></main> 部分表示主要内容区域。

2. CSS样式

接下来，为侧边栏和主要内容区域设置样式，并使其具有响应性：

AI Sofiya

一款AI驱动的多功能工具

109

查看详情

<code class="css">* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  overflow: hidden;
}

button.toggle {
  z-index: 10;
  position: fixed;
  left: 12px;
  top: 10px;
  background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b575757;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

nav {
  width: 250px;
  height: 100vh;
  background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333;
  transition: all 0.3s;
  padding-top: 60px;
  /* ... (其余样式保持不变) ... */
}

/* ... (其余样式保持不变) ... */</code>

登录后复制

解释：

侧边栏初始宽度为 250px，最小化时收缩到 60px。
在移动设备上（最大宽度：768px），侧边栏默认隐藏 (left: -250px)，激活时滑动显示。
切换按钮固定在左上角。

3. JavaScript交互

最后，添加JavaScript代码处理侧边栏的切换：

<code class="javascript">function toggleSidenav() {
  const sidenav = document.querySelector("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bsidenav");
  if (window.innerWidth <= 767) {
    sidenav.classList.toggle("active");
  } else {
    sidenav.classList.toggle("min");
  }
}

document.querySelector(".toggle").addEventListener("click", toggleSidenav);</code>

登录后复制

解释：

该函数检查屏幕是否为移动设备（最大宽度：767px）。如果是移动设备，则切换 active 类以显示/隐藏菜单；如果是桌面设备，则切换 min 类以折叠/展开菜单。

结论

通过以上设置，我们得到一个响应式的侧边导航栏：