一款基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 相关文章推荐
js加减乘除丢失精度问题解决方法
May 16 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
angularJS深拷贝详解
Mar 23 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
layui导出所有数据的例子
Sep 10 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 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
天津市收音机工业发展史
2021/03/04 无线电
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
javascript 播放器 控制
2007/01/22 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
python从ftp下载数据保存实例
2013/11/20 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
Python模块常用四种安装方式
2020/10/20 Python
python Pexpect模块的使用
2020/12/25 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
幼儿园中班教学反思
2014/02/10 职场文书
欢迎领导标语
2014/06/27 职场文书
职代会闭幕词
2015/01/28 职场文书
个人学习总结范文
2015/02/15 职场文书
介绍信格式样本
2015/05/05 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
PHP RabbitMQ消息列队
2022/05/11 PHP