1. fundation 环境搭建 + 初始module
1.第一种使用环境：css <!DOCTYPE html >
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
< html class= "no-js" lang= "en" >
< head >
< meta charset= "utf-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title >Foundation 5 </ title >
< link rel= "stylesheet" href= "../css/normalize.css" >
< link rel= "stylesheet" href= "../css/foundation.css" >
<link rel="stylesheet" href="../css/app.css"> // 自己的css样式，命名 必须要 app.css
< script src= "../js/vendor/modernizr.js" ></ script >
</ head >
< body >
< script src= "../js/vendor/jquery.js" ></ script >
< script src= "../js/foundation.min.js" ></ script >
< script >
$( document). foundation();
</ script >
</ body > </html>
2.第二种使用环境：sass
1.第三种使用环境：App
2. js 控制左右两侧菜单 动态效果
1. 有一系列控件是否单击“ 单击 "菜单的“链接”将关闭菜单 <script> $( document). foundation({
offcanvas : {
// Sets method in which offcanvas opens.
// [ move | overlap_single | overlap ] open_method: 'overlap', // 控制左侧菜单的效果 ： move 整体移动 | overlap_single 仅一个菜单显示 | overlap 两个菜单同时显示 // Should the menu close when a menu link is clicked?
// [ true | false ] close_on_click : false // true: 单击“单击”菜单的“链接”将关闭菜单。 false : 点击左侧链接无任何动作 }
}); </script>
2.有一系列的事件，你可以绑定到触发回调：侧边导航栏不再弹出 ① <script> $(document).on('open.fndtn.offcanvas', '[data-offcanvas]', function () { var off_canvas_wrap = $(this); });
$(document).on('close.fndtn.offcanvas', '[data-offcanvas]', function () { var off_canvas_wrap = $(this); }); </ script >
② <script> $(document) .on('open.fndtn.offcanvas', '[data-offcanvas]', function() { $('html').css('overflow', 'hidden'); }) .on('close.fndtn.offcanvas', '[data-offcanvas]', function() { $( 'html'). css( 'overflow', 'auto'); })
</script>
3.侧边导航栏默认状态： 显示/隐藏 $('.off-canvas-wrap').foundation('offcanvas', 'show', 'move-right'); // 向右移动，显示左侧菜单栏 $('.off-canvas-wrap').foundation('offcanvas', 'hide', 'move-left'); // ==默认状态，都不显示 $( '.off-canvas-wrap'). foundation( 'offcanvas', 'toggle', 'move-right'); // 向右移动