如何创建折叠的侧边栏？(1)

📌 相关文章

📜 如何创建折叠的侧边栏？(1)

📅 最后修改于: 2023-12-03 15:24:03.678000 🧑 作者: Mango

如何创建折叠的侧边栏？

折叠的侧边栏是一个很常见的UI组件，它通常用于网站和Web应用程序中，可以提供更多的空间和更好的用户体验。在本文中，我们将介绍如何使用HTML、CSS和JavaScript创建一个简单的折叠的侧边栏。

HTML结构

首先，我们需要定义一个HTML结构来创建折叠的侧边栏。我们将使用一个nav元素来创建一个固定在左侧的侧边栏，包含一个包裹内容的div元素。

<nav class="sidebar">
  <div class="sidebar-content">
    <!-- 侧边栏内容 -->
  </div>
</nav>

CSS样式

接下来，我们需要给HTML结构加上样式，使其呈现为一个折叠的侧边栏。我们将为侧边栏和包裹内容的div元素分别设置 CSS 样式。

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background-color: #eee;
  transition: transform 0.3s ease-in-out; /* 添加动画效果 */
  transform: translateX(-200px); /* 侧边栏隐藏 */
}

.sidebar.active {
  transform: translateX(0); /* 侧边栏显示 */
}

.sidebar-content {
  padding: 20px;
}

在上面的CSS代码中，我们将侧边栏的位置设置为固定，在屏幕的左侧，并且它的宽度应该为200像素、高度为100%。我们还为侧边栏和包裹内容的div元素分别设置了css样式，使其正确地呈现和定位。

JavaScript事件绑定

现在我们需要添加JavaScript代码来为用户提供在侧边栏内切换内容的功能。我们将使用一个按钮来激活或关闭侧边栏。

<nav class="sidebar">
  <button class="sidebar-toggle">切换侧边栏</button>
  <div class="sidebar-content">
    <!-- 侧边栏内容 -->
  </div>
</nav>

const sidebar = document.querySelector('.sidebar');
const toggleBtn = sidebar.querySelector('.sidebar-toggle');

toggleBtn.addEventListener('click', function() {
  sidebar.classList.toggle('active');
});

在上面的JavaScript代码中，我们首先定义了变量sidebar和toggleBtn来获取侧边栏和切换按钮的引用。然后，我们将一个click事件绑定到toggleBtn上，其中我们使用classList.toggle()方法来切换侧边栏的激活或关闭状态。

完整代码

<html>
<head>
  <style>
    .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      width: 200px;
      height: 100%;
      background-color: #eee;
      transition: transform 0.3s ease-in-out;
      transform: translateX(-200px);
    }

    .sidebar.active {
      transform: translateX(0);
    }

    .sidebar-content {
      padding: 20px;
    }
  </style>
</head>
<body>
  <nav class="sidebar">
    <button class="sidebar-toggle">切换侧边栏</button>
    <div class="sidebar-content">
      <!-- 侧边栏内容 -->
    </div>
  </nav>

  <script>
    const sidebar = document.querySelector('.sidebar');
    const toggleBtn = sidebar.querySelector('.sidebar-toggle');

    toggleBtn.addEventListener('click', function() {
      sidebar.classList.toggle('active');
    });
  </script>
</body>
</html>

以上是一个简单的折叠的侧边栏的创建过程，您可以根据自己的需求进行修改和定制。