移动端左侧导航的实现

一、实现效果

主页:

点击导航键:

二、实现方案

0x1 CSS3+javascript方案

1、实现思路

利用css3的transform变换
translate(x,y),translatex() translatey()
transition过渡

2、网站主体

HTML部分

CSS部分

JS部分
DOMContentLoaded事件
DOMContentLoaded事件是在html document加载完成之后触发的。
不用等我们的样式、图片以及subframes等加载完毕。
相当于$(document).ready()
onload事件是页面上所有的DOM,样式表,脚本,图片,flash
都已经加载完成后触发。

0x2 jquery方案

1、实现思路
运用经典的左侧固定,右侧自适应的布局方式

2、jQuery代码
采用面向对象的方式书写