如何制作带导航的响应式设计

在现代 Web 开发中，响应式设计已经成为了一种必备技能。随着移动设备的普及和各种尺寸的屏幕出现，创建适配多种设备的网站已经成为了前端开发的必修课。但是，我们往往会发现在移动设备上浏览网站时，导航栏往往是一个比较大的问题。

在本文中，我们将介绍如何创建一个带有导航栏的响应式设计。让我们开始吧！

1. 创建基本的 HTML 结构

首先，我们要创建一个基本的 HTML 结构，包括一个头部、导航栏和内容区域。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>带导航的响应式设计</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">分类一</a></li>
        <li><a href="#">分类二</a></li>
        <li><a href="#">分类三</a></li>
        <li><a href="#">分类四</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p>这里是内容区域</p>
  </main>
</body>
</html>

2. 使用 CSS 样式布局

在我们开始样式的设计之前，我们要先确定一个基本的布局方案。我们的目标是在小屏幕设备上显示导航栏的菜单按钮，并在点击按钮时显示导航栏的选项。同时，我们要确保这些在大屏幕设备上依然能够以水平方向显示。

// www.javascriptcn.com code example
header {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

nav li {
  margin-left: 10px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

nav button {
  background-color: #333;
  color: #fff;
  border: none;
  display: none;
}

main {
  margin: 20px;
}

3. 添加响应式设计

接下来，我们要添加响应式设计，让我们的导航栏能够适配不同的设备。我们将使用媒体查询来针对不同的屏幕尺寸分别设置样式。我们将在小屏幕设备上使用汉堡菜单来代替导航栏。

// www.javascriptcn.com code example
@media only screen and (max-width: 768px) {
  nav ul {
    display: none;
  }

  nav button {
    display: block;
  }

  nav.active ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #555;
    width: 100%;
    padding: 10px;
  }

  nav.active li {
    margin: 10px 0;
  }
}

4. 添加 JavaScript

最后，我们要添加 JavaScript，以便在移动设备上能够正确地处理导航栏的汉堡菜单。

const menuBtn = document.querySelector('nav button');
const menu = document.querySelector('nav ul');

menuBtn.addEventListener('click', () => {
  menu.parentElement.classList.toggle('active');
})

现在，我们就完成了整个响应式导航栏的制作。访问我们的网站，你就可以在不同大小的设备上看到我们的导航栏自动适配了。你可以在下面找到完整的 HTML、CSS 和 JavaScript 代码。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>带导航的响应式设计</title>
  <style>
    header {
      background-color: #333;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

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

    nav li {
      margin-left: 10px;
    }

    nav a {
      color: #fff;
      text-decoration: none;
    }

    nav button {
      background-color: #333;
      color: #fff;
      border: none;
      display: none;
    }

    main {
      margin: 20px;
    }

    @media only screen and (max-width: 768px) {
      nav ul {
        display: none;
      }

      nav button {
        display: block;
      }

      nav.active ul {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #555;
        width: 100%;
        padding: 10px;
      }

      nav.active li {
        margin: 10px 0;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>我的网站</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">分类一</a></li>
        <li><a href="#">分类二</a></li>
        <li><a href="#">分类三</a></li>
        <li><a href="#">分类四</a></li>
      </ul>
      <button>菜单</button>
    </nav>
  </header>
  <main>
    <p>这里是内容区域</p>
  </main>
  <script>
    const menuBtn = document.querySelector('nav button');
    const menu = document.querySelector('nav ul');

    menuBtn.addEventListener('click', () => {
      menu.parentElement.classList.toggle('active');
    })
  </script>
</body>
</html>

希望今天的文章能够帮助你学习如何创建带导航的响应式设计。了解了这些基础的概念之后，你可以进一步探索其他可行的设计方案。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d62e16a941bf7134bdadb6