一款基jquery超炫的动画导航菜单可响应单击事件


Posted in Javascript onNovember 02, 2014

今天给大家分享一款基jquery超炫的动画导航菜单。这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中。再次单击按钮,导航飞入左侧消息。动画效果很非常炫。一起看下效果图:

一款基jquery超炫的动画导航菜单可响应单击事件

html代码:

<ul>
<li><a href="http://www.w2bc.com">First</a></li>
<li><a href="http://www.w2bc.com">Second</a></li>
<li><a href="http://www.w2bc.com">Third</a></li>
<li><a href="http://www.w2bc.com">Fourth</a></li>
<li><a href="http://www.w2bc.com">Fifth</a></li>
</ul>
<button>
Animate</button>
<script src='jquery.js'></script>
<script> $('button').on('click', function () {
$('ul').toggleClass('animate');
}); //@ sourceURL=pen.js
</script>

css代码:

body
{
text-align: center;
}

ul
{
width: 400px;
padding: 0;
margin: 0 auto;
}
ul.animate li
{
transform: translate(0);
}
ul.animate li:nth-of-type(1)
{
transition-delay: 0.05s;
}
ul.animate li:nth-of-type(2)
{
transition-delay: 0.1s;
}
ul.animate li:nth-of-type(3)
{
transition-delay: 0.15s;
}
ul.animate li:nth-of-type(4)
{
transition-delay: 0.2s;
}
ul.animate li:nth-of-type(5)
{
transition-delay: 0.25s;
}

li
{
list-style: none;
display: block;
padding: 20px;
margin: 12px 0;
border-radius: 5px;
font-family: Helvetica, sans-serif;
color: #fff;
background: #8DE48D;
transform: translate(-500%);
transition: transform 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.08);
}
li:nth-of-type(5)
{
transition-delay: 0.15s;
}
li:nth-of-type(4)
{
transition-delay: 0.3s;
}
li:nth-of-type(3)
{
transition-delay: 0.45s;
}
li:nth-of-type(2)
{
transition-delay: 0.6s;
}
li:nth-of-type(1)
{
transition-delay: 0.75s;
}

button
{
padding: 12px 18px;
border: none;
border-radius: 3px;
color: #fff;
background: #7DBED8;
}
button:focus
{
outline: none;
}
Javascript 相关文章推荐
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
关于AngularJS中几种Providers的区别总结
May 17 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 #Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 #Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 #Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 #Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 #Javascript
js实现文章文字大小字号功能完整实例
Nov 01 #Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 #Javascript
You might like
php生成扇形比例图实例
2013/11/06 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
Python实现一个简单的MySQL类
2015/01/07 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
使用Python处理BAM的方法
2018/09/28 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
Python爬取网页信息的示例
2020/09/24 Python
python3实现简单飞机大战
2020/11/29 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
民族精神月活动总结
2014/08/28 职场文书
检察院起诉书
2015/05/20 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
bat批处理之字符串操作的实现
2022/03/16 Python
Go web入门Go pongo2模板引擎
2022/05/20 Golang