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

源码下载

超文本标记语言代码：

ulliaw2bc。首先/a/liliaw2bc。com ' second/a/liliaw2bc。第三届会议。w2bc。第四届会议。w2bc。com ' fifth/a/Li/ulbuttonAnimate/button script src=' on '(' click '，function () {$('ul ')).切换类(“动画”)；});//@ sourceURL=pen.js/scriptcss代码：

车身{文本-对齐：中央；} ul { width : 400 pxpadd : 0；margin: 0 auto} ul。动画李{ transform : translate(0)；} ul。动画li:的类型(1){过渡延迟： 0.05秒；} ul。动画li:的类型(2){过渡-延迟： 0.1s} ul。动画li:的类型(3){过渡-延迟： 0.15秒；} ul。动画li:的类型(4){过渡-延迟： 0.2s} ul。动画li:的类型(5){过渡-延迟： 0.25秒；}李{列表式：无；显示器：块；padd : 20 pxmargin : 12px 0；边界半径： 5px字体系列：号，无衬线；color: # fff背景# 8de 48dt transform : translate(-500%)；过渡：变换0.75秒三次贝塞尔曲线(0.175,0.885,0.32,1.08);} li:nth第(5)类{过渡-延迟：0.15秒；}李：第(4)种类型{跃迁延迟：0.3s；} li:nth第(3)种类型{过渡-延迟：0.45秒；} li:nth第(2)种类型{跃迁-延迟：0.6s；} li:nth第(1)种类型{过渡-延迟：0.75秒；}按钮{ padding: 12px 18pxborder:无；边界半径： 3pxcolor: # fff背景# 7DBED8}按钮：焦点{轮廓：无；}