使用 HTML、CSS 和 JavaScript 创建可悬停的侧边导航

在网站设计中，侧边导航是一种很常见的导航方式。 在本文中，我们将探讨如何使用 HTML、CSS 和 JavaScript 创建一个可悬停的侧边导航。

HTML 结构

首先，我们需要创建我们的 HTML 结构。 我们将使用一个无序列表来创建导航：

<ul class="navigation">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
</ul>

CSS 样式

接下来，我们需要样式我们的导航。 我们将使用 CSS 来为导航添加样式，包括背景色、文本颜色和悬停效果：

.navigation {
  list-style: none;
  background-color: #333;
  padding: 0;
  margin: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
}

.navigation li {
  text-align: center;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #444;
}

.navigation li:last-child {
  border-bottom: none;
}

.navigation li a {
  display: block;
  color: #fff;
  padding: 10px;
  text-decoration: none;
}

.navigation li a:hover {
  background-color: #444;
}

这些样式将创建一个灰色的侧边导航，当鼠标悬停在链接上时，链接的背景色将变为深灰色。

JavaScript 功能

现在，我们需要让我们的导航可以悬停。我们将使用 JavaScript 来实现此功能：

var navigation = document.querySelector('.navigation');
var origOffsetY = navigation.offsetTop;

function scroll() {
  if (window.scrollY >= origOffsetY) {
    navigation.classList.add('sticky');
  } else {
    navigation.classList.remove('sticky');
  }
}

document.onscroll = scroll;

这段代码将使导航在网页滚动时保持在固定位置。当导航达到顶部时，它将保持在屏幕顶部，并添加一个“sticky”类。当导航返回到原来的位置时，它将从屏幕顶部删除，并删除“sticky”类。

总结

现在，我们已经完成了一个可悬停的侧边导航。我们使用 HTML 创建了我们的导航，使用 CSS 样式化它，并使用 JavaScript 为它添加了一个滚动功能。此代码可以帮助你展示你的网页设计作品，也可以用于学习 HTML、CSS 和 JavaScript 的基础知识。

Markdown 代码块如下：

# 使用 HTML、CSS 和 JavaScript 创建可悬停的侧边导航

在网站设计中，侧边导航是一种很常见的导航方式。 在本文中，我们将探讨如何使用 HTML、CSS 和 JavaScript 创建一个可悬停的侧边导航。

## HTML 结构

首先，我们需要创建我们的 HTML 结构。 我们将使用一个无序列表来创建导航：

\`\`\`html
<ul class="navigation">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
</ul>
\`\`\`

## CSS 样式

接下来，我们需要样式我们的导航。 我们将使用 CSS 来为导航添加样式，包括背景色、文本颜色和悬停效果：

\`\`\`css
.navigation {
  list-style: none;
  background-color: #333;
  padding: 0;
  margin: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
}

.navigation li {
  text-align: center;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #444;
}

.navigation li:last-child {
  border-bottom: none;
}

.navigation li a {
  display: block;
  color: #fff;
  padding: 10px;
  text-decoration: none;
}

.navigation li a:hover {
  background-color: #444;
}
\`\`\`

这些样式将创建一个灰色的侧边导航，当鼠标悬停在链接上时，链接的背景色将变为深灰色。

## JavaScript 功能

现在，我们需要让我们的导航可以悬停。我们将使用 JavaScript 来实现此功能：

\`\`\`javascript
var navigation = document.querySelector('.navigation');
var origOffsetY = navigation.offsetTop;

function scroll() {
  if (window.scrollY >= origOffsetY) {
    navigation.classList.add('sticky');
  } else {
    navigation.classList.remove('sticky');
  }
}

document.onscroll = scroll;
\`\`\`

这段代码将使导航在网页滚动时保持在固定位置。当导航达到顶部时，它将保持在屏幕顶部，并添加一个“sticky”类。当导航返回到原来的位置时，它将从屏幕顶部删除，并删除“sticky”类。

## 总结

现在，我们已经完成了一个可悬停的侧边导航。我们使用 HTML 创建了我们的导航，使用 CSS 样式化它，并使用 JavaScript 为它添加了一个滚动功能。此代码可以帮助你展示你的网页设计作品，也可以用于学习 HTML、CSS 和 JavaScript 的基础知识。