<?xml version="1.0" encoding="UTF-8"?> <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" ><channel><title>American Butifarra &#187; Sprites</title> <atom:link href="http://claude.betancourt.us/tag/sprites/feed/" rel="self" type="application/rss+xml" /><link>http://claude.betancourt.us</link> <description>Claude Betancourt&#039;s Personal Blog</description> <lastBuildDate>Fri, 16 Dec 2011 02:43:25 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.3.1</generator> <item><title>Creating an Apple Style Menu with Animation</title><link>http://claude.betancourt.us/create-apple-style-top-navigation/</link> <comments>http://claude.betancourt.us/create-apple-style-top-navigation/#comments</comments> <pubDate>Mon, 28 Jul 2008 22:23:29 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[How-To]]></category> <category><![CDATA[Tutorials]]></category> <category><![CDATA[Apple]]></category> <category><![CDATA[CSS]]></category> <category><![CDATA[jQuery]]></category> <category><![CDATA[Photoshop]]></category> <category><![CDATA[Sprites]]></category><guid isPermaLink="false">http://claude.betancourt.us/blog/?p=107</guid> <description><![CDATA[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. <a href="http://claude.betancourt.us/create-apple-style-top-navigation/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description> <content:encoded><![CDATA[<p><span class="drop_cap">K</span>riesi Budschedl has <a href="http://www.kriesi.at/archives/apple-menu-improved-with-jquery"><b>posted a very detailed tutorial</b></a> to help you build your own Apple.com style menu and adds a nice touch by animating it.</p><p><img class="alignleft frame" src="/images/blog/assets/tutorial-kwicks-home.jpg?2ce803" border="0" /></p><p>To construct the basic menu, Kriesi takes advantage of <a href="http://www.alistapart.com/articles/sprites" title="CSS Sprites: Image Slicing's Kiss of Death">CSS Sprites</a>, a technique to reduce the number of image files necessary to accomplish things like rollovers, without the need to preload the images using JavaScript.</p><p>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 <a href="http://www.jeremymartin.name/projects.php?project=kwicks">Kwicks for jQuery</a>, a plugin written by Jerry Martin, resulting in the <a href="http://www.kriesi.at/wp-content/extra_data/kwicks_tutorial/kwicks_final.html">final product seen here</a>.</p><p><a href="http://www.kriesi.at/wp-content/extra_data/kwicks_tutorial/kwicks_final.html" title="Final product"><img class="aligncenter" src="/images/blog/assets/tutorial-kwicks-working-menu.png?2ce803" border="0" /></a></p> ]]></content:encoded> <wfw:commentRss>http://claude.betancourt.us/create-apple-style-top-navigation/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> </channel> </rss>
<!-- Served from: claude.betancourt.us @ 2012-02-07 14:47:37 by W3 Total Cache -->
