Foundation 滑动导航(Off-Canvas) | 菜鸟教程
菜鸟教程 -- 学的不仅是技术，更是梦想！
首页
HTML
CSS
JavaScript
Vue
Bootstrap
NodeJS
Python3
Python2
Java
C++
C#
Go
SQL
Linux
jQuery
本地书签
首页
HTML
CSS
JS
本地书签
Search
Python3 教程
Python2 教程
Vue3 教程
vue2 教程
Bootstrap3 教程
Bootstrap4 教程
Bootstrap5 教程
Bootstrap2 教程
Foundation 教程
Foundation 教程
Foundation 起步
Foundation 文本
Foundation 表格
Foundation 按钮
Foundation 按钮组
Foundation 图标
Foundation 标签
Foundation 提醒框
Foundation 进度条
Foundation 面板
Foundation 图片
Foundation 下拉菜单
Foundation 折叠列表
Foundation 列表
Foundation 选项卡
Foundation 分页
Foundation 价格表
Foundation 顶部导航栏
Foundation 侧边栏
Foundation 滑动导航(Off-Canvas)
Foundation Magellan
Foundation 表单
Foundation 输入框尺寸
Foundation 开关
Foundation 滑块
Foundation 提示框
Foundation 模态框
Foundation Joyride
Foundation 均衡器
Foundation 网格
Foundation 网格系统
Foundation 网格 - 水平堆叠
Foundation 网格 - 小型设备
Foundation 网格 - 中型设备
Foundation 网格 - 大型设备
Foundation 块状网格
Foundation 网格实例
Foundation 参考手册
Foundation 图标参考手册
Foundation CSS 参考手册
Foundation CSS 可见性
Foundation 侧边栏
Foundation 麦哲伦（Magellan）导航
Foundation 滑动导航(Off-Canvas)
侧边栏导航
Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了
(点击菜单按钮菜单从左侧滑出):
创建滑动导航
创建滑动导航实例如下：
实例
<!-- 最外层div：页面布局 --><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"> <!-- Add
links or other stuff here --> <ul
class="off-canvas-list test">
<li><label>Heading</label></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
... </ul> </aside>
<!-- 主要内容 --> <section
class="main-section"> <h3>Lorem Ipsum</h3>
<p>....</p> </section> <!--
关闭菜单 --> <a
class="exit-off-canvas"></a> </div> <!-- 结束内部内容 -->
</div> <!-- 结束滑动菜单 --><!-- 初始化 Foundation JS --><script>
$(document).ready(function() {
$(document).foundation();})
</script>
尝试一下 »
Foundation 侧边栏
Foundation 麦哲伦（Magellan）导航
点我分享笔记
取消
分享笔记
昵称昵称 (必填)
邮箱邮箱 (必填)
引用地址引用地址
分类导航
HTML / CSSHTML 教程HTML5 教程CSS 教程CSS3 教程Bootstrap3 教程Bootstrap4 教程Bootstrap5 教程Font Awesome 教程Foundation 教程 JavaScriptJavaScript 教程HTML DOM 教程jQuery 教程AngularJS 教程AngularJS2 教程Vue.js 教程Vue3 教程React 教程TypeScript 教程jQuery UI 教程jQuery EasyUI 教程Node.js 教程AJAX 教程JSON 教程Echarts 教程Chart.js 教程Highcharts 教程Google 地图 教程 服务端Python 教程Python2.x 教程Linux 教程Docker 教程Ruby 教程Java 教程C 教程C++ 教程Perl 教程Servlet 教程JSP 教程Lua 教程Rust 教程Scala 教程Go 教程PHP 教程数据结构与算法Django 教程Zookeeper 教程设计模式正则表达式Maven 教程Verilog 教程ASP 教程AppML 教程VBScript 教程 数据库SQL 教程MySQL 教程PostgreSQL 教程SQLite 教程MongoDB 教程Redis 教程Memcached 教程 数据分析Python 教程NumPy 教程Pandas 教程Matplotlib 教程Scipy 教程R 教程Julia 教程 移动端Android 教程Swift 教程jQuery Mobile 教程ionic 教程Kotlin 教程 XML 教程XML 教程DTD 教程XML DOM 教程XSLT 教程XPath 教程XQuery 教程XLink 教程XPointer 教程XML Schema 教程XSL-FO 教程SVG 教程 ASP.NETASP.NET 教程C# 教程Web Pages 教程Razor 教程MVC 教程Web Forms 教程 Web ServiceWeb Service 教程WSDL 教程SOAP 教程RSS 教程RDF 教程 开发工具Eclipse 教程Git 教程Svn 教程Markdown 教程 网站建设HTTP 教程网站建设指南浏览器信息网站主机教程TCP/IP 教程W3C 教程网站品质
Advertisement
反馈/建议
在线实例
·HTML 实例
·CSS 实例
·JavaScript 实例
·Ajax 实例
·jQuery 实例
·XML 实例
·Java 实例
字符集&工具
· HTML 字符集设置
· HTML ASCII 字符集
· JS 混淆/加密
· PNG/JPEG 图片压缩
· HTML 拾色器
· JSON 格式化工具
· 随机数生成器
最新更新
·
Go fmt.Printf ...
·
CSS backdrop-filte
·
使用 JS 的 down...
·
Navigator produ...
·
Navigator onLin...
·
Navigator langu...
·
Navigator geolo...
站点信息
·
意见反馈
·
免责声明
·
关于我们
·
文章归档
关注微信
Copyright 2013-2022 菜鸟教程
runoob.com All Rights Reserved. 备案号：闽ICP备15012807号-1
微信关注