LUCiD GRAFiX Logo

Video tutorials
YouTube RSS Feed
Search

VIDEO TUTORIAL

jQuery Animated Menu

*Set the video to HD for best viewing experience.
Written by Posted on June 4th, 2013 No Comments
Share This

Today were going to be making a jQuery Animated Menu.

This horizontal menu gets it magic from jQuery, using the .animate method to modify the CSS of the list item. Yes. you could do this with just CSS3. However, this is compatible with more browsers.

The CSS

 The HTML

I’m including the body because I used it in the design as the containing element.

The Jquery

In this video I was using emmet which is a huge time saver and after using it for a day or two, you will wonder how you ever survived without it. http://emmet.io/. I am also going to include a link to the jQuery api on the .animate method. http://api.jquery.com/animate/

As always…

Happy Coding!

Check out the Demo! Download files!

About

Hi, my name is Eric Young. I’m a web designer who has worked in the IT industry since 2000. I love blogging and making the web a better place. If I'm not here I'm probably playing Gears of War. LOL

Related Articles You Might Enjoy!

CSS Specificity CSS Specificity
jQuery Tip 16 Crop an Image jQuery Tip 16 Crop an Image
clearfix How to make a proper clearfix
Leave a comment

Leave a Reply