<?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>Malleck Design :: Blog &#187; Navigation</title>
	<atom:link href="http://malleckdesignco.com/blog/category/navigation/feed/" rel="self" type="application/rss+xml" />
	<link>http://malleckdesignco.com/blog</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Fri, 03 Sep 2010 23:07:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>15 Incredibly useful jQuery navigation tutorials</title>
		<link>http://malleckdesignco.com/blog/web-design/15-incredibly-useful-jquery-navigation-tutorials/</link>
		<comments>http://malleckdesignco.com/blog/web-design/15-incredibly-useful-jquery-navigation-tutorials/#comments</comments>
		<pubDate>Wed, 26 May 2010 03:02:33 +0000</pubDate>
		<dc:creator>Joe</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Navigation]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://malleckdesignco.com/blog/?p=226</guid>
		<description><![CDATA[Having a clear, usable navigation system in place is key to any website design. There are many things you can do with CSS to spice up the navigation and make it more interesting and click-able. But you can take it a step further by using some cool jQuery techniques. Listed below are some amazing tutorials [...]]]></description>
			<content:encoded><![CDATA[<p>Having a clear, usable navigation system in place is key to any website design. There are many things you can do with CSS to spice up the navigation and make it more interesting and click-able. But you can take it a step further by using some cool jQuery techniques. Listed below are some amazing tutorials that will help you learn some great techniques to incorporate into your designs. Check them out and let me know what you think!</p>
<h3><a href="http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/">Mega Drop Down Menus w/ CSS &amp; jQuery</a></h3>
<p><a href="http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/"><img class="alignleft size-full wp-image-231" title="MegaDropdown" src="http://malleckdesignco.com/blog/wp-content/uploads/MegaDropdown.jpg" alt="" width="500" height="150" /></a><br />
<a href="http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/">View Tutorial »</a><br/></p>
<p><span id="more-226"></span></p>
<h3><a href="http://trevordavis.net/blog/tutorial/jquery-tabbed-navigation/">jQuery Tabbed Navigation</a></h3>
<p><a href="http://trevordavis.net/blog/tutorial/jquery-tabbed-navigation/"><img class="alignleft size-full wp-image-235" title="tabed" src="http://malleckdesignco.com/blog/wp-content/uploads/tabed.jpg" alt="" width="500" height="150" /></a><br />
<a href="http://trevordavis.net/blog/tutorial/jquery-tabbed-navigation/">View Tutorial »</a><br/></p>
<h3><a href="http://css-tricks.com/dynamic-page-replacing-content/">Dynamic Page / Replacing Content</a></h3>
<p><a href="http://css-tricks.com/dynamic-page-replacing-content/"><img class="alignleft size-full wp-image-230" title="dynamicpage" src="http://malleckdesignco.com/blog/wp-content/uploads/dynamicpage.jpg" alt="" width="500" height="150" /></a><br />
<a href="http://css-tricks.com/dynamic-page-replacing-content/">View Tutorial »</a><br/></p>
<h3><a href="http://net.tutsplus.com/tutorials/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/">Create a Cool Animated Navigation with CSS and jQuery</a></h3>
<p><a href="http://net.tutsplus.com/tutorials/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/"><img class="alignleft size-full wp-image-232" title="nettuts1" src="http://malleckdesignco.com/blog/wp-content/uploads/nettuts1.jpg" alt="" width="500" height="150" /></a><br />
<a href="http://net.tutsplus.com/tutorials/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/">View Tutorial »</a><br/></p>
<h3><a href="http://tutorialzine.com/2009/09/stylish-navigation-menu-jquery/">A Stylish Navigation Menu With jQuery</a></h3>
<p><a href="http://tutorialzine.com/2009/09/stylish-navigation-menu-jquery/"><img class="alignleft size-full wp-image-234" title="stylish1" src="http://malleckdesignco.com/blog/wp-content/uploads/stylish1.jpg" alt="" width="500" height="150" /></a><br />
<a href="http://tutorialzine.com/2009/09/stylish-navigation-menu-jquery/">View Tutorial »</a><br/></p>
<h3><a href="http://www.kriesi.at/archives/apple-menu-improved-with-jquery">Create an apple style menu and improve it via jQuery</a></h3>
<p><a href="http://www.kriesi.at/archives/apple-menu-improved-with-jquery"><img class="alignleft size-full wp-image-229" title="applestyle" src="http://malleckdesignco.com/blog/wp-content/uploads/applestyle.jpg" alt="" width="500" height="150" /></a><br />
<a href="http://www.kriesi.at/archives/apple-menu-improved-with-jquery">View Tutorial »</a><br/></p>
<h3><a href="http://webmuch.com/animated-navigation-bar-using-jquery/">Animated Navigation Bar Using jQuery</a></h3>
<p><a href="http://webmuch.com/animated-navigation-bar-using-jquery/"><img class="alignleft size-full wp-image-245" title="animated" src="http://malleckdesignco.com/blog/wp-content/uploads/animated.jpg" alt="" width="500" height="150" /></a><br />
<a href="http://webmuch.com/animated-navigation-bar-using-jquery">View Tutorial »</a><br/></p>
<h3><a href="http://www.onextrapixel.com/2010/02/05/how-to-build-a-jquery-brush-stroke-navigation/">How to Build a jQuery Brush Stroke Navigation</a></h3>
<p><a href="http://www.onextrapixel.com/2010/02/05/how-to-build-a-jquery-brush-stroke-navigation/"><img class="alignleft size-full wp-image-253" title="paintbrush" src="http://malleckdesignco.com/blog/wp-content/uploads/paintbrush.jpg" alt="" width="500" height="150" /></a><br />
<a href="http://www.onextrapixel.com/2010/02/05/how-to-build-a-jquery-brush-stroke-navigation/">View Tutorial »</a><br/></p>
<h3><a href="http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/">Sliding Top Menu With jQuery</a></h3>
<p><a href="http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/"><img class="alignleft size-full wp-image-258" title="tabdown" src="http://malleckdesignco.com/blog/wp-content/uploads/tabdown.jpg" alt="" width="500" height="150" /></a><br />
<a href="http://www.webresourcesdepot.com/sliding-top-menu-with-jquery">View Tutorial »</a><br/></p>
<h3><a href="http://web.enavu.com/tutorials/cool-navigation-menu-made-with-jquery/">Cool navigation menu made with JQuery</a></h3>
<p><a href="http://web.enavu.com/tutorials/cool-navigation-menu-made-with-jquery/"><img class="alignleft size-full wp-image-254" title="simple" src="http://malleckdesignco.com/blog/wp-content/uploads/simple.jpg" alt="" width="500" height="150" /></a><br />
<a href="http://web.enavu.com/tutorials/cool-navigation-menu-made-with-jquery/">View Tutorial »</a><br/></p>
<h3><a href="http://tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/">Halftone Navigation Menu With jQuery &amp; CSS3</a></h3>
<p><a href="http://tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/"><img class="alignleft size-full wp-image-249" title="dark2" src="http://malleckdesignco.com/blog/wp-content/uploads/dark2.jpg" alt="" width="500" height="150" /></a><br />
<a href="http://tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/">View Tutorial »</a><br/></p>
<h3><a href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/">Animated Menus Using jQuery</a></h3>
<p><a href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/"><img class="alignleft size-full wp-image-248" title="dark" src="http://malleckdesignco.com/blog/wp-content/uploads/dark.jpg" alt="" width="500" height="150" /></a><br />
<a href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/">View Tutorial »</a><br/></p>
<h3><a href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial">jQuery Tabbed Interface / Tabbed Structure Menu Tutorial</a></h3>
<p><a href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial"><img class="alignleft size-full wp-image-257" title="tab2" src="http://malleckdesignco.com/blog/wp-content/uploads/tab2.jpg" alt="" width="500" height="150" /></a><br />
<a href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial">View Tutorial »</a><br/></p>
<h3><a href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/">“Outside the Box” Navigation with jQuery</a></h3>
<p><a href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/"><img class="alignleft size-full wp-image-246" title="apple2" src="http://malleckdesignco.com/blog/wp-content/uploads/apple2.jpg" alt="" width="500" height="150" /></a><br />
<a href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/">View Tutorial »</a><br/></p>
<h3><a href="http://javascript-array.com/scripts/jquery_simple_drop_down_menu/">jQuery Simple Drop-Down Menu Plugin</a></h3>
<p><a href="http://javascript-array.com/scripts/jquery_simple_drop_down_menu/"><img class="alignleft size-full wp-image-233" title="simplenav" src="http://malleckdesignco.com/blog/wp-content/uploads/simplenav.jpg" alt="" width="500" height="150" /></a><br />
<a href="http://javascript-array.com/scripts/jquery_simple_drop_down_menu/">View Tutorial »</a><br/></p>
]]></content:encoded>
			<wfw:commentRss>http://malleckdesignco.com/blog/web-design/15-incredibly-useful-jquery-navigation-tutorials/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Great examples of vertical navigation</title>
		<link>http://malleckdesignco.com/blog/web-design/great-examples-of-vertical-navigation/</link>
		<comments>http://malleckdesignco.com/blog/web-design/great-examples-of-vertical-navigation/#comments</comments>
		<pubDate>Sun, 10 Jan 2010 23:22:24 +0000</pubDate>
		<dc:creator>Joe</dc:creator>
				<category><![CDATA[Best Practices]]></category>
		<category><![CDATA[Navigation]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Vertical Navigation]]></category>

		<guid isPermaLink="false">http://malleckdesignco.com/blog/?p=24</guid>
		<description><![CDATA[These days it&#8217;s quite normal to find the navigation of a website located across the top of the page horizontally. But, sometimes an additional vertical navigation is needed to draw attention to specific areas of the site. Other times a vertical navigational system may be the best solution for a given design. In researching vertical [...]]]></description>
			<content:encoded><![CDATA[<p>These days it&#8217;s quite normal to find the navigation of a website located across the top of the page horizontally. But, sometimes an additional vertical navigation is needed to draw attention to specific areas of the site. Other times a vertical navigational system may be the best solution for a given design.</p>
<p>In researching vertical navigation for a particular project, I ran across some amazing examples. Listed below are some of the best that I found.</p>
<h3>Worship Leader Insights</h3>
<p style="text-align: center;">
<p style="text-align: center;"><a title="worshipleaderinsights" href="http://worshipleaderinsights.com/"><img class="size-full wp-image-30 aligncenter" title="worshipleaderinsights.com" src="http://malleckdesignco.com/blog/wp-content/uploads/worshipleaderinsights.com_.gif" alt="Navigation example 1" width="520" height="232" /></a></p>
<p><span id="more-24"></span></p>
<h3>Hommu</h3>
<p style="text-align: center;"><a title="worshipleaderinsights" href="http://worshipleaderinsights.com/"></a><a href="http://www.hommu.com/"><img class="aligncenter size-full wp-image-29" title="www.hommu.com" src="http://malleckdesignco.com/blog/wp-content/uploads/www.hommu_.com_.gif" alt="Hommu Vertical Nav" width="520" height="232" /></a></p>
<h3>House Industries</h3>
<p style="text-align: center;"><a href="http://girard.houseind.com/nativity.html"><img class="aligncenter size-full wp-image-28" title="girard.houseind.com" src="http://malleckdesignco.com/blog/wp-content/uploads/girard.houseind.com_.gif" alt="House Industries Nav" width="520" height="232" /></a><a href="http://malleckdesignco.com/blog/wp-content/uploads/www.metalmother.com_.gif"></a></p>
<h3>Metal Mother</h3>
<p style="text-align: center;"><a href="http://www.metalmother.com/html/contents.htm"><img class="aligncenter size-full wp-image-27" title="www.metalmother.com" src="http://malleckdesignco.com/blog/wp-content/uploads/www.metalmother.com_.gif" alt="Metal Mother Nav" width="520" height="232" /></a><a href="http://malleckdesignco.com/blog/wp-content/uploads/www.open-comms.com_.gif"></a></p>
<h3>Open</h3>
<p style="text-align: center;"><a href="http://www.open-comms.com/"><img class="aligncenter size-full wp-image-26" title="www.open-comms.com" src="http://malleckdesignco.com/blog/wp-content/uploads/www.open-comms.com_.gif" alt="Open Nav" width="520" height="232" /></a><a href="http://riotindustries.com/"></a></p>
<h3>Riot Industries</h3>
<p style="text-align: center;"><a href="http://riotindustries.com/"><img class="aligncenter size-full wp-image-25" title="riotindustries.com" src="http://malleckdesignco.com/blog/wp-content/uploads/riotindustries.com_.gif" alt="Riot Industries" width="520" height="232" /></a></p>
<h3>Conclusion</h3>
<p>Navigation is one of the most important elements in web design. It must be clear, understandable, and attractive. Both horizontal and vertical navigation systems can be effective in a design. When do you think a vertical navigation is the best solution?</p>
]]></content:encoded>
			<wfw:commentRss>http://malleckdesignco.com/blog/web-design/great-examples-of-vertical-navigation/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
<!-- This Quick Cache file was built for (  malleckdesignco.com/blog/category/navigation/feed/ ) in 0.27566 seconds, on Sep 9th, 2010 at 4:24 am UTC. -->
<!-- This Quick Cache file will automatically expire ( and be re-built automatically ) on Sep 9th, 2010 at 5:24 am UTC -->