垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 侧边栏 ​

侧边栏是网站常用的导航和内容展示区域。本章将介绍如何使用 Foundation 创建各种侧边栏。

基本侧边栏 ​

使用网格系统创建侧边栏布局：

html
<div class="grid-x">
    <div class="cell medium-3">
        <!-- 侧边栏 -->
        <aside>
            <ul class="vertical menu">
                <li><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </aside>
    </div>
    <div class="cell medium-9">
        <!-- 主内容 -->
        <main>
            <h1>主要内容区域</h1>
            <p>这是页面的主要内容。</p>
        </main>
    </div>
</div>

粘性侧边栏 ​

使用 Sticky 插件创建固定侧边栏：

html
<div class="grid-x">
    <div class="cell medium-3">
        <div data-sticky-container>
            <div class="sticky" data-sticky data-margin-top="0">
                <ul class="vertical menu">
                    <li><a href="#">固定菜单 1</a></li>
                    <li><a href="#">固定菜单 2</a></li>
                    <li><a href="#">固定菜单 3</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="cell medium-9">
        <main>
            <p>滚动页面时侧边栏会保持固定。</p>
            <!-- 更多内容 -->
        </main>
    </div>
</div>

带标题的侧边栏 ​

html
<aside class="sidebar">
    <h4>导航菜单</h4>
    <ul class="vertical menu">
        <li class="is-active"><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>

    <h4>分类</h4>
    <ul class="vertical menu">
        <li><a href="#">技术文章 <span class="badge">12</span></a></li>
        <li><a href="#">设计教程 <span class="badge">8</span></a></li>
        <li><a href="#">产品评测 <span class="badge">5</span></a></li>
    </ul>
</aside>

带图标的侧边栏 ​

html
<aside class="sidebar">
    <ul class="vertical menu">
        <li><a href="#"><i class="fi-home"></i> 首页</a></li>
        <li><a href="#"><i class="fi-graph-bar"></i> 仪表板</a></li>
        <li><a href="#"><i class="fi-torso-business"></i> 用户管理</a></li>
        <li><a href="#"><i class="fi-page-multiple"></i> 文章管理</a></li>
        <li><a href="#"><i class="fi-widget"></i> 系统设置</a></li>
    </ul>
</aside>

嵌套菜单侧边栏 ​

html
<aside class="sidebar">
    <ul class="vertical menu" data-accordion-menu>
        <li>
            <a href="#">产品管理</a>
            <ul class="menu vertical nested">
                <li><a href="#">产品列表</a></li>
                <li><a href="#">添加产品</a></li>
                <li><a href="#">产品分类</a></li>
            </ul>
        </li>
        <li>
            <a href="#">订单管理</a>
            <ul class="menu vertical nested">
                <li><a href="#">所有订单</a></li>
                <li><a href="#">待处理</a></li>
                <li><a href="#">已完成</a></li>
            </ul>
        </li>
        <li><a href="#">用户管理</a></li>
        <li><a href="#">系统设置</a></li>
    </ul>
</aside>

博客侧边栏 ​

html
<aside class="sidebar">
    <!-- 搜索框 -->
    <div class="card">
        <div class="card-section">
            <h5>搜索</h5>
            <div class="input-group">
                <input class="input-group-field" type="search" placeholder="搜索文章...">
                <div class="input-group-button">
                    <button class="button"><i class="fi-magnifying-glass"></i></button>
                </div>
            </div>
        </div>
    </div>

    <!-- 分类 -->
    <div class="card">
        <div class="card-divider">
            <h5>分类</h5>
        </div>
        <div class="card-section">
            <ul class="no-bullet">
                <li><a href="#">技术 (15)</a></li>
                <li><a href="#">设计 (8)</a></li>
                <li><a href="#">生活 (12)</a></li>
                <li><a href="#">旅行 (6)</a></li>
            </ul>
        </div>
    </div>

    <!-- 热门文章 -->
    <div class="card">
        <div class="card-divider">
            <h5>热门文章</h5>
        </div>
        <div class="card-section">
            <ul class="no-bullet">
                <li style="margin-bottom: 10px;">
                    <a href="#">如何使用 Foundation 构建响应式网站</a>
                    <small class="text-muted">2024-01-15</small>
                </li>
                <li style="margin-bottom: 10px;">
                    <a href="#">CSS Grid 完全指南</a>
                    <small class="text-muted">2024-01-10</small>
                </li>
                <li>
                    <a href="#">JavaScript 性能优化技巧</a>
                    <small class="text-muted">2024-01-05</small>
                </li>
            </ul>
        </div>
    </div>

    <!-- 标签云 -->
    <div class="card">
        <div class="card-divider">
            <h5>标签</h5>
        </div>
        <div class="card-section">
            <span class="label">HTML</span>
            <span class="label">CSS</span>
            <span class="label">JavaScript</span>
            <span class="label">Foundation</span>
            <span class="label">响应式</span>
            <span class="label">前端</span>
        </div>
    </div>
