Foundation 滑动导航(Off-Canvas)技术文档

概述

Off-Canvas 是 Foundation 提供的一种滑动导航方式。在移动设备上，使用 Off-Canvas 可以让导航菜单从屏幕外侧滑动出现，避免占用太多宝贵的屏幕空间。在桌面设备上，Off-Canvas 可以让导航菜单作为一个侧栏，更加美观。

使用步骤

步骤1. 引入必要的文件

在网页头部引入 foundation.min.css 和 jquery.min.js 文件。

<link rel="stylesheet" href="./css/foundation.min.css">
<script src="./js/vendor/jquery.min.js"></script>

步骤2. 编写 HTML 结构

在网页主体部分添加一个包含导航菜单的 div 元素。

<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
  <!-- Off-Canvas Menu -->
  <ul class="vertical menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

步骤3. 设置触发 Off-Canvas 的按钮

在网页头部添加一个触发 Off-Canvas 的按钮。

<button type="button" class="button" data-toggle="offCanvas">Menu</button>

步骤4. 初始化 Off-Canvas

在网页底部添加一个初始化 Off-Canvas 的 JavaScript 代码。

<script>
  $(document).foundation();
</script>

配置选项

属性

JavaScript API

打开 Off-Canvas

$("#offCanvas").foundation("open");

关闭 Off-Canvas

$("#offCanvas").foundation("close");

切换 Off-Canvas 显示状态

$("#offCanvas").foundation("toggle");

销毁 Off-Canvas

$("#offCanvas").foundation("destroy");

结语

Foundation 的 Off-Canvas 提供了一个简单而实用的滑动导航实现方案，可以极大地提升移动端用户的体验。同时，Off-Canvas 又提供了丰富的配置选项和 API，可以针对不同的需求进行灵活定制，是一个非常值得尝试的前端技术。