滑动导航条：5 分钟制作可爱网页导航栏

前端

2024-02-04 20:00:45

大家好，欢迎来到今天的教程。今天，我将带你一步一步地制作一个可爱的滑动导航条。这个滑动导航栏 demo 非常基础，但是拥有广泛的使用场景。无论你是网页设计新手还是经验丰富的开发人员，都可以轻松上手。

准备工作

在开始制作滑动导航条之前，我们需要准备一些东西：

文本编辑器（如 VSCode 或 Sublime Text）
HTML 和 CSS 文件
浏览器（如 Chrome 或 Firefox）

制作滑动导航条

1. 创建 HTML 结构

首先，我们需要创建一个 HTML 文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</body>
</html>

2. 创建 CSS 样式

接下来，我们需要创建一个 CSS 文件，并添加以下代码：

nav {
  background-color: #333;
  height: 50px;
  width: 100%;
}

nav ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav li {
  margin-right: 20px;
}

nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
  color: #ccc;
}

3. 添加滑动效果

最后，我们需要添加一些 JavaScript 代码来实现滑动效果。将以下代码添加到 HTML 文件的 <body> 标签中：

<script>
  const nav = document.querySelector('nav');

  window.addEventListener('scroll', () => {
    if (window.pageYOffset > 100) {
      nav.classList.add('scrolled');
    } else {
      nav.classList.remove('scrolled');
    }
  });
</script>