Creating an Apple Style Menu with Animation

Kriesi Budschedl has posted a very detailed tutorial to help you build your own Apple.com style menu and adds a nice touch by animating it.

To construct the basic menu, Kriesi takes advantage of CSS Sprites, a technique to reduce the number of image files necessary to accomplish things like rollovers, without the need to preload the images using JavaScript.

A single image contains all the navigation menu options in their normal and active states and CSS rules are used to move the appropriate menu option into view. Once the basic menu is working, animation is added by using Kwicks for jQuery, a plugin written by Jerry Martin, resulting in the final product seen here.

Claude is as a solutions architect at a unified communications company. He also helps small businesses increase their productivity, improve back-office processes and reduce costs by promoting the use of new technologies.
This entry was posted in How-To, Tutorials and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>