使用 HTML、CSS 和 Javascript 的响应式导航栏

对于我们构建的每个 CSS 项目，响应式导航栏是必备的。

所以，今天我们将使用 HTML CSS 和原始 javascript 构建一个响应式导航栏。

注意：这是移动优先的设计

如果你更喜欢视频，我也制作了一个视频。你可以在这里观看。

让我们开始吧🎉🎉

第 1 部分：HTML



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>responsive navbar</title>
  </head>
  <body>
    <header>
      <nav class="nav">
        <a href="/" class="logo">logo</a>

        <div class="hamburger">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </div>

        <div class="nav__link hide">
          <a href="#">home</a>
          <a href="#">about</a>
          <a href="#">contact</a>
          <a href="#">blog</a>
        </div>
      </nav>
    </header>
  </body>

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

上面我们用汉堡包标记了导航栏。

我也链接了 CSS 和 javascript 文件。

让我们看看如何使用 CSS 来设计这个标记

第 2 部分 CSS



* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

a {
  text-decoration: none;
  color: black;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
}

这里我们去掉了一些默认的样式，并在a标签中添加了一些样式。



/* nav styles */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}

.logo {
  font-size: 1.8rem;
  color: rgb(5, 5, 116);
  padding-left: 20px;
}

.hamburger {
  padding-right: 20px;
  cursor: pointer;
}

.hamburger .line {
  display: block;
  width: 40px;
  height: 5px;
  margin-bottom: 10px;
  background-color: black;
}

.nav__link {
  position: fixed;
  width: 94%;
  top: 5rem;
  left: 18px;
  background-color: lightblue;
}

.nav__link a {
  display: block;
  text-align: center;
  padding: 10px 0;
}

.nav__link a:hover {
  background-color: lightcoral;
}

.hide {
  display: none;
}

这是主要设计。在这里，我们设计了导航栏的汉堡包样式和徽标。

移动设计已完成。

我们现在来看看桌面设计。



@media screen and (min-width: 600px) {
  .nav__link {
    display: block;
    position: static;
    width: auto;
    margin-right: 20px;
    background: none;
  }

  .nav__link a {
    display: inline-block;
    padding: 15px 20px;
  }

  .hamburger {
    display: none;
  }
}

在桌面设计中，我们移除了绝对定位，并将其改为显示块。
此外，我们在 nav__link 中添加了 display inline-block 属性，使链接保持相邻。
最后，我们在 .hamburger 文件中添加了 display none 属性。

还剩最后一件事。现在我们需要让汉堡包可点击。

第 3 部分：JavaScript



const hamburger = document.querySelector('.hamburger');
const navLink = document.querySelector('.nav__link');

hamburger.addEventListener('click', () => {
  navLink.classList.toggle('hide');
});

这里我们给汉堡包添加了点击事件，并给navLink添加了classList.toggle。

classList.toggle 的作用是，如果给定的类可用，则删除该类；如果给定的类不可用，则添加该类。

源代码：https://github.com/Coderamrin/responsive-navbar-css-js

实时预览：https://coderamrin.github.io/responsive-navbar-css-js/

结论

谢谢阅读。

如果你喜欢它，别忘了关注我@coderamrin

另外，我开通了一个 YouTube 频道，分享编程教程和视频。如果觉得不错，可以看看：https://www.youtube.com/channel/UCiHUi4wJ6rkPSQ5n4bxKU1A

祝你一切顺利 :D

文章来源：https://dev.to/coderamrin/responsive-navbar-using-html-css-and-javascript-1jo4