CSS3仿手机客户端展开和关闭菜单动画效果

在手机客户端上,我们常常会发现有很多这样子的效果,点击某个按钮,左边隐藏的菜单会出现,内容则被折开。类似于下面这样子。

animated-link

然后点击菜单跳转之后左边的菜单子弹自动收起来。或者再次点击上面的按钮,同样左边收起来,内容就完整显示了。

这个在web页面上也同样可以实现,而且很简单。你可以使用css3的动画效果来做,也可以使用JS来实现效果。本文讲的是CSS3的效果,当然完整的例子还是得用JS来实现的。

前面的文章中我们提到CSS3的动画一般可以用两种方式,一种是使用:checked,另一种是使用:target。

本例子中实现的关键代码:

.main{
position: relative;
width:100%;
background: #fff;
-webkit-transition:all .25s;
transition:all .25s;
min-height:300px;
}
#tm:checked ~ .main{-webkit-transform:translateX(150px);-ms-transform:translateX(150px);transform:translateX(150px);}


当点击按钮时.main向左移动150像素,也就是侧栏的宽度了。

演示地址

PS:这个http://code.caibaojian.com 是使用github页面做成的。使用github感觉有时候很坑爹啊。会出现上传错误之类的。不太想折腾的,写技术博客的更是没有这个想法。

还是自己控制博客,用熟悉的东西好点。

上面这个不够完美的,想要完美实现效果,当然是用js了。使用了zepto.js框架了,下面这个演示就是这个框架的,跟jQuery使用差不多,不过体积小多了。

演示地址

2014.4.16:功能完善,增加了当点击左边出来的时候,点击右边内容的任意区域,左边的内容都可以缩回去。

演示地址

原文链接:(http://caibaojian.com/app-animated-menu.html)
转发请注明来自前端开发博客
评论已关闭。

“CSS3仿手机客户端展开和关闭菜单动画效果”有1个评论

  1. 约翰Mr

    源码在哪里下载呢

    登录回复