创建一个可悬停的侧边导航栏：HTML, CSS 和 JavaScript|极客教程

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

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

在现代网页设计中，侧边导航栏是一种常见且实用的界面组件，它可以提供快速访问网站的多个部分。本文将详细介绍如何使用HTML, CSS和JavaScript创建一个简单而又具有交互性的可悬停侧边导航栏。

1. 基础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="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#clients">Clients</a>
        <a href="#contact">Contact</a>
    </div>

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

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

Output:

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

2. 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="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#clients">Clients</a>
        <a href="#contact">Contact</a>
    </div>

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

Output:

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

3. 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>
</head>
<body>
    <div id="mySidenav" class="sidenav">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#clients">Clients</a>
        <a href="#contact">Contact</a>
    </div>

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

    <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>
</body>
</html>

Output:

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