HTML5左侧导航栏模板如何适配不同屏幕尺寸？-网站模板-锦华智联科技

基础静态导航栏

这是最简单的版本,使用纯 HTML 和 CSS，适合快速搭建原型或用于不需要交互的静态页面。

（图片来源网络，侵删）

特点：

固定在左侧
带有悬停效果
结构清晰,易于理解

代码 (HTML + CSS)

您可以将以下代码保存为 index.html 文件，然后在浏览器中打开即可查看效果。

<!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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            background-color: #f4f7f6;
        }
        /* 左侧导航栏样式 */
        .sidebar {
            width: 250px;
            background-color: #2c3e50;
            padding: 20px 0;
            height: 100vh; /* 导航栏高度与视口同高 */
            overflow-y: auto; /* 内容过多时出现滚动条 */
        }
        .sidebar-header {
            padding: 0 20px 20px;
            border-bottom: 1px solid #34495e;
            margin-bottom: 20px;
        }
        .sidebar-header h2 {
            color: #ecf0f1;
            font-size: 24px;
            font-weight: 300;
        }
        /* 导航链接样式 */
        .nav-links {
            list-style: none;
        }
        .nav-links li {
            /* 使用 a 标签作为可点击区域，占据整个 li */
        }
        .nav-links a {
            display: block; /* 让链接块级化，可以设置宽高和内边距 */
            padding: 15px 25px;
            color: #bdc3c7;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        /* 鼠标悬停效果 */
        .nav-links a:hover {
            background-color: #34495e;
            color: #ecf0f1;
            padding-left: 30px; /* 悬停时向右展开一点 */
        }
        /* 当前激活页面样式 */
        .nav-links a.active {
            background-color: #3498db;
            color: white;
        }
        .nav-links a.active:hover {
            background-color: #2980b9;
            padding-left: 25px; /* �活状态下的悬停效果 */
        }
        /* 主内容区域样式 */
        .main-content {
            flex: 1; /* 占据剩余所有空间 */
            padding: 40px;
        }
        .main-content h1 {
            color: #2c3e50;
            margin-bottom: 20px;
        }
        .main-content p {
            line-height: 1.6;
            color: #555;
        }
    </style>
</head>
<body>
    <!-- 左侧导航栏 -->
    <aside class="sidebar">
        <div class="sidebar-header">
            <h2>Logo/名称</h2>
        </div>
        <ul class="nav-links">
            <li><a href="#" class="active">首页</a></li>
            <li><a href="#">仪表盘</a></li>
            <li><a href="#">项目</a></li>
            <li><a href="#">任务</a></li>
            <li><a href="#">日历</a></li>
            <li><a href="#">文档</a></li>
            <li><a href="#">报告</a></li>
            <li><a href="#">设置</a></li>
        </ul>
    </aside>
    <!-- 主内容区域 -->
    <main class="main-content">
        <h1>欢迎使用</h1>
        <p>这是一个带有基础左侧导航栏的页面模板，点击左侧菜单项可以切换（视觉上）页面内容，悬停在菜单项上可以看到效果。</p>
    </main>
</body>
</html>

现代折叠式导航栏 (带图标和子菜单)

这个模板更接近现代 Web 应用的风格，包含图标、可折叠的子菜单和更丰富的交互效果。

特点：

（图片来源网络，侵删）

使用 Font Awesome 图标库
支持多级子菜单
点击菜单项可以展开/折叠子菜单
更现代的视觉设计

代码 (HTML + CSS + JavaScript)

您需要先引入 Font Awesome 的 CSS 文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">现代折叠式导航栏</title>
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            background-color: #f0f2f5;
            color: #333;
        }
        .sidebar {
            width: 260px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            height: 100vh;
            overflow-y: auto;
            transition: all 0.3s;
        }
        .sidebar-header {
            padding: 25px;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .sidebar-header h2 {
            color: #fff;
            font-weight: 300;
            font-size: 22px;
        }
        .nav-links {
            list-style: none;
            padding: 10px 0;
        }
        .nav-links li {
            /* 关键：使用 a 标签作为可点击区域 */
        }
        .nav-links a {
            display: flex; /* 使用 Flexbox 布局图标和文字 */
            align-items: center;
            padding: 15px 25px;
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
        }
        .nav-links a i {
            width: 20px;
            margin-right: 15px;
            text-align: center;
        }
        .nav-links a:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #fff;
        }
        .nav-links a.active {
            background-color: rgba(255, 255, 255, 0.2);
            color: #fff;
        }
        /* 子菜单样式 */
        .sub-menu {
            max-height: 0; /* 默认隐藏 */
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            background-color: rgba(0, 0, 0, 0.1);
        }
        .sub-menu.show {
            max-height: 200px; /* 展开后的高度 */
            transition: max-height 0.3s ease-in;
        }
        .sub-menu a {
            padding-left: 65px; /* 子菜单项缩进 */
            font-size: 14px;
        }
        /* 展开图标 */
        .toggle-icon {
            margin-left: auto; /* 将图标推到最右边 */
            transition: transform 0.3s;
        }
        .nav-links a.active .toggle-icon {
            transform: rotate(90deg);
        }
        .main-content {
            flex: 1;
            padding: 40px;
        }
        .main-content h1 {
            color: #2c3e50;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <aside class="sidebar">
        <div class="sidebar-header">
            <h2>MyApp</h2>
        </div>
        <ul class="nav-links">
            <li>
                <a href="#" class="active">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                    <i class="fas fa-chevron-right toggle-icon"></i>
                </a>
            </li>
            <li>
                <a href="#" onclick="toggleSubmenu(event)">
                    <i class="fas fa-chart-bar"></i>
                    <span>数据分析</span>
                    <i class="fas fa-chevron-right toggle-icon"></i>
                </a>
                <ul class="sub-menu">
                    <li><a href="#">报表</a></li>
                    <li><a href="#">统计</a></li>
                    <li><a href="#">图表</a></li>
                </ul>
            </li>
            <li>
                <a href="#" onclick="toggleSubmenu(event)">
                    <i class="fas fa-cog"></i>
                    <span>系统设置</span>
                    <i class="fas fa-chevron-right toggle-icon"></i>
                </a>
                <ul class="sub-menu">
                    <li><a href="#">用户管理</a></li>
                    <li><a href="#">权限配置</a></li>
                    <li><a href="#">日志查看</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-user"></i>
                    <span>个人中心</span>
                </a>
            </li>
        </ul>
    </aside>
    <main class="main-content">
        <h1>现代折叠式导航栏</h1>
        <p>点击 "数据分析" 或 "系统设置" 可以展开/折叠子菜单。</p>
    </main>
    <script>
        function toggleSubmenu(event) {
            event.preventDefault(); // 阻止链接的默认跳转行为
            const clickedLink = event.currentTarget;
            const subMenu = clickedLink.nextElementSibling;
            // 切换子菜单的显示状态
            subMenu.classList.toggle('show');
            // 切换父菜单项的激活状态
            clickedLink.classList.toggle('active');
        }
    </script>
</body>
</html>

如何选择和使用这些模板？

快速原型/静态页面：使用 模板一，它最简单，代码量少，能快速实现一个有基本样式的导航栏。
现代 Web 应用/管理后台：使用 模板二，它功能更完善，交互更友好，是当前主流的设计模式。
自定义化：这两个模板都很容易修改。
- 修改颜色：找到 CSS 中的 background-color, color 等属性进行修改。
- 修改宽度：调整 .sidebar 的 width 属性。
- 添加/删除菜单项：在 <ul class="nav-links"> 中添加或删除 <li> 元素。
- 更换图标：在模板二中，修改 <i> 标签里的 Font Awesome 类名（fas fa-home）即可更换图标。

希望这些模板能帮助您快速开始项目！