网页设计侧边导航栏代码怎么写？-网页设计-锦华智联科技

我们将使用 HTML 来构建结构，CSS 来实现样式和布局，并加入一点点 JavaScript 来实现交互效果（如点击菜单项、移动端切换等）。

（图片来源网络，侵删）

基础静态侧边栏 (适合简单项目)

这是最基础的侧边栏,固定在页面左侧，包含几个链接。

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">基础侧边栏</title>
    <style>
        /* 重置默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Arial', sans-serif;
            display: flex; /* 使用 Flexbox 布局 */
        }
        /* 侧边栏样式 */
        .sidebar {
            width: 250px; /* 侧边栏宽度 */
            height: 100vh; /* 100% 视口高度 */
            background-color: #2c3e50; /* 深色背景 */
            padding: 20px 0;
        }
        .sidebar h2 {
            color: #ecf0f1;
            text-align: center;
            margin-bottom: 30px;
            font-size: 24px;
        }
        /* 导航链接样式 */
        .sidebar ul {
            list-style: none; /* 移除列表项前的点 */
        }
        .sidebar li {
            border-bottom: 1px solid #34495e;
        }
        .sidebar a {
            display: block; /* 让链接充满整个 li */
            padding: 15px 25px;
            color: #ecf0f1;
            text-decoration: none; /* 移除下划线 */
            transition: background-color 0.3s ease; /* 背景色过渡效果 */
        }
        /* 鼠标悬停效果 */
        .sidebar a:hover {
            background-color: #34495e;
        }
        /* 主内容区域样式 */
        .main-content {
            flex: 1; /* 占据剩余所有空间 */
            padding: 20px;
            background-color: #f4f6f9;
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <aside class="sidebar">
        <h2>Logo</h2>
        <ul>
            <li><a href="#dashboard">仪表盘</a></li>
            <li><a href="#users">用户管理</a></li>
            <li><a href="#products">产品列表</a></li>
            <li><a href="#orders">订单管理</a></li>
            <li><a href="#settings">系统设置</a></li>
        </ul>
    </aside>
    <!-- 主内容区域 -->
    <main class="main-content">
        <h1>欢迎使用后台管理系统</h1>
        <p>这里是页面的主要内容区域。</p>
    </main>
</body>
</html>

设计思路

HTML结构: 使用 <aside> 标签作为侧边栏容器，内部用 <ul> 和 <li> 来组织导航菜单，语义化清晰。
CSS布局:
- body 设置为 display: flex，让侧边栏和主内容区并排。
- .sidebar 设置固定宽度（width: 250px）和全高（height: 100vh）。
- .main-content 使用 flex: 1，它会自动占据剩余的所有水平空间。
- 链接 <a> 设置为 display: block，这样它的padding就能撑满整个列表项，方便点击。
- transition 属性为悬停效果添加了平滑的动画。

带图标和激活状态的侧边栏 (更专业)

这个版本加入了图标（使用 Font Awesome）和当前激活项的高亮显示。

准备工作

在 <head> 中引入 Font Awesome 的 CDN：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">带图标和激活状态的侧边栏</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 基础样式和方案一类似，这里只展示新增或修改的部分 */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Arial', sans-serif; display: flex; }
        .sidebar {
            width: 250px;
            height: 100vh;
            background-color: #2c3e50;
            padding: 20px 0;
            color: #ecf0f1;
        }
        .sidebar h2 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 24px;
            letter-spacing: 2px;
        }
        .sidebar ul {
            list-style: none;
        }
        .sidebar li {
            border-bottom: 1px solid #34495e;
        }
        /* 新增：图标和文字的布局 */
        .sidebar a {
            display: flex; /* 使用 Flexbox 布局图标和文字 */
            align-items: center; /* 垂直居中 */
            padding: 15px 25px;
            color: #ecf0f1;
            text-decoration: none;
            transition: all 0.3s ease; /* 所有属性过渡 */
        }
        .sidebar i {
            margin-right: 15px; /* 图标右侧间距 */
            font-size: 18px;
            width: 20px; /* 固定图标宽度，防止文字长度变化导致跳动 */
            text-align: center;
        }
        /* 新增：激活状态的样式 */
        .sidebar a.active {
            background-color: #3498db;
            border-left: 5px solid #fff; /* 左侧高亮条 */
        }
        .sidebar a:hover, .sidebar a.active:hover {
            background-color: #3498db;
        }
        .main-content {
            flex: 1;
            padding: 20px;
            background-color: #f4f6f9;
        }
    </style>
