Foundation 滑动导航(Off-Canvas)
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>
配置选项
属性
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
data-off-canvas | boolen | true | 是否启用 Off-Canvas |
position | string | left | Off-Canvas 侧边栏的位置 |
push | boolen | true | 主体内容是否被侧边栏挤压 |
transition-time | number | 250 | 显示/隐藏 Off-Canvas 的动画时间 |
transition-delay | number | 0 | 显示/隐藏 Off-Canvas 的延迟时间 |
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,可以针对不同的需求进行灵活定制,是一个非常值得尝试的前端技术。