</aside>

管理后台侧边栏 ​

html
<style>
    .admin-sidebar {
        background: #2c3e50;
        min-height: 100vh;
        padding: 20px 0;
    }
    .admin-sidebar .logo {
        color: white;
        text-align: center;
        padding: 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        margin-bottom: 20px;
    }
    .admin-sidebar .menu a {
        color: #bdc3c7;
        padding: 12px 20px;
    }
    .admin-sidebar .menu a:hover {
        background: rgba(255,255,255,0.1);
        color: #fff;
    }
    .admin-sidebar .menu li.is-active > a {
        background: #1779ba;
        color: #fff;
    }
    .admin-sidebar .menu a i {
        margin-right: 10px;
        width: 20px;
        text-align: center;
    }
    .admin-sidebar .menu-heading {
        color: #7f8c8d;
        font-size: 0.75rem;
        text-transform: uppercase;
        padding: 15px 20px 5px;
    }
</style>

<aside class="admin-sidebar">
    <div class="logo">
        <h4>管理后台</h4>
    </div>

    <p class="menu-heading">主菜单</p>
    <ul class="vertical menu">
        <li class="is-active"><a href="#"><i class="fi-home"></i> 仪表板</a></li>
        <li><a href="#"><i class="fi-torso-business"></i> 用户管理</a></li>
        <li><a href="#"><i class="fi-page-multiple"></i> 内容管理</a></li>
        <li><a href="#"><i class="fi-shopping-cart"></i> 订单管理</a></li>
    </ul>

    <p class="menu-heading">系统</p>
    <ul class="vertical menu">
        <li><a href="#"><i class="fi-widget"></i> 系统设置</a></li>
        <li><a href="#"><i class="fi-shield"></i> 安全中心</a></li>
        <li><a href="#"><i class="fi-power"></i> 退出登录</a></li>
    </ul>
</aside>

完整示例 ​

