前端开发 ·

移动端左侧导航的实现

一、实现效果

主页:

点击导航键:

二、实现方案

0x1 CSS3+javascript方案

1、实现思路

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

  • <' transition-property '>:检索或设置对象中的参与过渡的属性
  • <' transition-duration '>:检索或设置对象过渡的持续时间
  • <' transition-timing-function '>:检索或设置对象中过渡的动画类型
    • linear:线性过渡。
      ease:平滑过渡。
      ease-in:由慢到快。
      ease-out:由快到慢。
      ease-in-out:由慢到快再到慢。
  • <' transition-delay '>:检索或设置对象延迟过渡的时间
    缩写:transition: all 0.2s ease-in-out;

2、网站主体

HTML部分

CSS部分

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

0x2 jquery方案

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

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

参与评论