Today to share a basic jquery Super animated navigation menu. This navigation menu, initially a button in the middle of the page, 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 works very well. Look together:
Online preview Source Download
The implemented code.
HTML code:
<ul> <Li><ahref= "Http://www.w2bc.com">First</a></Li> <Li><ahref= "Http://www.w2bc.com">Second</a></Li> <Li><ahref= "Http://www.w2bc.com">Third</a></Li> <Li><ahref= "Http://www.w2bc.com">Fourth</a></Li> <Li><ahref= "Http://www.w2bc.com">Fifth</a></Li> </ul> <Button>Animate</Button> <Scriptsrc= ' 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.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; }
Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/9693
A very animated navigation menu based on jquery