创建一个可悬停的侧边导航栏（HTML, CSS 和 JavaScript）|极客笔记

创建一个可悬停的侧边导航栏（HTML, CSS 和 JavaScript）

参考： Create a Hoverable Side Navigation with HTML, CSS and JavaScript

在现代网页设计中，侧边导航栏是一个常见且实用的组件，它可以提供快速访问网站的不同部分。本文将详细介绍如何使用HTML, CSS和JavaScript来创建一个可悬停的侧边导航栏。我们将从基本的HTML结构开始，逐步引入CSS样式和JavaScript功能，以实现一个响应式且用户友好的侧边导航栏。

HTML结构

首先，我们需要创建基本的HTML结构。这包括一个<div>容器，它将作为侧边导航栏的主体，以及一些列出导航链接的<a>标签。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side Navigation Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="mySidenav" class="sidenav">
  <a href="https://how2html.com" target="_blank">Home</a>
  <a href="https://how2html.com/about" target="_blank">About</a>
  <a href="https://how2html.com/services" target="_blank">Services</a>
  <a href="https://how2html.com/contact" target="_blank">Contact</a>
</div>

<div id="main">
  <h1>Welcome to how2html.com</h1>
  <p>This is a demonstration of a hoverable side navigation.</p>
</div>

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

Output:

创建一个可悬停的侧边导航栏（HTML, CSS 和 JavaScript）

CSS样式

接下来，我们需要添加CSS来样式化侧边导航栏。我们将使导航栏在页面的左侧垂直展开，并添加一些基本的样式如背景颜色、文字颜色等。此外，我们还将添加一些悬停效果，使得当用户将鼠标悬停在链接上时，链接的样式会发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side Navigation Example</title>
<style>
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
  <a href="https://how2html.com" target="_blank">Home</a>
  <a href="https://how2html.com/about" target="_blank">About</a>
  <a href="https://how2html.com/services" target="_blank">Services</a>
  <a href="https://how2html.com/contact" target="_blank">Contact</a>
</div>

<div id="main">
  <h1>Welcome to how2html.com</h1>
  <p>This is a demonstration of a hoverable side navigation.</p>
</div>
</body>
</html>

Output:

创建一个可悬停的侧边导航栏（HTML, CSS 和 JavaScript）

JavaScript 功能

最后，我们需要添加一些JavaScript来控制侧边导航栏的行为。具体来说，我们希望当用户点击某个按钮时，侧边导航栏能够展开或收起。我们将通过修改侧边导航栏的宽度来实现这一点。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Side Navigation Example</title>
<style>
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}
</style>
<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
</script>
</head>
<body>
<div id="mySidenav" class="sidenav">
  <a href="https://how2html.com" target="_blank">Home</a>
  <a href="https://how2html.com/about" target="_blank">About</a>
  <a href="https://how2html.com/services" target="_blank">Services</a>
  <a href="https://how2html.com/contact" target="_blank">Contact</a>
</div>

<div id="main">
  <h1>Welcome to how2html.com</h1>
  <p>This is a demonstration of a hoverable side navigation.</p>
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
</body>
</html>

Output:

创建一个可悬停的侧边导航栏（HTML, CSS 和 JavaScript）