移动Web 开发中的 Off Canvas 导航
Jeff 最近发布的DeveMobile 与EaseMobile 主题在导航栏上采用的是在一些native app 中常见的Off Canvas 导航。而关于 Off Canvas 导航,这里提供结合开发主题过程及网络上的资料,从个人认知的角度介绍下 Off Canvas 导航。
Off Canvas 简介
Off Canvas 导航相比也不陌生,在一些安卓应用(如谷歌的一些官方应用、易信、WordPress 安卓版)上常常能到——看到当你点击应用中的一个按钮时,会从左边或者右边侧拉出一个菜单。移动设备中空间极为有限,要显示最重要的内容,一些次要的或者不常用的内容最好做暂时隐藏处理,而专为移动端而生的Off-Canvas 就是这么一种“潜力无穷”的布局模式。
Off Canvas 来源or 例子
Off Canvas 据说最早来源于facebook 的iOS App,随后么被广泛应用于各大app 上(如path ),再后来也成了一些移动网页上的导航布局模式。比如说著名的Foundation 框架中就广泛采用了这种布局(见图)。
移动Web 开发中的 Off Canvas
在移动网页中要产生类似 Off Canvas 的效果,如果学过前端,貌似也容易想到思路,先产生导航菜单(HTML+CSS),默认隐藏或移动到看不见的位置(左侧或右侧),然后通过绑定某个鼠标或touch 事件调出导航菜单。但细细考虑,该如何实现这个“调出导航菜单”的过程?用CSS的margin? 还是CSS的display?或者说 jQuery 的animate ?CSS3 的 transition?考虑到移动设备的性能,不同的方法产生的效率是不同的,而这也是我们不得不予以重视的。SmashingMagazine 上有一篇文章《Implementing Off-Canvas Navigation For A Responsive Website》通过实验对各种方法进行对比,值得一看。
上面问题的结果么,就是采用CSS3 的 transition。具体而言是transforms and transitions,再具体而言是transform: translate3d 。为什么呢,因为可以调用设备硬件进行GPU 加速。高大上有木有!关于transform: translate3d,前端观察网上有一篇《高性能 CSS3 动画》已经做了非常详细的介绍,这里不累赘。
其他的一些资料(英文,貌似要访问外国网站):
对于CSS传统的pos:abs top/left 与translate() (有视频有真相!):Why Moving Elements With translate() Is Better Than pos:abs top/left
CSS 与 jquery 的动画对比:CSS3 vs jQuery Animations
移动Web 开发中的 Off Canvas:现成的解决方案
如果你够牛叉,可以自己写代码,当然,你也可以借用下面这里网络上现有的Off Canvas 的开源代码,以下列举一些:
一个jquery 插件:http://mobify.github.io/pikabu/
又一个jquery 插件:http://christopheryee.ca/pushy/
一个js 框架:http://www.aidanzealley.com/offcanvas/leftonly.html
响应式导航(Responsive Nav)插件:http://www.bootcss.com/p/responsive-nav.js/
一个小demo:a responsive off-canvas menu
本文参考文章: http://www.iconfans.org/thread-83339-1-1.html http://mobile.smashingmagazine.com/2014/02/24/exploring-potential-off-canvas-pattern-ux/ http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
虽然非原创,但编辑也辛苦,转载本文请注明来自DeveWork.com!
- 防止连接Mysql超时,JDBC探活配置
- 剑指offer——面试题10输入一个十进制整数,统计其中二进制1的个数
- 剑指offer——面试题9计算斐波纳切第n个数
- 剑指 offer——面试题8求旋转数组的最小值
- MYSQL INNODB表压缩
- 剑指offer——年龄排序问题
- Mysql Group Replication介绍
- 剑指offer——快速排序
- 架构高性能网站秘笈(四)——反向代理缓存
- 架构高性能网站秘笈(一)——了解衡量网站性能的指标
- MYSQL5.6&5.7编译安装
- 架构高性能网站秘笈(三)——浏览器缓存
- 剑指 offer代码解析——面试题39判断平衡二叉树(高效方法)
- 跟着柴毛毛学Spring(4)——面向切面编程![这里写图片描述](http://img.blog.csdn.net/20171031111402095)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 有关 php __autoload 自动加载类函数的用法
- sql 子查询(mysql)
- php 使用PDO,防止sql注入 简单说明
- js (javascript) 中获取年月日信息
- js(javascript)取得当前时间小时,分钟,秒 以及毫秒
- js(javascript) onclick与ondblclick 单击与双击事件
- unity5.x C# 获取屏幕宽度 设置不受重力影响
- unity5.x Translate平移移动 以及GetComponent获取组件
- php 计时器microtime 以及去掉数组重复值array_unique
- php 字符串打散为数组,用逗号分隔出数组
- php in_array 判断数组中是否存在此元素
- php str_replace 字符串替换
- strstr和strcchr查找字符串和区别
- php获取当前操作系统类型 PHP_OS
- php is_dir 判断是否存在这目录