css侧导航

CSS侧导航基础概念

CSS侧导航（Side Navigation）是一种网页设计元素，通常位于页面的左侧或右侧，用于提供页面的主要导航链接。侧导航可以帮助用户快速访问网站的不同部分，提高用户体验。

类型

固定侧导航：无论用户滚动到页面的哪个位置，侧导航始终固定在屏幕的一侧。
滚动侧导航：侧导航随着页面内容的滚动而滚动。
隐藏侧导航：在较小的屏幕上，侧导航可以折叠隐藏，只在用户需要时显示。

应用场景

网站主页：提供快速访问网站各个部分的入口。
管理后台：为管理员提供各种管理功能的导航。
文档网站：帮助用户快速找到特定的文档或教程。

示例代码

以下是一个简单的CSS侧导航示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Side Navigation</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .sidebar {
            height: 100%;
            width: 200px;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #111;
            overflow-x: hidden;
            padding-top: 20px;
        }
        .sidebar a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
        }
        .sidebar a:hover {
            color: #f1f1f1;
        }
        .main {
            margin-left: 200px; /* Same as the width of the sidebar */
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </div>
    <div class="main">
        <h2>Main Content</h2>
        <p>This is the main content area.</p>
    </div>
</body>
</html>

参考链接

CSS-Tricks: Side Navigation

常见问题及解决方法

侧导航在小屏幕上显示不全：
- 问题原因：小屏幕宽度不足以容纳侧导航。
- 解决方法：使用媒体查询（Media Queries）来调整侧导航的样式，使其在小屏幕上折叠或隐藏。
- 解决方法：使用媒体查询（Media Queries）来调整侧导航的样式，使其在小屏幕上折叠或隐藏。