侧边栏导航

Posted on 9 月 21, 2026 by

Foundation Off-Canvas 侧边栏导航

一、Off-Canvas 概述

Off-Canvas（滑动侧边栏）是一种在移动端和后台管理系统中非常流行的导航模式。菜单默认隐藏在视口外侧，点击触发按钮后从左侧或右侧滑入，不占用主内容区域空间，适合导航项较多的场景。

核心结构

元素类 / 属性作用
最外层 <div>.off-canvas-wrap + data-offcanvasOff-Canvas 容器，必须包裹全部内容
.inner-wrap内部内容包裹层包含所有工具栏、菜单、主内容
.tab-bar顶部工具栏包含触发按钮和标题
.left-off-canvas-toggle左侧菜单触发器点击打开左侧菜单
.right-off-canvas-toggle右侧菜单触发器点击打开右侧菜单
.left-off-canvas-menu左侧滑动菜单默认隐藏，从左侧滑入
.right-off-canvas-menu右侧滑动菜单默认隐藏，从右侧滑入
.off-canvas-list菜单列表样式用于 <ul> 的样式类
.main-section主内容区域页面主要内容
.exit-off-canvas遮罩关闭层点击菜单外区域关闭菜单

⚠️ 必须初始化 Foundation JS：$(document).foundation();

二、基础左侧 Off-Canvas 导航

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
        <nav class="tab-bar">
            <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
            </section>

            <section class="middle tab-bar-section">
                <h1 class="title">Off-canvas Example</h1>
            </section>
        </nav>

        <!-- 左侧滑动菜单 -->
        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><label>Heading</label></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><label>Another Heading</label></li>
                <li><a href="#">Link 5</a></li>
                <li><a href="#">Link 6</a></li>
            </ul>
        </aside>

        <!-- 主要内容 -->
        <section class="main-section">
            <h3>Lorem Ipsum</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Mauris volutpat mi id lorem placerat pulvinar. Donec
                sollicitudin nunc non dapibus bibendum. Cras tincidunt
                vitae enim vel ultrices. Sed at lacinia nisl.
            </p>
            <p>
                Curabitur euismod, sapien quis dapibus lobortis, erat
                justo fermentum velit, at facilisis nisl magna vel augue.
                Phasellus nec eros vitae odio tempus viverra.
            </p>
        </section>

        <!-- 关闭菜单（点击遮罩层关闭） -->
        <a class="exit-off-canvas"></a>

    </div>
</div>Code language: HTML, XML (xml)

点击左上角 ☰ 图标，左侧菜单滑出；点击菜单外灰色遮罩区域自动关闭。

三、右侧 Off-Canvas 导航

将 left 替换为 right 即可实现从右侧滑出的菜单：

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
        <nav class="tab-bar">
            <section class="middle tab-bar-section">
                <h1 class="title">Right Off-canvas Example</h1>
            </section>
            <section class="right-small">
                <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
            </section>
        </nav>

        <!-- 右侧滑动菜单 -->
        <aside class="right-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><label>用户中心</label></li>
                <li><a href="#">个人资料</a></li>
                <li><a href="#">账户设置</a></li>
                <li><a href="#">消息通知</a></li>
                <li><a href="#">退出登录</a></li>
            </ul>
        </aside>

        <section class="main-section">
            <h3>右侧菜单示例</h3>
            <p>点击右上角图标打开右侧滑动菜单。</p>
        </section>

        <a class="exit-off-canvas"></a>
    </div>
</div>Code language: HTML, XML (xml)

四、左右双侧 Off-Canvas 导航

同时配置左侧和右侧菜单，满足更复杂的导航需求：

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
        <nav class="tab-bar">
            <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
            </section>

            <section class="middle tab-bar-section">
                <h1 class="title">双侧 Off-canvas</h1>
            </section>

            <section class="right-small">
                <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
            </section>
        </nav>

        <!-- 左侧菜单 -->
        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><label>主导航</label></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>

        <!-- 右侧菜单 -->
        <aside class="right-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><label>用户</label></li>
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><label>设置</label></li>
                <li><a href="#">主题切换</a></li>
                <li><a href="#">语言设置</a></li>
            </ul>
        </aside>

        <section class="main-section">
            <h3>左右双侧菜单</h3>
            <p>点击左上角图标打开主导航，点击右上角图标打开用户菜单。</p>
        </section>

        <a class="exit-off-canvas"></a>
    </div>
</div>Code language: HTML, XML (xml)

五、完整可运行示例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Foundation Off-Canvas 侧边栏导航示例</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
    <script src="foundation-5.5.3/js/vendor/jquery.js"></script>
    <script src="foundation-5.5.3/js/foundation.min.js"></script>
    <script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
    <style>
        body {
            background: #f5f5f5;
        }
        .main-section {
            padding: 20px;
        }
        .off-canvas-list a {
            color: #fff;
        }
        .off-canvas-list label {
            color: #999;
            background: #333;
            padding: 8px 15px;
            margin: 0;
            font-size: 12px;
            text-transform: uppercase;
        }
    </style>
</head>
<body>

<!-- 左侧 Off-Canvas -->
<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
        <nav class="tab-bar">
            <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
            </section>

            <section class="middle tab-bar-section">
                <h1 class="title">Foxdevelop - Off-canvas Demo</h1>
            </section>
        </nav>

        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><label>主导航</label></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><label>分类</label></li>
                <li><a href="#">HTML/CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">数据库</a></li>
            </ul>
        </aside>

        <section class="main-section">
            <div class="row">
                <div class="medium-12 columns">
                    <h3>Off-Canvas 侧边栏导航</h3>
                    <p>
                        点击左上角菜单图标（☰）即可打开左侧滑动导航栏。
                        点击菜单外灰色遮罩区域或再次点击图标可关闭菜单。
                    </p>
                    <p>
                        Off-Canvas 非常适合移动端网站和后台管理系统，
                        可以在有限屏幕空间内提供完整的导航结构。
                    </p>
                    <hr />
                    <h4>特性说明</h4>
                    <ul>
                        <li>支持左侧和右侧滑出</li>
                        <li>可同时配置左右双侧菜单</li>
                        <li>点击遮罩层自动关闭</li>
                        <li>响应式适配，桌面端同样可用</li>
                        <li>菜单内支持分组标签（label）</li>
                    </ul>
                </div>
            </div>
        </section>

        <a class="exit-off-canvas"></a>
    </div>
</div>

</body>
</html>Code language: HTML, XML (xml)

六、使用要点小结

功能实现方式
创建 Off-Canvas最外层 <div class="off-canvas-wrap" data-offcanvas>
内部包裹<div class="inner-wrap">（必须）
顶部工具栏<nav class="tab-bar">
左侧触发按钮<a class="left-off-canvas-toggle menu-icon">
右侧触发按钮<a class="right-off-canvas-toggle menu-icon">
左侧菜单<aside class="left-off-canvas-menu">
右侧菜单<aside class="right-off-canvas-menu">
菜单列表样式<ul class="off-canvas-list">
菜单分组标签<li><label>标题</label></li>
主内容区<section class="main-section">
点击遮罩关闭<a class="exit-off-canvas"></a>
JS 初始化$(document).foundation()
Posted in Foundation教程

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注