html
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 侧边栏示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
    <style>
        .sidebar {
            padding: 20px;
            background: #f8f8f8;
            border-radius: 4px;
        }
        .sidebar h5 {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }
        .sidebar .menu a i {
            margin-right: 10px;
        }
        .sidebar .card {
            margin-bottom: 15px;
        }
        .main-content {
            padding: 20px;
        }
        .tag-cloud .label {
            margin: 2px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1 style="margin: 20px 0;">Foundation 侧边栏展示</h1>

        <div class="grid-x grid-margin-x">
            <!-- 侧边栏 -->
            <div class="cell medium-3">
                <aside class="sidebar">
                    <!-- 导航菜单 -->
                    <h5>导航菜单</h5>
                    <ul class="vertical menu">
                        <li class="is-active"><a href="#"><i class="fi-home"></i> 首页</a></li>
                        <li><a href="#"><i class="fi-page"></i> 文章</a></li>
                        <li><a href="#"><i class="fi-photo"></i> 相册</a></li>
                        <li><a href="#"><i class="fi-torso"></i> 关于</a></li>
                        <li><a href="#"><i class="fi-mail"></i> 联系</a></li>
                    </ul>

                    <!-- 搜索 -->
                    <div class="card">
                        <div class="card-section">
                            <h5>搜索</h5>
                            <div class="input-group">
                                <input class="input-group-field" type="search" placeholder="搜索...">
                                <div class="input-group-button">
                                    <button class="button"><i class="fi-magnifying-glass"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 分类 -->
                    <div class="card">
                        <div class="card-divider">
                            <h5 style="margin: 0;">分类</h5>
                        </div>
                        <div class="card-section">
                            <ul class="no-bullet" style="margin: 0;">
                                <li><a href="#">技术文章 <span class="badge primary">15</span></a></li>
                                <li><a href="#">设计教程 <span class="badge primary">8</span></a></li>
                                <li><a href="#">产品评测 <span class="badge primary">12</span></a></li>
                                <li><a href="#">生活随笔 <span class="badge primary">6</span></a></li>
                            </ul>
                        </div>
                    </div>

                    <!-- 热门文章 -->
                    <div class="card">
                        <div class="card-divider">
                            <h5 style="margin: 0;">热门文章</h5>
                        </div>
                        <div class="card-section">
                            <ul class="no-bullet" style="margin: 0;">
                                <li style="margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee;">
                                    <a href="#">如何使用 Foundation 构建网站</a>
                                    <br><small class="text-muted">2024-01-15</small>
                                </li>
                                <li style="margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee;">
                                    <a href="#">响应式设计最佳实践</a>
                                    <br><small class="text-muted">2024-01-10</small>
                                </li>
                                <li>
                                    <a href="#">CSS Grid 完全指南</a>
                                    <br><small class="text-muted">2024-01-05</small>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- 标签云 -->
                    <div class="card">
                        <div class="card-divider">
                            <h5 style="margin: 0;">标签</h5>
                        </div>
                        <div class="card-section tag-cloud">
                            <span class="label">HTML</span>
                            <span class="label">CSS</span>
                            <span class="label">JavaScript</span>
                            <span class="label">Foundation</span>
                            <span class="label">响应式</span>
                            <span class="label">前端开发</span>
                            <span class="label">Web设计</span>
                        </div>
                    </div>

                    <!-- 关注我们 -->
                    <div class="card">
                        <div class="card-divider">
                            <h5 style="margin: 0;">关注我们</h5>
                        </div>
                        <div class="card-section text-center">
                            <a href="#" class="button hollow small"><i class="fi-social-twitter"></i></a>
                            <a href="#" class="button hollow small"><i class="fi-social-facebook"></i></a>
                            <a href="#" class="button hollow small"><i class="fi-social-github"></i></a>
                        </div>
                    </div>
                </aside>
            </div>

            <!-- 主内容 -->
            <div class="cell medium-9">
                <main class="main-content">
                    <h2>主要内容区域</h2>
                    <p>这是页面的主要内容区域。侧边栏在左侧显示导航和其他辅助信息。</p>

                    <div class="card">
                        <div class="card-divider">
                            <h4>文章标题</h4>
                        </div>
                        <div class="card-section">
                            <p>这是一篇示例文章的内容。Foundation 提供了强大的网格系统，可以轻松创建各种布局。</p>
                            <p>侧边栏通常用于显示导航菜单、搜索框、分类、标签、热门文章等辅助内容。</p>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-divider">
                            <h4>另一篇文章</h4>
                        </div>
                        <div class="card-section">
                            <p>你可以根据需要自定义侧边栏的内容和样式。</p>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

侧边栏最佳实践 ​

  1. 响应式设计：在小屏幕上考虑隐藏或折叠侧边栏
  2. 内容优先级：将最重要的内容放在侧边栏顶部
  3. 视觉区分：使用背景色或边框区分侧边栏和主内容
  4. 固定位置：考虑使用粘性定位让侧边栏始终可见
  5. 简洁设计：避免在侧边栏放置过多内容

总结 ​

本章我们学习了：

  • 基本侧边栏布局
  • 粘性侧边栏
  • 带图标和嵌套菜单的侧边栏
  • 博客侧边栏设计
  • 管理后台侧边栏

下一章，我们将学习 Foundation 滑动导航。