利用js编写响应式侧边栏

下面是利用JS编写响应式侧边栏的完整攻略：

1. 前言

响应式设计的出现，使得我们可以为不同的屏幕尺寸和设备类型提供不同的布局和用户体验。而一个好的响应式设计在移动设备上需要具备友好的菜单导航，侧边栏便是其中一种常见的解决方案。通过JS编写响应式侧边栏可以实现菜单栏的自适应和开关功能，并能提高用户的交互体验。

2. 整体思路

编写HTML结构
利用CSS设置侧边栏的样式
通过JS实现侧边栏的开关功能

3. HTML结构

首先，我们需要编写HTML结构，实现侧边栏的容器和内容。可以使用如下代码：

<div class="container">
  <header>
    <h1>Welcome to my site</h1>
    <button class="toggle-nav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="icon"></span>
    </button>
  </header>

  <nav class="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <main>
    <p>Here is the main content of the page.</p>
  </main>
</div>

其中，header里包含了网站的标题和侧边栏开关按钮，nav内为侧边栏的菜单列表，main为网页主要内容。

4. CSS样式

接下来，我们需要设置CSS样式，使得侧边栏能够正确显示并实现响应式布局。可以使用如下代码：

.container {
  display: flex;
  flex-wrap: wrap;
}

header {
  background-color: #333;
  color: #fff;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

h1 {
  font-size: 1.5rem;
  margin: 0;
}

nav {
  width: 100%;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 998;
  background-color: #ddd;
  padding: 2rem;
  overflow-y: auto;
}

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

nav li {
  margin-bottom: 1rem;
}

nav a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
}

main {
  flex: 1;
  padding: 2rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}

其中，我们将header设置为顶部固定定位，为侧边栏开关按钮设置样式，并且将nav设置为左侧侧边栏，通过transform进行平移，完成开关的功能。

5. JS代码

最后，我们需要编写JS代码，实现响应式侧边栏的自适应和开关功能。可以使用如下代码：

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

toggleBtn.addEventListener('click', function () {
  const open = JSON.parse(toggleBtn.getAttribute('aria-expanded'));
  toggleBtn.setAttribute('aria-expanded', !open);
  nav.style.transform = open ? 'translateX(-100%)' : 'translateX(0)';
});

window.addEventListener('resize', function () {
  if (window.innerWidth > 768) {
    nav.style.transform = 'translateX(0)';
    toggleBtn.setAttribute('aria-expanded', false);
  }
});

其中，我们首先获取到nav和开关按钮。然后为开关按钮添加‘click’事件，通过解析aria-expanded属性判断当前侧边栏是否为打开状态。在点击事件中改变aria-expanded属性的值，并改变nav的transform属性值，完成侧边栏的开关。并且添加了window的resize事件，使得在窗口大小改变时能够自动调整侧边栏的状态。

6. 示例1

在<head>标签内引入上述的CSS、JS文件。然后，将以上HTML结构拷贝到一个HTML文件中，即可看到一个响应式侧边栏的示例效果。示例页面代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Sidebar with JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <header>
      <h1>Welcome to my site</h1>
      <button class="toggle-nav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="icon"></span>
      </button>
    </header>

    <nav class="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <main>
      <p>Here is the main content of the page.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum mi ac libero malesuada,
        aliquam faucibus quam sollicitudin. Integer eget purus euismod, dapibus ipsum eu, finibus urna. Aenean eget
        ornare est. Mauris eu orci sit amet justo faucibus tincidunt sed in nibh. Aliquam vestibulum quam sed
        mauris rhoncus rhoncus. Sed laoreet imperdiet elementum. Donec eget posuere eros, ac tempus urna. Donec
        commodo magna bibendum sapien tempus, lacinia sagittis ipsum molestie. Proin vel blandit nisi, sed aliquet
        justo. Nullam ac velit molestie, suscipit libero eu, fringilla odio. Sed vitae mi sed libero fringilla
        molestie quis eu orci. Suspendisse aliquet, massa ut accumsan molestie, dui nisi iaculis sapien, non pretium
        elit risus id dolor. Nam consectetur porttitor sapien vel tincidunt.</p>
    </main>
  </div>

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

</html>

7. 示例2

为了进一步说明如何自定义样式和调整参数，我们修改一下原有的CSS和JS代码，然后对示例页面进行调整。

CSS代码修改如下：

header {
  background-color: #f8f8f8;
  color: #333;
}

nav {
  background-color: #4CAF50;
  padding: 2rem;
}

nav a {
  color: #fff;
  font-size: 1.5rem;
  font-weight: normal;
  text-transform: capitalize;
}

main {
  max-width: 100%;
}

JS代码修改如下：

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

toggleBtn.addEventListener('click', function () {
  const open = JSON.parse(toggleBtn.getAttribute('aria-expanded'));
  toggleBtn.setAttribute('aria-expanded', !open);
  nav.style.transform = open ? 'translateX(-100%)' : 'translateX(-50%)';
});

window.addEventListener('resize', function () {
  if (window.innerWidth > 768) {
    nav.style.transform = 'translateX(-50%)';
    toggleBtn.setAttribute('aria-expanded', false);
  }
});

我们修改了侧边栏的背景色、字体颜色和大小，修改了主内容区域的最大宽度，同时将快速菜单的显示位置也进行了调整。

示例页面代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Sidebar with JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <header>
      <h1>Welcome to my site</h1>
      <nav class="nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
      <button class="toggle-nav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="icon"></span>
      </button>
    </header>
    <main>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum mi ac libero malesuada,
      aliquam faucibus quam sollicitudin. Integer eget purus euismod, dapibus ipsum eu, finibus urna. Aenean eget ornare est.
      </p>
      <p>
      Mauris eu orci sit amet justo faucibus tincidunt sed in nibh. Aliquam vestibulum quam sed mauris rhoncus rhoncus.
      Sed laoreet imperdiet elementum. Donec eget posuere eros, ac tempus urna. Donec commodo magna bibendum sapien tempus,
      lacinia sagittis ipsum molestie.
      </p>
      <p>
      Nullam ac velit molestie, suscipit libero eu, fringilla odio. Sed vitae mi sed libero fringilla molestie quis eu orci.
      Suspendisse aliquet, massa ut accumsan molestie, dui nisi iaculis sapien, non pretium elit risus id dolor.
      Nam consectetur porttitor sapien vel tincidunt.
      </p>
    </main>
  </div>
  <script src="script.js"></script>
</body>

</html>

结论

本文中，我们介绍了通过JS编写响应式侧边栏的完整攻略，包括HTML结构、CSS样式、JS代码的实现过程，并进行了两个示例的说明。了解这些内容，我们就可以按照自己的需求，自定义侧边栏的样式和调整参数，实现一个适合自己网页风格和品牌的响应式侧边栏。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用js编写响应式侧边栏 - Python技术站