Jan 30 2010

CSS Spritemenu 0.2

Category: Web Development, technologyadmin @ 1:33 pm

I was looking into getting more experience using concepts that are light and can help speed up the performance of websites, but at the same time be stylish with a bit of animation using jQuery.  I came across this website and decided to give it a try.  This sprite menu is incredibly easy to use and will add a nice touch to your navigation menu to spruce up your website. The downside is that if you have to add a JavaScript file to you site which causes an additional server call and if you want the easing animation, you’ll have to add a second extra script to you site.  The good part is that you don’t have to write a lot of jQuery and CSS to implement the concept on your site.  It allows you to add custom animations and also comes with plenty of animation options for you to play around with.  You are able to customize the speed of your animations as well as apply it as an opacity, height, or width animation. The most work you’ll need to do is create the menu in photoshop. Other than that just style your menu and add a few lines of jQuery that define the size of your menu buttons, speed, and optional animation types. Here is an example of how I implemented it.

Check out the full tutorial.

Tags: , , , , , , , ,