</head>
<body>
    <aside class="sidebar">
        <h2>Admin Panel</h2>
        <ul>
            <li><a href="#dashboard" class="active"><i class="fas fa-tachometer-alt"></i>仪表盘</a></li>
            <li><a href="#users"><i class="fas fa-users"></i>用户管理</a></li>
            <li><a href="#products"><i class="fas fa-box"></i>产品列表</a></li>
            <li><a href="#orders"><i class="fas fa-shopping-cart"></i>订单管理</a></li>
            <li><a href="#settings"><i class="fas fa-cog"></i>系统设置</a></li>
        </ul>
    </aside>
    <main class="main-content">
        <h1>仪表盘</h1>
        <p>这里是仪表盘的内容。</p>
    </main>
    <!-- 简单的JS来处理激活状态切换 -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const links = document.querySelectorAll('.sidebar a');
            links.forEach(link => {
                link.addEventListener('click', function(e) {
                    // 移除所有链接的 active 类
                    links.forEach(l => l.classList.remove('active'));
                    // 给当前点击的链接添加 active 类
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html>

设计思路

图标: 使用 <i> 标签配合 Font Awesome 的类名（如 fas fa-tachometer-alt）来显示图标。
布局: .sidebar a 使用 display: flex 和 align-items: center，让图标和文字优雅地水平排列并垂直居中。
激活状态:
- 在 CSS 中定义 .active 类，通过改变背景色和添加左边框来突出显示。
- 使用 JavaScript 监听所有链接的点击事件，当点击一个链接时，先移除所有链接的 active 类，再给当前被点击的链接添加 active 类。

可折叠的侧边栏 (节省空间)

这个侧边栏可以折叠成一个只有图标的窄条,非常适合在小屏幕或需要最大化内容区域时使用。

（图片来源网络，侵删）

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">可折叠侧边栏</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 基础样式 */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Arial', sans-serif; display: flex; overflow-x: hidden; }
        .sidebar {
            width: 250px;
            height: 100vh;
            background-color: #2c3e50;
            color: #ecf0f1;
            transition: width 0.3s ease; /* 宽度变化的过渡效果 */
            position: relative; /* 为折叠按钮定位 */
        }
        .sidebar.collapsed {
            width: 70px; /* 折叠后的宽度 */
        }
        /* 折叠/展开按钮 */
        .toggle-btn {
            position: absolute;
            top: 15px;
            right: -15px; /* 按钮一半在侧边栏外 */
            width: 30px;
            height: 30px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        .sidebar.collapsed .toggle-btn i {
            transform: rotate(180deg);
        }
        .sidebar h2 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 24px;
            white-space: nowrap; /* 防止文字换行 */
            overflow: hidden;
            transition: opacity 0.3s ease;
        }
        .sidebar.collapsed h2 {
            opacity: 0; /* 折叠时隐藏标题 */
        }
        .sidebar ul {
            list-style: none;
        }
        .sidebar li {
            border-bottom: 1px solid #34495e;
        }
        .sidebar a {
            display: flex;
            align-items: center;
            padding: 15px 25px;
            color: #ecf0f1;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        .sidebar i {
            margin-right: 15px;
            font-size: 18px;
            width: 20px;
            text-align: center;
        }
        /* 新增：文字部分，折叠时隐藏 */
        .sidebar .menu-text {
            transition: opacity 0.3s ease;
        }
        .sidebar.collapsed .menu-text {
            opacity: 0;
            visibility: hidden; /* 比opacity更彻底的隐藏 */
        }
        .sidebar a:hover, .sidebar a.active {
            background-color: #3498db;
        }
        .main-content {
            flex: 1;
            padding: 20px;
            background-color: #f4f6f9;
            transition: margin-left 0.3s ease; /* 主内容区平滑移动 */
        }
        /* 当侧边栏折叠时，主内容区向左移动 */
        body.sidebar-collapsed .main-content {
            margin-left: -180px; /* 250px - 70px */
        }
    </style>
</head>
<body>
    <aside class="sidebar" id="sidebar">
        <button class="toggle-btn" id="toggleBtn">
            <i class="fas fa-chevron-left"></i>
        </button>
        <h2>Admin Panel</h2>
        <ul>
            <li><a href="#dashboard" class="active"><i class="fas fa-tachometer-alt"></i><span class="menu-text">仪表盘</span></a></li>
            <li><a href="#users"><i class="fas fa-users"></i><span class="menu-text">用户管理</span></a></li>
            <li><a href="#products"><i class="fas fa-box"></i><span class="menu-text">产品列表</span></a></li>
            <li><a href="#orders"><i class="fas fa-shopping-cart"></i><span class="menu-text">订单管理</span></a></li>
            <li><a href="#settings"><i class="fas fa-cog"></i><span class="menu-text">系统设置</span></a></li>
        </ul>
    </aside>
    <main class="main-content">
        <h1>可折叠侧边栏演示</h1>
        <p>点击左上角的箭头按钮来折叠或展开侧边栏。</p>
    </main>
    <script>
        const sidebar = document.getElementById('sidebar');
        const toggleBtn = document.getElementById('toggleBtn');
        toggleBtn.addEventListener('click', () => {
            sidebar.classList.toggle('collapsed');
            // 为了让主内容区也能响应，我们给body添加一个类
            document.body.classList.toggle('sidebar-collapsed');
        });
    </script>
</body>
</html>

设计思路

折叠逻辑:
- 核心 CSS 属性是 transition: width 0.3s ease;，让宽度变化有动画。
- 定义两个状态：正常状态（width: 250px）和折叠状态（.collapsed { width: 70px; }）。
- 在折叠时通过 opacity 和 visibility 隐藏，只留下图标。
交互:
- 一个固定的切换按钮（.toggle-btn）位于侧边栏边缘。
- JavaScript 监听按钮的点击事件，通过 classList.toggle('collapsed') 来切换侧边栏的类名，从而触发 CSS 样式的变化。
区响应: 为了让主内容区也能平滑地“让出”空间，我们给 body 添加了一个 .sidebar-collapsed 类，并修改其 margin-left，这样侧边栏折叠时，主内容区会向左移动，保持视觉上的连贯性。

如何选择？

方案一: 适合学习基础、个人博客或非常简单的后台。
方案二: 最推荐，适合绝大多数后台管理系统、企业官网等，专业且功能完善。
方案三: 适合对空间要求高的专业后台、设计软件或需要在大屏和小屏间灵活切换的场景。

您可以直接复制以上代码到您的 HTML 文件中，然后根据您的品牌色和需求修改颜色、字体和内容。

（图片来源网络，侵删）