A radical jquery-dazzle animated navigation menu responds to click events _jquery

Today we are going to share a basic jquery animated navigation menu. This navigation menu, the initial page in the middle of a button, click the button, the menu from the left to fly into the page. Click the button again to navigate to the left message. The animation effect is very dazzling. Take a look at the effect chart:

SOURCE download

HTML code:

<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 code:

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.an

Imate 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-ser
If
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) {tra
nsition-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) {Transit
ion-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}