<?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>Inspect Element &#187; navigation</title>
	<atom:link href="http://inspectelement.com/tag/navigation/feed/" rel="self" type="application/rss+xml" />
	<link>http://inspectelement.com</link>
	<description>Web Design &#38; Development Blog</description>
	<lastBuildDate>Thu, 10 May 2012 12:41:47 +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>Creative Uses of Navigation</title>
		<link>http://inspectelement.com/articles/creative-uses-of-navigation/</link>
		<comments>http://inspectelement.com/articles/creative-uses-of-navigation/#comments</comments>
		<pubDate>Mon, 06 Jul 2009 08:00:05 +0000</pubDate>
		<dc:creator>Tom Kenny</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[inspiration]]></category>
		<category><![CDATA[navigation]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://inspectelement.com/?p=930</guid>
		<description><![CDATA[With the combination of javascript and CSS, navigation doesn't have to be static transitions between content or just another standard boring menu. Below is a showcase of creative navigation that can make the user experience more interesting and memorable. <a href="http://inspectelement.com/articles/creative-uses-of-navigation/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>With the combination of javascript and CSS, navigation doesn&#8217;t have to be static transitions between content or just another standard boring menu. Below is a showcase of creative navigation that can make the user experience more interesting and memorable.</p>
<p><a href="http://www.taptaptap.com/"><img style="border: 0px initial initial;" title="taptaptap" src="http://inspectelement.com/wp-content/uploads/2009/07/taptaptap2.jpg" alt="taptaptap" width="560" height="218" /></a></p>
<p><a href="http://www.taptaptap.com/">Tap Tap Tap</a> smoothly slides in and out product information.</p>
<p><span id="more-930"></span><a href="http://www.rzmota.com/"><img class="alignnone size-full wp-image-956" title="rzmota" src="http://inspectelement.com/wp-content/uploads/2009/07/rzmota.jpg" alt="rzmota" width="560" height="218" /></a></p>
<p><a href="http://www.rzmota.com/">RZMota</a> loads content into a section at the bottom of the page.</p>
<p><a href="http://www.mbdragan.com/"><img class="alignnone size-full wp-image-938" title="mbdragan" src="http://inspectelement.com/wp-content/uploads/2009/07/mbdragan.jpg" alt="mbdragan" width="560" height="218" /></a></p>
<p><a href="http://www.mbdragan.com/">MB Dragan</a>&#8216;s navigation expands from the top to reveal sub-menus.</p>
<p><a href="http://www.redcrownstudio.com/"><img class="alignnone size-full wp-image-931" title="redcrown" src="http://inspectelement.com/wp-content/uploads/2009/07/redcrown.jpg" alt="redcrown" width="560" height="218" /></a></p>
<p><a href="http://www.redcrownstudio.com/">Red Crown Studio</a> slides up and down to the relevant content.</p>
<p><a href="http://dragoninteractive.com/"><img class="alignnone size-full wp-image-932" title="dragoninteractive" src="http://inspectelement.com/wp-content/uploads/2009/07/dragoninteractive.jpg" alt="dragoninteractive" width="560" height="218" /></a></p>
<p><a href="http://dragoninteractive.com/">Dragon Interactive</a> uses javascript to fade the menu states between colours on hover.</p>
<p><a href="http://www.polargold.de/"><img class="alignnone size-full wp-image-934" title="polargold" src="http://inspectelement.com/wp-content/uploads/2009/07/polargold.jpg" alt="polargold" width="560" height="218" /></a></p>
<p><a href="http://www.polargold.de/">Polar Gold</a> has big typography as it&#8217;s navigation with content appearing below each title upon click.</p>
<p><a href="http://www.branded07.com/"><img class="alignnone size-full wp-image-936" title="branded07" src="http://inspectelement.com/wp-content/uploads/2009/07/branded07.jpg" alt="branded07" width="560" height="218" /></a></p>
<p><a href="http://www.branded07.com/">branded07</a> uses a very simple navigation menu that has a follow effect when hovering from one section to another.</p>
<p><a href="http://www.apple.com/mac/"><img class="alignnone size-full wp-image-941" title="apple" src="http://inspectelement.com/wp-content/uploads/2009/07/apple.jpg" alt="apple" width="560" height="218" /></a></p>
<p><a href="http://www.apple.com/mac/">Apple</a> tend to be at the forefront when it comes to web design and their horizontal product navigation is no exception.</p>
<p><a href="http://www.webleeddesign.com"><img style="border: 0px initial initial;" title="webleeddesign" src="http://inspectelement.com/wp-content/uploads/2009/07/webleeddesign.jpg" alt="webleeddesign" width="560" height="218" /></a></p>
<p><a href="http://www.webleeddesign.com">We Bleed Design</a> uses transparent PNGs overlaying a series of colours making the transitions between content fun and interesting.</p>
<p><img class="alignnone size-full wp-image-957" title="marketinginformatico" src="http://inspectelement.com/wp-content/uploads/2009/07/marketinginformatico.jpg" alt="marketinginformatico" width="560" height="218" /></p>
<p><a href="http://www.marketing-informatico.com/">Marketing Informatico</a> uses an illustration of an iceberg and transitions between the sky and underwater.</p>
<p><a href="http://sursly.com/"><img class="alignnone size-full wp-image-948" title="sursly" src="http://inspectelement.com/wp-content/uploads/2009/07/sursly.jpg" alt="sursly" width="560" height="218" /></a></p>
<p><a href="http://sursly.com/">Sursly</a> is the portfolio of Tyler Fink who implements a very nice left-to-right sliding navigation.</p>
<p><a href="http://searchinsidevideo.com/"><img class="alignnone size-full wp-image-950" title="searchinsidevideo" src="http://inspectelement.com/wp-content/uploads/2009/07/searchinsidevideo.jpg" alt="searchinsidevideo" width="560" height="218" /></a></p>
<p><a href="http://searchinsidevideo.com/">Search Inside Video</a> mixes a content sliding navigation with a progress tracker display.</p>
<p><a href="http://www.pikaboo.be/"><img class="alignnone size-full wp-image-954" title="pikaboo" src="http://inspectelement.com/wp-content/uploads/2009/07/pikaboo.jpg" alt="pikaboo" width="560" height="218" /></a></p>
<p><a href="http://www.pikaboo.be/">Pikaboo</a> displays navigation content in lightboxes.</p>
<p><a href="http://www.gscottolson.com/csszen/"><img class="alignnone size-full wp-image-959" title="nowleavingearth" src="http://inspectelement.com/wp-content/uploads/2009/07/nowleavingearth.jpg" alt="nowleavingearth" width="560" height="218" /></a></p>
<p><a href="http://www.gscottolson.com/csszen/">Now Leaving Earth</a> is a <a href="http://www.csszengarden.com/">CSS Zen Garden</a> design by G. Scott Olson and scrolls from left-to-right with the rocket that flies into space staying in place and the background moving.</p>
<p><a href="http://www.jasonreedwebdesign.com/"><img class="alignnone size-full wp-image-961" title="jasonreed" src="http://inspectelement.com/wp-content/uploads/2009/07/jasonreed.jpg" alt="jasonreed" width="560" height="218" /></a></p>
<p><a href="http://www.jasonreedwebdesign.com/">Jason Read</a> uses an accordion effect to display content.</p>
<p><a href="http://www.associatedflavors.com/"><img class="alignnone size-full wp-image-963" title="associatedflavors" src="http://inspectelement.com/wp-content/uploads/2009/07/associatedflavors.jpg" alt="associatedflavors" width="560" height="218" /></a></p>
<p><a href="http://www.associatedflavors.com/">Associated Flavors</a> places it&#8217;s navigation in space, scrolling down to content.</p>
<p><a href="http://www.pojeta.cz/"><img class="alignnone size-full wp-image-965" title="tomaspojeta" src="http://inspectelement.com/wp-content/uploads/2009/07/tomaspojeta.jpg" alt="tomaspojeta" width="560" height="218" /></a></p>
<p><a href="http://www.pojeta.cz/">TomÃ¡Å¡ Pojeta</a> is another site that transitions between sky and underwater with beautiful illustrations.</p>
<p><a href="http://css-tricks.com/"><img class="alignnone size-full wp-image-967" title="csstricks" src="http://inspectelement.com/wp-content/uploads/2009/07/csstricks.jpg" alt="csstricks" width="560" height="218" /></a></p>
<p><a href="http://css-tricks.com/">CSS Tricks</a> displays a description about the destination upon hovering over the relevant tab.</p>
<p><a href="http://www.kriesi.at/"><img class="alignnone size-full wp-image-969" title="kriesi" src="http://inspectelement.com/wp-content/uploads/2009/07/kriesi.jpg" alt="kriesi" width="560" height="218" /></a></p>
<p><a href="http://www.kriesi.at/">Kriesi.at</a> implements an accordion effect directly into the navigation which reveals an icons for each section.</p>
<p><a href="http://www.tvrdek.cz/"><img class="alignnone size-full wp-image-970" title="tvrdek" src="http://inspectelement.com/wp-content/uploads/2009/07/tvrdek.jpg" alt="tvrdek" width="560" height="218" /></a></p>
<p><a href="http://www.tvrdek.cz/">JiÅ™Ã­ Tvrdek</a> displays navigation in the form of oranges in a tree with the content in the trunk and underground.</p>
]]></content:encoded>
			<wfw:commentRss>http://inspectelement.com/articles/creative-uses-of-navigation/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Page Caching using disk: enhanced

Served from: inspectelement.com @ 2012-05-21 14:54:05 -->
