Foundation 滑动导航(Off-Canvas)学习笔记
1. 基本概念
Foundation框架提供了Off-Canvas组件，用于实现响应式的导航栏。Off-Canvas是指在屏幕外部的面板，可以通过滑动进入用户的视野。
Off-Canvas的设计思路是为了适应移动设备的小屏幕和触摸操作，在手机等移动设备上可以轻松地实现导航栏的切换以及功能的展开收起。
2. 基本用法
使用Off-Canvas需要以下两步：
2.1 定义Off-Canvas
定义Off-Canvas需要一个包含菜单的面板，这个面板一开始是处于屏幕外的。可以使用Foundation提供的CSS类来定义Off-Canvas面板。
htmlCopy Code<div class="off-canvas position-left" id="offCanvasLeft">
<!-- Off-Canvas内容 -->
</div>
其中，class属性中的position-left表示Off-Canvas面板位于屏幕左侧，还可以选择position-right、position-top或position-bottom，分别表示Off-Canvas面板位于屏幕的四个边角。
2.2 触发Off-Canvas
Off-Canvas面板定义好之后，需要一个触发器来控制它的显示和隐藏。可以使用Foundation提供的CSS类来定义触发器。
htmlCopy Code<button class="button" type="button" data-toggle="offCanvasLeft">Open Menu</button>
其中，class属性中的button用于定义按钮样式，data-toggle属性用于指定Off-Canvas面板的ID。
3. 实例演示
下面是一个完整的Off-Canvas实例，演示了如何使用Off-Canvas组件实现一个响应式的导航栏。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Off-Canvas Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
<style>
.off-canvas .menu-item {
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="off-canvas position-left" id="offCanvasLeft">
<ul class="vertical menu">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">About</a></li>
<li class="menu-item"><a href="#">Services</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<nav class="top-bar">
<div class="top-bar-left">
<button class="button" type="button" data-toggle="offCanvasLeft">Menu</button>
</div>
</nav>
<div class="row">
<div class="columns large-12">
<h1>Welcome to my website</h1>
<p>This is a demo of the Off-Canvas component in Foundation.</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
在这个例子中，Off-Canvas面板位于左侧，通过按钮控制显示和隐藏。当屏幕尺寸较小时，导航栏会自动折叠，使用Off-Canvas组件可以很方便地实现响应式的导航栏效果。