<?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>ExtraTuts &#187; JavaScript</title>
	<atom:link href="http://www.extratuts.com/category/javascript-tutorials/feed" rel="self" type="application/rss+xml" />
	<link>http://www.extratuts.com</link>
	<description>ExtraTuts</description>
	<lastBuildDate>Wed, 31 Aug 2011 19:21:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>16 amazing jquery navigation menu tutorials</title>
		<link>http://www.extratuts.com/16-amazing-jquery-navigation-menu-tutorials</link>
		<comments>http://www.extratuts.com/16-amazing-jquery-navigation-menu-tutorials#comments</comments>
		<pubDate>Fri, 08 Oct 2010 10:02:40 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[jquery tutorials]]></category>
		<category><![CDATA[menu]]></category>
		<category><![CDATA[navigation]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=1061</guid>
		<description><![CDATA[Navigation menu is the first way to show the content of any web site besides it give a great help to keep the visitors discovering all the site categories and have a direct impact in average time on the site, it is nice to add interesting effects to your navigation menu which give a good [...]


Related posts:<ol><li><a href='http://www.extratuts.com/css-jquery-animated-navigation-2' rel='bookmark' title='CSS and jQuery Animated Navigation'>CSS and jQuery Animated Navigation</a></li>
<li><a href='http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples' rel='bookmark' title='25+ jQuery Tutorials Roundup With Examples'>25+ jQuery Tutorials Roundup With Examples</a></li>
<li><a href='http://www.extratuts.com/how-to-create-a-drop-down-navigation-menu' rel='bookmark' title='How To Create a Drop Down Navigation Menu'>How To Create a Drop Down Navigation Menu</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<div id="_mcePaste">
<p>Navigation menu is the first way to show the content of any web site besides it give a great help to keep the visitors discovering all the site categories and have a direct impact in average time on the site,</p>
<p>it is nice to add interesting effects to your navigation menu which give a good looking for the site , jquery navigation tabs helps you give your site navigation menu nice visual appearance to help visitors to recognizes your site content and explore it&#8217;s pages so we&#8217;ll feature some of the most amazing  jquery demos can help you to make your own good looking navigation menu tabs.</p>
<div>
<h2><a title="WanderWall with  jQuery, CSS3 &amp; HTML5 " href="http://addyosmani.com/blog/wanderwall/" target="_blank">WanderWall with  jQuery, CSS3 &amp; HTML5</a></h2>
<p><span style="font-family: Arial; color: #585858;"><span style="line-height: 18px; font-size: medium;">Wonderful hover-based user interface using jQuery, CSS3, HTML5 tutorial</span></span></p>
<p style="text-align: center;"><a href="http://www.addyosmani.com/resources/wanderwall/index.html"><img class="aligncenter size-full wp-image-1075" style="display: block; margin-left: auto; margin-right: auto; border: 0px initial initial;" title="wanderwall" src="http://www.extratuts.com/wp-content/uploads/2010/09/wanderwalls2.jpg" alt="jQuery " width="530" height="342" /></a></p>
<p style="text-align: center;"><a title="WanderWall with  jQuery, CSS3 &amp; HTML5" href="http://www.addyosmani.com/resources/wanderwall/index.html" target="_blank">Demo</a> | <a title="WanderWall with  jQuery, CSS3 &amp; HTML5" href="http://www.addyosmani.com/resources/wanderwall/index2.html" target="_blank">Demo 2</a> | <a title="WanderWall with  jQuery, CSS3 &amp; HTML5" href="http://www.addyosmani.com/resources/wanderwall/index3.html" target="_blank">Demo 3</a> | <a title="WanderWall with  jQuery, CSS3 &amp; HTML5" href="http://www.addyosmani.com/resources/wanderwall/jquerywanderwall.rar" target="_blank">Download</a> | <a title="WanderWall with  jQuery, CSS3 &amp; HTML5" href="http://addyosmani.com/blog/wanderwall/" target="_blank">Details</a></p>
</div>
</div>
<h2><a title="Slick Drop down Menu with jQuery" href="http://devsnippets.com/article/slick-drop-down-menu-with-easing-effect-using-jquery-css.html" target="_blank">Slick Drop down Menu with jQuery</a></h2>
<p><span style="font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; font-size: 14px; color: #323d46;">Tutorial uses the jQuery &amp; CSS to create an attractive and functional dropdown menu </span></p>
<p style="text-align: center;"><a href="http://devsnippets.com/img/demo-jquery/demo4.html"><img class="aligncenter size-full wp-image-1071" title="Slick Drop down Menu with jQuery" src="http://www.extratuts.com/wp-content/uploads/2010/09/jquery-4.jpg" alt="Slick Drop down Menu with jQuery" width="500" height="250" /></a></p>
<p style="text-align: center;"><a title="Slick Drop down Menu with jQuery" href="http://devsnippets.com/img/demo-jquery/demo4.html" target="_blank">Demo</a> | <a title="Slick Drop down Menu with jQuery" href="http://devsnippets.com/img/demo-jquery/demo4.html.zip" target="_blank">Download</a> | <a title="jQuery" href="http://devsnippets.com/article/slick-drop-down-menu-with-easing-effect-using-jquery-css.html" target="_blank">Details</a></p>
<h2><a title="Fluid Navigation menu with jQuery &amp; CSS" href="http://addyosmani.com/blog/fluid-navigation-how-to-create-an-informative-menu-bar-with-jquery-in-just-a-few-minutes/" target="_blank">Fluid Navigation menu with jQuery &amp; CSS</a></h2>
<p>simple jquary navigation menu using html &amp; css</p>
<p style="text-align: center;"><a href="http://addyosmani.com/resources/fluid-menu/fluid-menu.html"><img class="aligncenter size-full wp-image-1072" title="Fluid Navigation menu with jQuery &amp; CSS" src="http://www.extratuts.com/wp-content/uploads/2010/09/jquery-01.jpg" alt="Fluid Navigation menu with jQuery &amp; CSS" width="500" height="298" /></a></p>
<p style="text-align: center;"><a title="Fluid Navigation menu with jQuery &amp; CSS" href="http://addyosmani.com/resources/fluid-menu/fluid-menu.html" target="_blank">Demo</a> | <a title="Fluid Navigation menu with jQuery &amp; CSS" href="http://addyosmani.com/resources/fluid-menu/fluid-menu.zip" target="_blank">Download</a> | <a title="Fluid Navigation menu with jQuery &amp; CSS" href="http://addyosmani.com/blog/fluid-navigation-how-to-create-an-informative-menu-bar-with-jquery-in-just-a-few-minutes/" target="_blank">Details</a></p>
<h2><a title="http://addyosmani.com/blog/formbox/" href="http://addyosmani.com/blog/formbox/" target="_blank">FormBox Drop-Down Menu with  jQuery &amp; CSS3</a></h2>
<p>&nbsp;</p>
<p>Drop-Down Menu With Integrated Forms using jQuery &amp; CSS3</p>
<p style="text-align: center;"><a href="http://www.addyosmani.com/resources/formbox/release2"><img class="aligncenter size-full wp-image-1073" title="jQuery " src="http://www.extratuts.com/wp-content/uploads/2010/09/520b.jpg" alt="jQuery " width="530" height="324" /></a></p>
<p style="text-align: center;"><a title="FormBox Drop-Down Menu with  jQuery &amp; CSS3" href="http://www.addyosmani.com/resources/formbox/release2" target="_blank">Demo</a> | <a title="FormBox Drop-Down Menu with  jQuery &amp; CSS3" href="http://www.addyosmani.com/resources/formbox/release2/formbox.zip" target="_blank">Download</a> | <a title="FormBox Drop-Down Menu with  jQuery &amp; CSS3" href="http://addyosmani.com/blog/formbox/" target="_blank">Details</a></p>
<h2></h2>
<div id="_mcePaste">
<h2 style="font-size: 1.5em;"><a title="Cool Animated Navigation with CSS and jQuery" href="http://net.tutsplus.com/tutorials/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/" target="_blank">Cool Animated Navigation with CSS and jQuery</a></h2>
<p><span style="font-family: Arial, Helvetica, sans-serif; line-height: 21px; color: #575757; font-size: 14px;">Really cool animated navigation menu using just CSS and jQuery</span></p>
<p style="text-align: center;"><a href="http://d2o0t5hpnwv4c1.cloudfront.net/009_jQueryMenu/sm/result/index.html"><img class="aligncenter size-full wp-image-1111" title="jquery-navigation-slide" src="http://www.extratuts.com/wp-content/uploads/2010/09/jquery-navigation-slide.jpg" alt="jquery navigation slide" width="570" height="160" /></a></p>
</div>
<p style="text-align: center;"><a title="Cool Animated Navigation with CSS and jQuery" href="http://d2o0t5hpnwv4c1.cloudfront.net/009_jQueryMenu/sm/result/index.html" target="_blank">Demo</a> | <a title="Cool Animated Navigation with CSS and jQuery" href="http://d2o0t5hpnwv4c1.cloudfront.net/009_jQueryMenu/sm/result.zip" target="_blank">Download</a> | <a title="Cool Animated Navigation with CSS and jQuery" href="http://net.tutsplus.com/tutorials/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/" target="_blank">Details</a></p>
<h1 class="post-title" style="font-size: 25px; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: bold; font-style: inherit; font-family: inherit; vertical-align: baseline; letter-spacing: -1px; line-height: 29px; text-align: left; padding: 0px; margin: 0px;"></h1>
<h2 style="font-size: 1.5em;"><a title="Halftone Navigation Menu With jQuery &amp; CSS3" href="http://tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/" target="_blank">Halftone Navigation Menu With jQuery &amp; CSS3</a></h2>
<p>A CSS3 &amp; jQuery halftone-style navigation menu</p>
<div style="text-align: center;"><a href="http://demo.tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/demo.html#"><img class="aligncenter size-full wp-image-1109" style="display: block; margin-left: auto; margin-right: auto; border: 0px initial initial;" title="Halftone Navigation Menu With jQuery &amp; CSS3" src="http://www.extratuts.com/wp-content/uploads/2010/09/jquery-08.jpg" alt="Halftone Navigation Menu With jQuery &amp; CSS3" width="500" height="300" /></a></div>
<div style="text-align: center;"><a title="Halftone Navigation Menu With jQuery &amp; CSS3" href="http://demo.tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/demo.html#" target="_blank">Demo</a> | <a title="Halftone Navigation Menu With jQuery &amp; CSS3" href="http://demo.tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/demo.zip" target="_blank">Download</a> | <a title="Halftone Navigation Menu With jQuery &amp; CSS3" href="http://tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/" target="_blank">Details</a></div>
<h2><a title="How to Build a Lava-Lamp Style Navigation Menu" href="http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-lava-lamp-style-navigation-menu/" target="_blank">Lava-Lamp Style Navigation Menu</a></h2>
<p><span style="font-family: Arial, Helvetica, sans-serif; line-height: 21px; color: #575757; font-size: 14px;">lava-lamp style menu , Three-level navigation menu using a JavaScript library </span></p>
<p style="text-align: center;"><a href="http://nettuts.s3.amazonaws.com/600_spasticNav/index.html"><img class="aligncenter size-full wp-image-1081" title="Lava-Lamp Style Navigation Menu" src="http://www.extratuts.com/wp-content/uploads/2010/09/image_thumb33.png" alt="Lava-Lamp Style Navigation Menu" width="501" height="198" /></a></p>
<p style="text-align: center;"><a title="Lava-Lamp Style Navigation Menu" href="http://nettuts.s3.amazonaws.com/600_spasticNav/index.html" target="_blank">Demo</a> | <a title="Lava-Lamp Style Navigation Menu" href="http://github.com/JeffreyWay/SpasticNav/zipball/master" target="_blank">Download</a> | <a title="Lava-Lamp Style Navigation Menu" href="http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-lava-lamp-style-navigation-menu/" target="_blank">Details</a></p>
<h2><a title="Sliding Jquery Menu" href="http://www.hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" target="_blank">Sliding JQuery Menu</a></h2>
<p><span style="font-family: Verdana, Geneva, sans-serif; line-height: 18px; font-size: 12px; color: #575757;">Create a sliding menu button using jquery</span></p>
<p style="text-align: center;"><a href="http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html"><img class="aligncenter size-full wp-image-1084" title="jquery-sliding-menu-tutplus" src="http://www.extratuts.com/wp-content/uploads/2010/09/jquery-sliding-menu-tutplus.jpg" alt="jQuery " width="570" height="131" /></a></p>
<p style="text-align: center;"><a title="Sliding Jquery Menu" href="http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html" target="_self">Demo</a> | <a title="Sliding Jquery Menu" href="http://www.hv-designs.co.uk/tutorials/sliding_menu/sample.zip" target="_blank">Download</a> | <a title="Sliding Jquery Menu" href="http://www.hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" target="_blank">Details</a></p>
<p style="text-align: center;"><script type="text/javascript"><!--
google_ad_client = "ca-pub-4023069866880559";
/* extra in post */
google_ad_slot = "5362203380";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<h2><a title="Kwicks for jQuery" href="http://www.jeremymartin.name/projects.php?project=kwicks" target="_blank">Kwicks for jQuery</a></h2>
<p><span style="font-family: Georgia, serif; line-height: 20px; color: #333333;">Navigation </span><span style="font-family: Georgia, serif; line-height: 20px; color: #333333;">menu </span><span style="font-family: Georgia, serif; line-height: 20px; color: #333333;">using </span><span style="font-family: Georgia, serif; line-height: 20px; color: #333333;">jQuery with </span><span style="font-family: Georgia, serif; line-height: 20px; color: #333333;">insatiably attractive effects</span></p>
<p style="text-align: center;"><a href="http://www.jeremymartin.name/examples/kwicks.php?example=1"><img class="size-full wp-image-1087 aligncenter" title="kwicks-jquery-menu-navigation" src="http://www.extratuts.com/wp-content/uploads/2010/09/kwicks-jquery-menu-navigation.jpg" alt="jQuery" width="570" height="104" /></a></p>
<p style="text-align: center;"><a title="7 Examples" href="http://www.jeremymartin.name/examples/kwicks.php?example=1" target="_blank">Demo</a> | <a title="Kwicks for jQuery" href="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/Kwicks-1.5.1.zip" target="_blank">Download</a> | <a title="Kwicks for jQuery" href="http://www.jeremymartin.name/projects.php?project=kwicks" target="_self">Details</a></p>
<h2><a title="Learning jQuery: Fading Menu – Replacing Content" href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/" target="_blank"> Fading Menu &amp; Replacing Content with jQuery</a></h2>
<p><span style="font-family: Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; line-height: 16px; color: #555555;">Amazing fading menu with replacing it&#8217;s content with css &amp; jQuery</span></p>
<p style="text-align: center;"><a href="http://css-tricks.com/examples/MenuFader/"><img class="aligncenter size-full wp-image-1090" title="menu-fader-jquery-navigation" src="http://www.extratuts.com/wp-content/uploads/2010/09/menu-fader-jquery-navigation.jpg" alt="jQuery" width="570" height="145" /></a></p>
<p style="text-align: center;"><a title="Learning jQuery: Fading Menu – Replacing Content" href="http://css-tricks.com/examples/MenuFader/" target="_blank">Demo</a> | <a title="Learning jQuery: Fading Menu – Replacing Content" href="http://css-tricks.com/examples/MenuFader.zip" target="_blank">Download</a> | <a title="Learning jQuery: Fading Menu – Replacing Content" href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/" target="_blank">Details</a></p>
<h2><a title="jQuery MagicLine Navigation" href="http://css-tricks.com/jquery-magicline-navigation/" target="_blank">jQuery MagicLine Navigation</a></h2>
<p><span style="font-family: Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; line-height: 22px; font-size: 14px; color: #555555;">Sliding style navigation bars with jQuery</span></p>
<p style="text-align: center;"><a href="http://css-tricks.com/examples/MagicLine/"><img class="aligncenter size-full wp-image-1091" title="jQuery MagicLine Navigation" src="http://www.extratuts.com/wp-content/uploads/2010/09/dynamic-menu.jpg" alt="jQuery" width="480" height="186" /></a></p>
<p style="text-align: center;"><a title="jQuery MagicLine Navigation" href="http://css-tricks.com/examples/MagicLine/" target="_blank">Demo</a> | <a title="jQuery MagicLine Navigation" href="http://css-tricks.com/examples/MagicLine.zip" target="_blank">Download</a> | <a title="jQuery MagicLine Navigation" href="http://css-tricks.com/jquery-magicline-navigation/" target="_blank">Details</a></p>
<h2><a title="CREATE VIMEO-LIKE TOP NAVIGATION" href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx" target="_blank">Vimo Like Top Navigation</a></h2>
<p><span style="font-family: 'Lucida Sans Unicode', 'Lucida Sans', Arial, sans-serif; line-height: 22px; color: #202020;">Top navigation implemented on <a style="position: relative; color: #0072bb;" title="Vimo Like Top Navigation" href="http://vimeo.com/about" target="_blank">Vimeo.com</a> </span></p>
<div style="text-align: center;"><a href="http://www.jankoatwarpspeed.com/examples/vimeo_navigation/"><img class="size-full wp-image-1092 aligncenter" title="create-vimeo-like-top-navigation" src="http://www.extratuts.com/wp-content/uploads/2010/09/create-vimeo-like-top-navigation.jpg" alt="Create Vimeo-like top navigation " width="570" height="136" /></a></div>
<div style="text-align: center;">
<div><a title="Create Vimeo-like top navigation " href="http://www.jankoatwarpspeed.com/examples/vimeo_navigation/" target="_blank">Demo</a> | <a title="Create Vimeo-like top navigation " href="http://www.jankoatwarpspeed.com/file.axd?file=2009%2f1%2fvimeo_navigation.zip" target="_blank">Download</a> | <a title="Create Vimeo-like top navigation " href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx" target="_blank">Details</a></div>
</div>
<h2><a title="Animated Drop Down Menu with jQuery" href="http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/" target="_blank">Animated Drop Down Menu with jQuery</a></h2>
<p><span style="font-family: Georgia; line-height: 18px; font-size: 11px;">Drop down menu s</span><span style="font-family: Georgia; line-height: 18px; font-size: 11px;">using jQuery and CSS</span></p>
<div style="text-align: center;"><a href="http://clarklab.net/blog/articles/dropdown/example.html"><img class="aligncenter size-full wp-image-1093" title="animated-dropdown-menu-jquery" src="http://www.extratuts.com/wp-content/uploads/2010/09/animated-dropdown-menu-jquery.jpg" alt="jQuery" width="570" height="199" /></a></div>
<div style="text-align: center;"><a title="Animated Drop Down Menu with jQuery" href="http://clarklab.net/blog/articles/dropdown/example.html" target="_blank">Demo</a> | <a title="Animated Drop Down Menu with jQuery" href="http://clarklab.net/blog/articles/dropdown/animateddropdown.zip" target="_blank">Download</a> | <a title="Animated Drop Down Menu with jQuery" href="http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/" target="_blank">Details</a></div>
<h2><a title="How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery" href="http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/" target="_blank">‘Mootools Homepage’ Inspired Navigation Effect Using jQuery</a></h2>
<p>Inspired Navigation Effect Using jQuery</p>
<div style="text-align: center;"><a href="http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/demo.html"><img class="aligncenter size-full wp-image-1094" title="mootools-homepage-navigation-effect" src="http://www.extratuts.com/wp-content/uploads/2010/09/mootools-homepage-navigation-effect.jpg" alt="Inspired Navigation Effect Using jQuery" width="570" height="239" /></a></div>
<div style="text-align: center;"><a title="Inspired Navigation Effect Using jQuery" href="http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/demo.html" target="_blank">Demo</a> | <a title="Inspired Navigation Effect Using jQuery" href="http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/Download.zip" target="_blank">Download</a> | <a title="Inspired Navigation Effect Using jQuery" href="http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/" target="_blank">Details</a></div>
<h2><a title="Menumatic Mootools" href="http://greengeckodesign.com/menumatic" target="_blank">Menumatic Mootools</a></h2>
<p>Navigation drop down menu with touch of JavaScript</p>
<div style="text-align: center;"><a href="http://greengeckodesign.com/projects/menumatic/examples/horizontal/"><img class="aligncenter size-full wp-image-1096" title="menumatic-vertical-menu-jquery" src="http://www.extratuts.com/wp-content/uploads/2010/09/menumatic-vertical-menu-jquery.jpg" alt="Menumatic Mootools" width="570" height="324" /></a></div>
<div style="text-align: center;"><a title="Menumatic Mootools Vertical Menu Example" href="http://greengeckodesign.com/projects/menumatic/examples/vertical/" target="_blank">Vertical Demo</a> | <a title="Menumatic Mootools Horizontal Menu Example" href="http://greengeckodesign.com/projects/menumatic/examples/horizontal/" target="_blank">horizontal Demo</a> | <a title="Menumatic Mootools" href="http://menumatc.googlecode.com/files/MenuMatic_0.68.3.zip" target="_blank">Download</a> | <a title="Menumatic Mootools" href="http://greengeckodesign.com/menumatic" target="_blank">Details</a></div>
<h2><a title="Garagedoor effect using Javascript" href="http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/" target="_blank">Garagedoor effect using Javascript</a></h2>
<p>JavaScript navigation menu</p>
<div style="text-align: center;"><a href="http://www.gayadesign.com/scripts/jquerygaragedoor/"><img class="aligncenter size-full wp-image-1097" title="garage-door-jquery-menu" src="http://www.extratuts.com/wp-content/uploads/2010/09/garage-door-jquery-menu.jpg" alt="Garagedoor effect using Javascript" width="570" height="181" /></a></div>
<div style="text-align: center;"><a title="Garagedoor effect using Javascript" href="http://www.gayadesign.com/scripts/jquerygaragedoor/" target="_blank">Demo</a> | <a title="Garagedoor effect using Javascript" href="http://www.gayadesign.com/scripts/jquerygaragedoor/jquerygarage.zip" target="_blank">Download</a> | <a title="Garagedoor effect using Javascript" href="http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/" target="_blank">Details</a></div>
<div style="text-align: center;"></div>
<div style="text-align: center;"><span class="Apple-style-span" style="color: #2a2a2a; font-family: 'Segoe UI', Tahoma, Verdana, Arial, sans-serif; line-height: 17px; background-color: #ffffff;">Visit <a style="color: #0068cf; line-height: 17px; text-decoration: underline;" href="http://www.psprint.com/" target="_blank">PsPrint Online Printing</a> to get the best deals in online printing services!</span></div>
<div style="text-align: center;"></div>
<div style="text-align: center;"></div>
<div style="text-align: center;"></div>
<div style="text-align: center;"></div>
<div style="text-align: center;"></div>
<div style="text-align: center;"></div>
<div style="text-align: center;"></div>
<div style="text-align: center;"></div>
<div style="text-align: center;"></div>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/css-jquery-animated-navigation-2' rel='bookmark' title='CSS and jQuery Animated Navigation'>CSS and jQuery Animated Navigation</a></li>
<li><a href='http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples' rel='bookmark' title='25+ jQuery Tutorials Roundup With Examples'>25+ jQuery Tutorials Roundup With Examples</a></li>
<li><a href='http://www.extratuts.com/how-to-create-a-drop-down-navigation-menu' rel='bookmark' title='How To Create a Drop Down Navigation Menu'>How To Create a Drop Down Navigation Menu</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/16-amazing-jquery-navigation-menu-tutorials/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>BEST 25 ajax photo sliding solutions</title>
		<link>http://www.extratuts.com/best-25-ajax-photo-sliding-solutions</link>
		<comments>http://www.extratuts.com/best-25-ajax-photo-sliding-solutions#comments</comments>
		<pubDate>Mon, 22 Mar 2010 08:10:49 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[web2 roundups]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[photo]]></category>
		<category><![CDATA[photo sliding]]></category>
		<category><![CDATA[sliding]]></category>
		<category><![CDATA[slidshow]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=957</guid>
		<description><![CDATA[Having lots of photos and want to display them in suitable and effective way that would make them more valuable? Here are about 35 ajax solutions that will satisfy your passion! using this technique will make your gallery even more representable. so if you want to display your images in one big screen, on thumbnails [...]


Related posts:<ol><li><a href='http://www.extratuts.com/useful-ajax-lightbox-solutions' rel='bookmark' title='+15 useful ajax lightbox solutions'>+15 useful ajax lightbox solutions</a></li>
<li><a href='http://www.extratuts.com/amazing-jquery-tabs-tutorials' rel='bookmark' title='15 amazing jquery tabs tutorials'>15 amazing jquery tabs tutorials</a></li>
<li><a href='http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples' rel='bookmark' title='25+ jQuery Tutorials Roundup With Examples'>25+ jQuery Tutorials Roundup With Examples</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.extratuts.com/wp-content/uploads/2010/02/main.jpg"><img class="aligncenter size-full wp-image-986" title="main" src="http://www.extratuts.com/wp-content/uploads/2010/02/main.jpg" alt="" width="500" height="300" /></a></p>
<p>Having lots of photos and want to display them in suitable and effective way that would make them more valuable?</p>
<p>Here are about 35 ajax solutions that will satisfy your passion! using this technique will make your gallery even more representable. so if you want to display your images<span id="more-957"></span> in one big screen, on thumbnails or in slide show, and you were interested in special effects that take place during browsing the photo gallery,here are the most impressive solutions to perform this purpose.  Take your time while choosing, because they are really eye catcher.</p>
<h2><a href="http://smoothgallery.jondesign.net/showcase/gallery/#myGallery-picture%284%29"><span style="color: #99ccff;">1.JonDesign&#8217;s SmoothGallery</span></a></h2>
<p>This one uses mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading&#8230;) image galleries, slideshows, showcases and other cool stuff on your website&#8230;</p>
<p><a href="http://smoothgallery.jondesign.net/showcase/gallery/#myGallery-picture%284%29"><img class="alignnone size-full wp-image-960" title="1" src="http://www.extratuts.com/wp-content/uploads/2010/02/1.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://www.agilegallery.com/"><span style="color: #99ccff;">2.AgileGallery</span></a></h2>
<p><a href="http://www.agilegallery.com/ajax-demo.html"><img class="alignnone size-full wp-image-961" title="2" src="http://www.extratuts.com/wp-content/uploads/2010/02/2.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://www.huddletogether.com/projects/lightbox2/"><span style="color: #99ccff;">3.Lightbox2</span></a></h2>
<p>is a <em>simple, unobtrusive</em> script used to overlay images on the current page. It groups related images and navigate through them with ease using great fancy pants transitions.</p>
<p><span style="color: #99ccff;"><a href="http://www.huddletogether.com/projects/lightbox2/"><img class="alignnone size-full wp-image-962" title="3" src="http://www.extratuts.com/wp-content/uploads/2010/02/3.jpg" alt="" width="500" height="300" /></a><br />
</span></p>
<h2><a href="http://slideshow.triptracker.net/"><span style="color: #99ccff;">4.TripTracker slideshow</span></a></h2>
<p>is a lightweight JavaScript image viewer with an animated slideshow feature.</p>
<p><span style="color: #99ccff;"><a href="http://slideshow.triptracker.net/"><img class="alignnone size-full wp-image-963" title="4" src="http://www.extratuts.com/wp-content/uploads/2010/02/4.jpg" alt="" width="500" height="300" /></a><br />
</span></p>
<h2><span style="color: #99ccff;"><a href="http://interface.eyecon.ro/">5.Interface elements</a></span></h2>
<p><span style="color: #99ccff;"><span style="color: #000000;">Simple and small photo slider that will make you easily navigate through your photo gallery.</span></span></p>
<p><span style="color: #99ccff;"><span style="color: #000000;"><a href="http://interface.eyecon.ro/demos/slideshow.html"><img class="alignnone size-full wp-image-964" title="5" src="http://www.extratuts.com/wp-content/uploads/2010/02/5.jpg" alt="" width="500" height="300" /></a></span></span></p>
<h2><a href="http://www.flickrshow.com/"><span style="color: #99ccff;">6.Flickrshow</span></a></h2>
<p>Flickrshow is a <strong>lightweight</strong>, <strong>cross-browser</strong> javascript slideshow, providing you with an easy way to display your Flickr images on your own website. It is simple to install and can be used to access images within Flickr <strong>groups</strong> or <strong>photosets</strong>, or using a <strong>tag-based search</strong>.</p>
<p><a href="http://www.extratuts.com/wp-content/uploads/2010/02/6.jpg"><img class="alignnone size-full wp-image-965" title="6" src="http://www.extratuts.com/wp-content/uploads/2010/02/6.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://mediaeventservices.com/blog/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flow/"><span style="color: #99ccff;">7.AJAX Slideflow</span></a></h2>
<p>great ajax photo slider that  you can navigate through using your mouse, or click anywhere in the stack to jump there. Click inside the frame in order to enable mouse wheel and arrow key navigation.</p>
<p><a href="http://mediaeventservices.com/blog/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flow/"><img class="alignnone size-full wp-image-966" title="7" src="http://www.extratuts.com/wp-content/uploads/2010/02/7.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://minishowcase.net/"><span style="color: #99ccff;">8.minishowcase</span></a></h2>
<p>It is a small and simple php/javascript online photo gallery, powered by AJAX that allows you to easily show your images online, without complex databases or coding, allowing to have an up-and-running gallery in a few minutes.</p>
<p><a href="http://minishowcase.net/demo/"><img class="alignnone size-full wp-image-967" title="8" src="http://www.extratuts.com/wp-content/uploads/2010/02/8.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html"><span style="color: #99ccff;">9.slideViewer</span></a></h2>
<p>slideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery.</p>
<p><a href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html"><img class="alignnone size-full wp-image-968" title="9" src="http://www.extratuts.com/wp-content/uploads/2010/02/9.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://devkick.com/lab/galleria/"><span style="color: #99ccff;">10.Galleria</span></a></h2>
<p>Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.</p>
<p><a href="http://devkick.com/lab/galleria/demo_01.htm#img/lightning.jpg"><img class="alignnone size-full wp-image-969" title="10" src="http://www.extratuts.com/wp-content/uploads/2010/02/10.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://www.efectorelativo.net/laboratory/noobSlide/"><span style="color: #99ccff;">11.noobSlide</span></a></h2>
<p>Another photo slider that considered of the most simple ones. It depends on mootools scripts. you can find many sliding types that should satisfy your needs.</p>
<p><a href="http://www.efectorelativo.net/laboratory/noobSlide/"><img class="alignnone size-full wp-image-970" title="11" src="http://www.extratuts.com/wp-content/uploads/2010/02/11.jpg" alt="" width="500" height="300" /></a></p>
<h2 style="text-align: center;"><script type="text/javascript"><!--
google_ad_client = "ca-pub-4023069866880559";
/* extra in post */
google_ad_slot = "5362203380";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></h2>
<h2><a href="http://eyecon.ro/spacegallery/"><span style="color: #99ccff;">12.Spacegallery</span></a></h2>
<p>Another image gallery that you can navigate through the gallery by clicking on the image to see the next one. It&#8217;s easy to be used.</p>
<p><a href="http://eyecon.ro/spacegallery/#about"><img class="alignnone size-full wp-image-971" title="12" src="http://www.extratuts.com/wp-content/uploads/2010/02/12.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://opiefoto.com/articles/photoslider#example"><span style="color: #99ccff;">13.Photo Slider</span></a></h2>
<p>One great tutorial that will make you able to make a great photo slider by your own, Its simple and attractive.</p>
<p><a href="http://www.extratuts.com/wp-content/uploads/2010/02/13.jpg"><img class="alignnone size-full wp-image-972" title="13" src="http://www.extratuts.com/wp-content/uploads/2010/02/13.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://www.leigeber.com/2008/12/javascript-slideshow/"><span style="color: #99ccff;">14.Animated JavaScript Slideshow</span></a></h2>
<p>This dynamic JavaScript slideshow is feature packed and under 5KB.  Includes description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.</p>
<p><a href="http://sandbox.leigeber.com/javascript-slideshow/"><img class="alignnone size-full wp-image-973" title="14" src="http://www.extratuts.com/wp-content/uploads/2010/02/14.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://www.serie3.info/s3slider/index.php">15.s3Slider jQuery plugin</a></h2>
<p>The <strong>s3Slider jQuery plugin</strong> is made by example of jd`s smooth slide show script. Its attractive, simple and useful.</p>
<p><a href="http://www.serie3.info/s3slider/demonstration.html"><img class="alignnone size-full wp-image-974" title="15" src="http://www.extratuts.com/wp-content/uploads/2010/02/15.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://highslide.com/"><span style="color: #99ccff;">16.Highslide JS</span></a></h2>
<p>Highslide JS is an open source image, media and gallery viewer written in JavaScript, such as Quick and elegant looking, No plugins like Flash or Java required, Single click. After opening the image or HTML popup, the user can scroll further down     or leave the page without closing it and much more.</p>
<p><a href="http://highslide.com/"><img class="alignnone size-full wp-image-975" title="16" src="http://www.extratuts.com/wp-content/uploads/2010/02/16.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://devthought.com/blog/projects-news/2008/06/barackslideshow-an-elegant-lightweight-slideshow-script/"><span style="color: #99ccff;">17.BarackSlideshow</span></a></h2>
<p>BarackSlideshow is a very tiny and lightweight slideshow script, that takes the power of MorphList to enhance visualization and navigation of the images.</p>
<p><a href="http://devthought.com/wp-content/projects/mootools/barackslideshow/Demo/"><img class="alignnone size-full wp-image-976" title="17" src="http://www.extratuts.com/wp-content/uploads/2010/02/17.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://www.mind-projects.it/projects/jqzoom/"><span style="color: #99ccff;">18.JQZoom</span></a></h2>
<p>JQZoom is a javascript image magnifier built at the top of the popular <a href="http://www.jquery.com/" target="_blank">jQuery</a> javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.</p>
<p><a href="http://www.mind-projects.it/projects/jqzoom/demos.php#demo1"><img class="alignnone size-full wp-image-977" title="18" src="http://www.extratuts.com/wp-content/uploads/2010/02/18.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://www.openstudio.fr/jQuery-virtual-tour.html?lang=en"><span style="color: #99ccff;">19.jQuery virtual tour</span></a></h2>
<p>This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour.</p>
<p><a href="http://www.openstudio.fr/jquery-virtual-tour/"><img class="alignnone size-full wp-image-978" title="19" src="http://www.extratuts.com/wp-content/uploads/2010/02/19.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/"><span style="color: #99ccff;">20.</span><span style="color: #99ccff;">jQuery: jqGalScroll</span></a></h2>
<p>jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.</p>
<p><a href="http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/"><img class="alignnone size-full wp-image-979" title="20" src="http://www.extratuts.com/wp-content/uploads/2010/02/20.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://www.cssplay.co.uk/menu/gallery3l.html"><span style="color: #99ccff;">21.Sliding Photograph Galleries</span></a></h2>
<p>This application is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size.</p>
<p><span style="color: #99ccff;"><a href="http://www.extratuts.com/wp-content/uploads/2010/02/21.jpg"><img class="alignnone size-full wp-image-980" title="21" src="http://www.extratuts.com/wp-content/uploads/2010/02/21.jpg" alt="" width="500" height="300" /></a><br />
</span></p>
<h2><a href="http://www.flash-gallery.org/"><span style="color: #99ccff;">22.flash-gallery</span></a></h2>
<p>Flash Gallery is a free application that allows you to create a slideshow on your website easy and fast. You won&#8217;t need any programming skills to install or use it. Just embed it into your website and script will automatically form a slideshow from a specified folder or from Flickr photostream.</p>
<p><a href="http://www.flash-gallery.org/demo2.html"><img class="alignnone size-full wp-image-981" title="22" src="http://www.extratuts.com/wp-content/uploads/2010/02/22.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://www.flashmo.com/preview/flashmo_098_3d_curve_wall"><span style="color: #99ccff;">23. 3d curve wall</span></a></h2>
<p>3D Curve Wall for thumbnail gallery powered by Papervision3D, ActionScript 3 and XML.</p>
<p><a href="http://www.flashmo.com/preview/flashmo_098_3d_curve_wall"><img class="alignnone size-full wp-image-982" title="23" src="http://www.extratuts.com/wp-content/uploads/2010/02/23.jpg" alt="" width="500" height="300" /></a></p>
<h2><a href="http://www.dezinerfolio.com/dfgallery-2/free-flash-gallery"><span style="color: #99ccff;">24.dfGallery 2.0</span></a></h2>
<p><span style="color: #99ccff;"><span style="color: #000000;">great one, this application has so much advantages, such as you can upload  custom images, changing its theme easily, wat hyour gallery in full screen and so much more.</span></span></p>
<p><span style="color: #99ccff;"><span style="color: #000000;"><a href="http://www.extratuts.com/wp-content/uploads/2010/02/24.jpg"><img class="alignnone size-full wp-image-983" title="24" src="http://www.extratuts.com/wp-content/uploads/2010/02/24.jpg" alt="" width="500" height="300" /></a></span></span></p>
<h2><a href="http://www.no3dfx.com/polaroid/"><span style="color: #99ccff;">25.Polaroid Gallery v.1.01</span></a></h2>
<p>Polaroid Gallery is a free, open source flash gallery.The script loads images and image titles dynamically from an external xml file or a flickr RSS feed. Then the script processes the data and creates an interactive flash gallery.</p>
<p><span style="color: #99ccff;"><a href="http://www.extratuts.com/wp-content/uploads/2010/02/25.jpg"><img class="alignnone size-full wp-image-984" title="25" src="http://www.extratuts.com/wp-content/uploads/2010/02/25.jpg" alt="" width="500" height="300" /></a><br />
</span></p>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/useful-ajax-lightbox-solutions' rel='bookmark' title='+15 useful ajax lightbox solutions'>+15 useful ajax lightbox solutions</a></li>
<li><a href='http://www.extratuts.com/amazing-jquery-tabs-tutorials' rel='bookmark' title='15 amazing jquery tabs tutorials'>15 amazing jquery tabs tutorials</a></li>
<li><a href='http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples' rel='bookmark' title='25+ jQuery Tutorials Roundup With Examples'>25+ jQuery Tutorials Roundup With Examples</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/best-25-ajax-photo-sliding-solutions/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>+15 useful ajax lightbox solutions</title>
		<link>http://www.extratuts.com/useful-ajax-lightbox-solutions</link>
		<comments>http://www.extratuts.com/useful-ajax-lightbox-solutions#comments</comments>
		<pubDate>Sun, 27 Dec 2009 15:50:06 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS & Xhtml]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[web2 roundups]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[lightbox]]></category>
		<category><![CDATA[solutions]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=776</guid>
		<description><![CDATA[Lightbox or Modal dialog  is one of ajax creative solutions that helps you displaying any desired contents like images, galleries, flash movies , films of any formats and forms in the already loaded page itself. This solution overcome the constraint of pop ups that are blocked by any of well secured internet browser. The main [...]


Related posts:<ol><li><a href='http://www.extratuts.com/best-25-ajax-photo-sliding-solutions' rel='bookmark' title='BEST 25 ajax photo sliding solutions'>BEST 25 ajax photo sliding solutions</a></li>
<li><a href='http://www.extratuts.com/lightbox-futurebox-without-using-javascript' rel='bookmark' title='Lightbox , Futurebox Without Using JavaScript'>Lightbox , Futurebox Without Using JavaScript</a></li>
<li><a href='http://www.extratuts.com/amazing-jquery-tabs-tutorials' rel='bookmark' title='15 amazing jquery tabs tutorials'>15 amazing jquery tabs tutorials</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Lightbox or Modal dialog  is one of ajax creative solutions that helps you displaying any desired contents like images, galleries, flash movies , films of any formats and forms in the already loaded page itself. This solution overcome the constraint of pop ups that are blocked by any of well secured internet browser. The main advantage <span id="more-776"></span>of using lightbox method is that you will be able to load only the relevant content in the specific box without needing to reload the whole page again, which decreases the loading time for more comfort browsing purposes.</p>
<p>Below here are a great useful chunk of light box solutions.</p>
<h2><span style="color: #99ccff;"><a href="http://www.phatfusion.net/multibox/">1.multi-box</a></span></h2>
<p><a href="http://www.phatfusion.net/multibox/"><img class="size-full wp-image-781 alignnone" title="1" src="http://www.extratuts.com/wp-content/uploads/2009/12/1.jpg" alt="1" width="500" height="300" /></a></p>
<p>This one  supports images, flash, video, mp3s, html.</p>
<h2><a href="http://orangoo.com/labs/GreyBox/">2.GreyBox</a></h2>
<p><span style="color: #99ccff;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/2.jpg"><img class="size-full wp-image-782 alignnone" title="2" src="http://www.extratuts.com/wp-content/uploads/2009/12/2.jpg" alt="2" width="500" height="300" /></a><br />
</span></p>
<p>This GreyBox can be used to display websites, images and other content easily. It is small, fast and easy to be used by anyone.</p>
<h2><span style="color: #99ccff;"><a href="http://www.nickstakenburg.com/projects/lightview/">3.LightView</a></span></h2>
<h2><a href="http://www.nickstakenburg.com/projects/lightview/"></a></h2>
<p><img class="size-full wp-image-783 alignnone" title="3" src="http://www.extratuts.com/wp-content/uploads/2009/12/3.jpg" alt="3" width="500" height="300" /></p>
<p>It&#8217;s considered one of the easiest lightboxes since it&#8217;s easily customized, looks great, resizes contents automatically to fit your screen.</p>
<h2><a href="http://www.digitalia.be/software/slimbox2#demo">4.SlimBox2</a></h2>
<p><a href="http://www.digitalia.be/software/slimbox2#demo"><span style="color: #99ccff;"> </span></a><a href="http://www.digitalia.be/software/slimbox2#demo"><img class="aligncenter size-full wp-image-784" title="4" src="http://www.extratuts.com/wp-content/uploads/2009/12/4.jpg" alt="4" width="500" height="300" /></a></p>
<p>It&#8217;s very small, efficient, standards-friendly, fully customizable.</p>
<h2><a href="http://jqueryui.com/demos/dialog/">5.Dialog</a></h2>
<h2 style="text-align: center;"><a href="http://jqueryui.com/demos/dialog/"><img class="aligncenter size-full wp-image-785" title="5" src="http://www.extratuts.com/wp-content/uploads/2009/12/5.jpg" alt="5" width="500" height="300" /></a></h2>
<p>It&#8217;s suitable to display information, also it could be moved and resized to the desired way.</p>
<h2><a href="http://prototype-window.xilinus.com/samples.html">6.prototype window</a></h2>
<h2><a href="http://prototype-window.xilinus.com/samples.html"><img class="aligncenter size-full wp-image-786" title="6" src="http://www.extratuts.com/wp-content/uploads/2009/12/6.jpg" alt="6" width="500" height="300" /></a></h2>
<p>A group of codes that enables you to load different things in your current page such different dialogs and windows.</p>
<h2><a href="http://mochaui.com/">7.MochaUI</a></h2>
<h2><a href="http://mochaui.com/"><img class="aligncenter size-full wp-image-787" title="7" src="http://www.extratuts.com/wp-content/uploads/2009/12/7.jpg" alt="7" width="500" height="300" /></a></h2>
<p>It&#8217;s web applications user interface library built on the Mootools JavaScript framework That used for Web Applications, Web Desktops,Web Sites, Widgets, Standalone Windows and Modal Dialogs</p>
<p style="text-align: center;"><script type="text/javascript"><!--
google_ad_client = "ca-pub-4023069866880559";
/* extra in post */
google_ad_slot = "5362203380";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<h2><a href="http://famspam.com/facebox/">8.facebox</a></h2>
<h2 style="text-align: left;"><a href="http://famspam.com/facebox/"><img class="aligncenter size-full wp-image-788" title="8" src="http://www.extratuts.com/wp-content/uploads/2009/12/8.jpg" alt="8" width="500" height="300" /></a></h2>
<p style="text-align: left;">Another jQuery-based application that has facebook style that you could use to display images, divs, or entire remote pages.</p>
<p style="text-align: left;">
<h2 style="text-align: left;"><a href="http://onehackoranother.com/projects/jquery/boxy/">9.Boxy</a></h2>
<h2 style="text-align: left;"><a href="http://onehackoranother.com/projects/jquery/boxy/"><img class="aligncenter size-full wp-image-789" title="8" src="http://www.extratuts.com/wp-content/uploads/2009/12/81.jpg" alt="8" width="500" height="300" /></a></h2>
<p style="text-align: left;">Facebook-style dialog box for jQuery that could be edited, moved and resized.</p>
<p style="text-align: left;">
<h2 style="text-align: left;"><a href="http://okonet.ru/projects/modalbox/">10.Modalbox</a></h2>
<p><a href="http://okonet.ru/projects/modalbox/"><img class="aligncenter size-full wp-image-790" title="10" src="http://www.extratuts.com/wp-content/uploads/2009/12/10.jpg" alt="10" width="500" height="300" /></a></p>
<h2><a href="http://www.stickmanlabs.com/lightwindow/">11.LightWindow v2.0</a></h2>
<h2><a href="http://www.stickmanlabs.com/lightwindow/"><img class="aligncenter size-full wp-image-792" title="11" src="http://www.extratuts.com/wp-content/uploads/2009/12/11.jpg" alt="11" width="500" height="300" /></a></h2>
<p>different types of lightboxes that you could be use for different purposes, as you will see you could use it for loading any content in your current page such as movies,images, flash movies and more. It&#8217;s compatible with all known browsers.</p>
<h2><a href="http://www.ericmmartin.com/projects/simplemodal-demos/">12.simplemoda</a></h2>
<h2><a href="http://www.ericmmartin.com/projects/simplemodal-demos/"><img class="aligncenter size-full wp-image-793" title="12" src="http://www.extratuts.com/wp-content/uploads/2009/12/12.jpg" alt="12" width="500" height="300" /></a></h2>
<p>awesome group of modal boxes that could be used for loading almost anything to you page like Dialog, Contact Form and Confirmation Override.</p>
<h2><a href="http://stimuli.ca/lightbox/">13.Lightbox 2.8.0 plugin for WordPress</a></h2>
<h2><a href="http://stimuli.ca/lightbox/"><img class="aligncenter size-full wp-image-794" title="13" src="http://www.extratuts.com/wp-content/uploads/2009/12/13.jpg" alt="13" width="500" height="300" /></a></h2>
<p>Another solution from lightbox helpful for wordpress users, this one makes  you present images in a slick window, while darkening the rest of the page in professional way easily.</p>
<h2><a href="http://web-argument.com/flexible-lightbox/">14.Flexible Lightbox</a></h2>
<p><a href="http://web-argument.com/flexible-lightbox/"><img class="aligncenter size-full wp-image-795" title="14" src="http://www.extratuts.com/wp-content/uploads/2009/12/14.jpg" alt="14" width="500" height="300" /></a></p>
<p>useful wordpress plugin used for displaying images in very good looking way.</p>
<h2><a href="http://www.shadowbox-js.com/">15.Shadowbox</a></h2>
<h2><a href="http://www.shadowbox-js.com/"><img class="aligncenter size-full wp-image-797" title="15" src="http://www.extratuts.com/wp-content/uploads/2009/12/15.jpg" alt="15" width="500" height="300" /></a></h2>
<p>Magnificent application that you could consider it a player for any type of media that can be displayed in a web page, it looks wonderful, customizable and very useful.</p>
<h2><a href="http://www.huddletogether.com/projects/lightbox2/">16.Lightbox 2</a></h2>
<h2 style="text-align: left;"><a href="http://www.huddletogether.com/projects/lightbox2/"><img class="aligncenter size-full wp-image-799" title="16" src="http://www.extratuts.com/wp-content/uploads/2009/12/16.jpg" alt="16" width="500" height="300" /></a></h2>
<p style="text-align: left;">Great application used to overlay images in your current page with sleek transitions and fancy shapes. Also it groups related images to be displayed as gallery.</p>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/best-25-ajax-photo-sliding-solutions' rel='bookmark' title='BEST 25 ajax photo sliding solutions'>BEST 25 ajax photo sliding solutions</a></li>
<li><a href='http://www.extratuts.com/lightbox-futurebox-without-using-javascript' rel='bookmark' title='Lightbox , Futurebox Without Using JavaScript'>Lightbox , Futurebox Without Using JavaScript</a></li>
<li><a href='http://www.extratuts.com/amazing-jquery-tabs-tutorials' rel='bookmark' title='15 amazing jquery tabs tutorials'>15 amazing jquery tabs tutorials</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/useful-ajax-lightbox-solutions/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>15 amazing jquery tabs tutorials</title>
		<link>http://www.extratuts.com/amazing-jquery-tabs-tutorials</link>
		<comments>http://www.extratuts.com/amazing-jquery-tabs-tutorials#comments</comments>
		<pubDate>Wed, 02 Dec 2009 17:52:35 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS & Xhtml]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[web2 roundups]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[amazing]]></category>
		<category><![CDATA[java]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jquery tabs]]></category>
		<category><![CDATA[tabing]]></category>
		<category><![CDATA[Tabs]]></category>
		<category><![CDATA[tutorials]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=718</guid>
		<description><![CDATA[Who didn&#8217;t find jquery tabs in any website and didn&#8217;t fall in love with it? of course no one!! These tabs provide a lot of advantages, beside the great way it looks, it is very useful for any tabing purposes, specially when you will be able to add the content you want and view it [...]


Related posts:<ol><li><a href='http://www.extratuts.com/create-simple-tabs-with-jquery-and-css' rel='bookmark' title='Create Simple Tabs With jQuery and CSS'>Create Simple Tabs With jQuery and CSS</a></li>
<li><a href='http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples' rel='bookmark' title='25+ jQuery Tutorials Roundup With Examples'>25+ jQuery Tutorials Roundup With Examples</a></li>
<li><a href='http://www.extratuts.com/excellent-jquery-menus-tutorials' rel='bookmark' title='about 20 excellent jquery menus tutorials'>about 20 excellent jquery menus tutorials</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;">
<p style="text-align: left;">
<p style="text-align: left;">
<p style="text-align: left;">Who didn&#8217;t find jquery tabs in any website and didn&#8217;t fall in love with it? of course no one!!</p>
<p style="text-align: left;">These tabs provide a lot of advantages, beside the great way it looks, it is very useful for any tabing purposes, specially when<span id="more-718"></span> you will be able to add the content you want and view it without needing to reload the web page that contains these tabs,THAT&#8217;S GREAT!!</p>
<p style="text-align: left;">Here are exceptional group of jquery tabs tutorials that we are sure it will attract and enhance your web designing skills and experience.</p>
<h2 style="text-align: center;">1.Slick Tabbed Content Area using CSS &amp; jQuery</h2>
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/1.png"><img class="size-full wp-image-723 aligncenter" title="1" src="http://www.extratuts.com/wp-content/uploads/2009/12/1.png" alt="1" width="287" height="370" /></a></p>
<p style="text-align: center;"><a href="http://nettuts.s3.amazonaws.com/001_Tabbed/site/jQuery.html">The Demo</a></p>
<p style="text-align: center;"><a href="http://net.tutsplus.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">2.simple JQuery Tabs</h2>
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/2.png"><img class="size-full wp-image-724 aligncenter" title="2" src="http://www.extratuts.com/wp-content/uploads/2009/12/2.png" alt="2" width="500" height="150" /></a></p>
<p style="text-align: center;"><a href="http://go2.wordpress.com/?id=725X1342&amp;site=apricotstudios.wordpress.com&amp;url=http%3A%2F%2Fwww.apricot-studios.com%2Flab%2Fjquery%2Fjquery-tabs-tutorial.php">The Demo</a></p>
<p style="text-align: center;"><a href="http://apricotstudios.wordpress.com/2008/08/29/jquery-tabs-tutorial/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">3.A Tabbed Interface Using jQuery</h2>
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/3.png"><img class="size-full wp-image-725 aligncenter" title="3" src="http://www.extratuts.com/wp-content/uploads/2009/12/3.png" alt="3" width="333" height="248" /></a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://nettuts.s3.amazonaws.com/042_jQueryUITabs/demo/index.html">The Demo</a></p>
<p style="text-align: center;"><a href="http://net.tutsplus.com/javascript-ajax/create-a-tabbed-interface-using-jquery/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">4.Simple Tabs w/ CSS &amp; jQuery</h2>
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/4.png"><img class="size-full wp-image-726 aligncenter" title="4" src="http://www.extratuts.com/wp-content/uploads/2009/12/4.png" alt="4" width="501" height="120" /></a></p>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.sohtanaka.com/web-design/examples/tabs/">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">5.jQuery Tabbed Interface / Tabbed Structure Menu Tutorial</h2>
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/5.png"><img class="size-full wp-image-727 aligncenter" title="5" src="http://www.extratuts.com/wp-content/uploads/2009/12/5.png" alt="5" width="228" height="302" /></a></p>
<p style="text-align: center;"><a href="http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;"><script type="text/javascript"><!--
google_ad_client = "ca-pub-4023069866880559";
/* extra in post */
google_ad_slot = "5362203380";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">6.Playing with jQuery Tabs</h2>
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/7.png"><img class="size-full wp-image-729 aligncenter" title="7" src="http://www.extratuts.com/wp-content/uploads/2009/12/7.png" alt="7" width="439" height="223" /></a></p>
<p style="text-align: center;"><a href="http://www.coldfusionjedi.com/demos/jquerytabs/test.cfm">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.insideria.com/2009/03/playing-with-jquery-tabs.html">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">7.How easy to create a slide tabbed box using jQuery</h2>
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/8.png"><img class="size-full wp-image-730 aligncenter" title="8" src="http://www.extratuts.com/wp-content/uploads/2009/12/8.png" alt="8" width="382" height="291" /></a></p>
<p style="text-align: center;"><a href="http://www.hieu.co.uk/examples/slidetabs/index.html">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.hieu.co.uk/blog/index.php/2009/01/28/how-easy-to-create-a-slide-tabbed-box-using-jquery/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">8.Javascript: JQuery Tabs</h2>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/9.png"><img class="size-full wp-image-731 aligncenter" title="9" src="http://www.extratuts.com/wp-content/uploads/2009/12/9.png" alt="9" width="232" height="124" /></a></p>
<p style="text-align: center;"><a href="http://progtuts.info/downloads/JQueryTabs/">The Demo</a></p>
<p style="text-align: center;"><a href="http://progtuts.info/232/javascript-jquery-tabs/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">9.Create Flipping Content Tabs Using jQuery</h2>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/10.png"><img class="size-full wp-image-732 aligncenter" title="10" src="http://www.extratuts.com/wp-content/uploads/2009/12/10.png" alt="10" width="300" height="246" /></a></p>
<p style="text-align: center;"><a href="http://demo.webdeveloperplus.com/flipping-tabs/">The Demo</a></p>
<p style="text-align: center;"><a href="http://webdeveloperplus.com/jquery/create-flipping-content-tabs-using-jquery/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">10.Ultra simple jQuery tabs</h2>
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/11.png"><img class="size-full wp-image-733 aligncenter" title="11" src="http://www.extratuts.com/wp-content/uploads/2009/12/11.png" alt="11" width="256" height="77" /></a></p>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://justfreetemplates.com/blog/wp-content/uploads/2009/08/simple-jquery-tabs.html">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.tutorialhero.com/click-62422-ultra_simple_jquery_tabs.php">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">11.jQuery Tabs made easy</h2>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/12.png"></a><a href="http://www.extratuts.com/wp-content/uploads/2009/12/121.png"><img class="size-full wp-image-735 aligncenter" title="12" src="http://www.extratuts.com/wp-content/uploads/2009/12/121.png" alt="12" width="318" height="282" /></a></p>
<p style="text-align: center;"><a href="http://www.ilovecolors.com.ar/wp-content/uploads/jquery-tabs/">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.ilovecolors.com.ar/jquery-tabs/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">12.Animated tapped content with jquery</h2>
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/13.png"><img class="size-full wp-image-736 aligncenter" title="13" src="http://www.extratuts.com/wp-content/uploads/2009/12/13.png" alt="13" width="443" height="197" /></a></p>
<p style="text-align: center;"><a href="http://www.gayadesign.com/scripts/tabbed/">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">13.<span style="color: #000000;"><strong>jQuery To Fade Effects tabs</strong></span></h2>
<p style="text-align: center;"><span style="color: #000000;"><strong><br />
</strong></span></p>
<p style="text-align: center;"><span style="color: #000000;"><strong><a href="http://www.extratuts.com/wp-content/uploads/2009/12/14.png"><img class="size-full wp-image-738 aligncenter" title="14" src="http://www.extratuts.com/wp-content/uploads/2009/12/14.png" alt="14" width="265" height="163" /></a></strong></span></p>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.roseindia.net/ajax/jquery/fadeEffectTab.html#T-1">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.roseindia.net/ajax/jquery/fadeEffectTabs.shtml">Visit the tutorial</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">14.JQuery TabContainer Theme with Tab Transition Animations</h2>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/15.png"><img class="size-full wp-image-739 aligncenter" title="15" src="http://www.extratuts.com/wp-content/uploads/2009/12/15.png" alt="15" width="571" height="250" /></a></p>
<p style="text-align: center;"><a href="http://mattberseth2.com/tab_animation/">The Demo</a></p>
<p style="text-align: center;"><a href="http://mattberseth.com/blog/2007/11/jquery_tabcontainer_theme_with.html">Visit the tutorial</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">15.jQuery Sliding Tab Menu for Sidebar Tutorial</h2>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/16.png"><img class="size-full wp-image-740 aligncenter" title="16" src="http://www.extratuts.com/wp-content/uploads/2009/12/16.png" alt="16" width="267" height="384" /></a></p>
<p style="text-align: center;"><a href="http://www.queness.com/resources/html/scrollto/index.html">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.queness.com/post/274/jquery-sliding-tab-menu-for-sidebar-tutorial">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">


<p>Related posts:<ol><li><a href='http://www.extratuts.com/create-simple-tabs-with-jquery-and-css' rel='bookmark' title='Create Simple Tabs With jQuery and CSS'>Create Simple Tabs With jQuery and CSS</a></li>
<li><a href='http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples' rel='bookmark' title='25+ jQuery Tutorials Roundup With Examples'>25+ jQuery Tutorials Roundup With Examples</a></li>
<li><a href='http://www.extratuts.com/excellent-jquery-menus-tutorials' rel='bookmark' title='about 20 excellent jquery menus tutorials'>about 20 excellent jquery menus tutorials</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/amazing-jquery-tabs-tutorials/feed</wfw:commentRss>
		<slash:comments>33</slash:comments>
		</item>
		<item>
		<title>about 20 excellent jquery menus tutorials</title>
		<link>http://www.extratuts.com/excellent-jquery-menus-tutorials</link>
		<comments>http://www.extratuts.com/excellent-jquery-menus-tutorials#comments</comments>
		<pubDate>Sun, 29 Nov 2009 14:51:09 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS & Xhtml]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[excellent jquery]]></category>
		<category><![CDATA[jquery menus]]></category>
		<category><![CDATA[jquery menus tutorials]]></category>
		<category><![CDATA[tutorials]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=658</guid>
		<description><![CDATA[Who didn&#8217;t see a jquery menus and didnt like it with its special effects that could catch both expert and beginners eyes? of course jquery menus is the most popular menus that depend on  both functionality and eye catching designs and moving effects. For this reason you will hardly find any website that don&#8217;t use [...]


Related posts:<ol><li><a href='http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples' rel='bookmark' title='25+ jQuery Tutorials Roundup With Examples'>25+ jQuery Tutorials Roundup With Examples</a></li>
<li><a href='http://www.extratuts.com/amazing-jquery-tabs-tutorials' rel='bookmark' title='15 amazing jquery tabs tutorials'>15 amazing jquery tabs tutorials</a></li>
<li><a href='http://www.extratuts.com/css-jquery-animated-navigation-2' rel='bookmark' title='CSS and jQuery Animated Navigation'>CSS and jQuery Animated Navigation</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;">Who didn&#8217;t see a jquery menus and didnt like it with its special effects that could catch both expert and beginners eyes?</p>
<p style="text-align: left;">of course jquery menus is the most popular menus that depend on  both functionality and eye catching designs and moving effects. For this reason<span id="more-658"></span> you will hardly find any website that don&#8217;t use one of them. If you one of jquery fans and want to learn how you will be able to deal with them and to but theme in your website, here are about 20 jquery menus tutorials that will help you to learn, see and apply them easily in just few steps.</p>
<h2 style="text-align: center;">1. Sliding Top Menu With jQuery</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-685" title="jquery-sliding-menu" src="http://www.extratuts.com/wp-content/uploads/2009/11/jquery-sliding-menu.jpg" alt="jquery-sliding-menu" width="480" height="150" /></p>
<p style="text-align: center;"><a href="http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">2.Sexy Drop Down Menu w/ jQuery &amp; CSS</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-686" title="image1" src="http://www.extratuts.com/wp-content/uploads/2009/11/image1.jpg" alt="image1" width="600" height="350" /></p>
<p style="text-align: center;"><a href="http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">3.jquery css example dropdown menu</h2>
<p style="text-align: center;"><img title="Untitled-10" src="http://www.extratuts.com/wp-content/uploads/2009/11/Untitled-10.png" alt="Untitled-10" width="453" height="150" /></p>
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">4.Color Fading Menu with jQuery</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-687" title="fade-example" src="http://www.extratuts.com/wp-content/uploads/2009/11/fade-example.png" alt="fade-example" width="576" height="182" /></p>
<p style="text-align: center;"><a href="http://css-tricks.com/color-fading-menu-with-jquery/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">5. Making a Smooth Animated Menu with jQuery</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-688" title="jquery-smooth-menu" src="http://www.extratuts.com/wp-content/uploads/2009/11/jquery-smooth-menu.jpg" alt="jquery-smooth-menu" width="500" height="220" /></p>
<p style="text-align: center;"><a href="http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">6.jQuery Drop Line Menu</h2>
<h2 style="text-align: center;"><img title="Untitled-2" src="http://www.extratuts.com/wp-content/uploads/2009/11/Untitled-21.png" alt="Untitled-2" width="353" height="91" /></h2>
<p style="text-align: center;"><a href="http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_menu/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">7.Animated Menus Using jQuery</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-689" title="Untitled-2d" src="http://www.extratuts.com/wp-content/uploads/2009/11/Untitled-2d.png" alt="Untitled-2d" width="317" height="125" /></p>
<p style="text-align: center;"><a href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">8.Horizontal Scroll Menu with jQuery Tutorial</h2>
<h2 style="text-align: center;"><img class="aligncenter size-full wp-image-692" title="256" src="http://www.extratuts.com/wp-content/uploads/2009/11/256.gif" alt="256" width="190" height="120" /></h2>
<p style="text-align: center;"><a href="http://www.queness.com/post/256/horizontal-scroll-menu-with-jquery-tutorial">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">9.Simple JQuery Accordion menu</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-673" title="1" src="http://www.extratuts.com/wp-content/uploads/2009/11/1.png" alt="1" width="218" height="216" /></p>
<p style="text-align: center;"><a href="http://www.i-marco.nl/weblog/jquery-accordion-menu/#">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">10.jQuery Pop-up Menu Tutorial</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-693" title="jqueryslidingmenu" src="http://www.extratuts.com/wp-content/uploads/2009/11/jqueryslidingmenu.jpg" alt="jqueryslidingmenu" width="540" height="109" /></p>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.ilovecolors.com.ar/sliding-menu-using-jquery/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">11.jquery feed menus</h2>
<h2 style="text-align: center;"><img class="aligncenter size-full wp-image-694" title="feed_menu_header" src="http://www.extratuts.com/wp-content/uploads/2009/11/feed_menu_header.png" alt="feed_menu_header" width="460" height="120" /></h2>
<p style="text-align: center;"><a href="http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">12.Creating a Floating HTML Menu Using jQuery and CSS</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-674" title="2" src="http://www.extratuts.com/wp-content/uploads/2009/11/2.png" alt="2" width="294" height="239" /></p>
<p style="text-align: center;"><a href="http://net.tutsplus.com/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">13. Sliding Jquery Menu</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-690" title="step1" src="http://www.extratuts.com/wp-content/uploads/2009/11/step1.gif" alt="step1" width="600" height="300" /></p>
<p style="text-align: center;"><a href="http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">14.Fading Menu – Replacing Content</h2>
<h2 style="text-align: center;"><img class="aligncenter size-full wp-image-691" title="fadingmenu" src="http://www.extratuts.com/wp-content/uploads/2009/11/fadingmenu.png" alt="fadingmenu" width="550" height="110" /></h2>
<p style="text-align: center;"><a href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">15.Make a Mega Drop-Down Menu with jQuery</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-675" title="3" src="http://www.extratuts.com/wp-content/uploads/2009/11/3.png" alt="3" width="370" height="221" /></p>
<p style="text-align: center;"><a href="http://www.sitepoint.com/blogs/2009/03/31/make-a-mega-drop-down-menu-with-jquery/#">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">16.accordion menu</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-676" title="Untitled-2" src="http://www.extratuts.com/wp-content/uploads/2009/11/Untitled-2.png" alt="Untitled-2" width="353" height="270" /></p>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.learningjquery.com/2007/03/accordion-madness">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">17.Simple animated menu with jquery</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-677" title="Untitled-4" src="http://www.extratuts.com/wp-content/uploads/2009/11/Untitled-4.png" alt="Untitled-4" width="178" height="164" /></p>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://lastwebdesigner.com/jquery/simple-animated-menu-with-jquery.html">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">18.apple style menu and improve it via jQuery</h2>
<p style="text-align: center;">
<p style="text-align: center;"><img class="aligncenter size-full wp-image-678" title="7" src="http://www.extratuts.com/wp-content/uploads/2009/11/7.png" alt="7" width="399" height="53" /></p>
<p style="text-align: center;"><a href="http://www.kriesi.at/archives/apple-menu-improved-with-jquery">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">19.jQuery Sliding Tab Menu for Sidebar Tutorial</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-679" title="Untitled-8" src="http://www.extratuts.com/wp-content/uploads/2009/11/Untitled-8.png" alt="Untitled-8" width="271" height="386" /></p>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.queness.com/post/274/jquery-sliding-tab-menu-for-sidebar-tutorial">visit the tutorial from here</a></p>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples' rel='bookmark' title='25+ jQuery Tutorials Roundup With Examples'>25+ jQuery Tutorials Roundup With Examples</a></li>
<li><a href='http://www.extratuts.com/amazing-jquery-tabs-tutorials' rel='bookmark' title='15 amazing jquery tabs tutorials'>15 amazing jquery tabs tutorials</a></li>
<li><a href='http://www.extratuts.com/css-jquery-animated-navigation-2' rel='bookmark' title='CSS and jQuery Animated Navigation'>CSS and jQuery Animated Navigation</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/excellent-jquery-menus-tutorials/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Dojo : A Distinct Library For JavaScript</title>
		<link>http://www.extratuts.com/dojo-a-distinct-library-for-javascript</link>
		<comments>http://www.extratuts.com/dojo-a-distinct-library-for-javascript#comments</comments>
		<pubDate>Thu, 01 Oct 2009 15:07:29 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Reviews]]></category>
		<category><![CDATA[dojo]]></category>
		<category><![CDATA[libraries]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=500</guid>
		<description><![CDATA[Dojo is an open source DHTML toolkit written in JavaScript , it aims to solve some long-standing historical problems with DHTML which prevented mass adoption of dynamic web application development , simply Dojo is a distinct standard library for JavaScript . Dojo Demos : You can find in the demo page more examples which show [...]


Related posts:<ol><li><a href='http://www.extratuts.com/how-to-create-a-beautiful-dropdown-blogroll-without-javascript' rel='bookmark' title='How To Create a Beautiful Dropdown Blogroll Without Javascript'>How To Create a Beautiful Dropdown Blogroll Without Javascript</a></li>
<li><a href='http://www.extratuts.com/lightbox-futurebox-without-using-javascript' rel='bookmark' title='Lightbox , Futurebox Without Using JavaScript'>Lightbox , Futurebox Without Using JavaScript</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://dojotoolkit.org">Dojo</a> is an open source DHTML toolkit written in JavaScript , it aims to solve some long-standing historical problems with DHTML which prevented mass adoption of dynamic web application development , simply Dojo is a distinct standard library for JavaScript .</p>
<p><span id="more-500"></span><img class="alignnone" src="http://www.extratuts.com/wp-content/uploads/wp-post-thumbnail/tutorial38.jpg" alt="" width="590" height="170" title="tutorial38 Dojo : A Distinct Library For JavaScript" /></p>
<h3><span style="color: #1565ca;">Dojo Demos :</span></h3>
<p>You can find in the <a href="http://dojotoolkit.org/demos">demo page</a> more examples which show you how Dojo helps to improve and develope your app.</p>
<h3><span style="color: #1565ca;">Dojo Tutorials :</span></h3>
<p>there are a collection of tutorials which show how to use Dojo and creating applications with it , you can read it via JavaWorld here in the tutorial titled under <a href="http://www.javaworld.com/javaworld/jw-01-2009/jw-01-introduction-to-dojo-1.html">Introduction to Dojo</a> , and this is a complete list of <a href="http://docs.dojocampus.org/key-links">Dojo tutorials and resources </a>.</p>
<h3><span style="color: #1565ca;">Download :</span><span style="color: #1565ca;"><a href="http://dojotoolkit.org/downloads">Download Page</a><br />
</span></h3>
<p>as any JavaScript libraries , Dojo aims to reduce your time developing your applications .</p>
<p>Big thanks : http://alwank.com</p>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/how-to-create-a-beautiful-dropdown-blogroll-without-javascript' rel='bookmark' title='How To Create a Beautiful Dropdown Blogroll Without Javascript'>How To Create a Beautiful Dropdown Blogroll Without Javascript</a></li>
<li><a href='http://www.extratuts.com/lightbox-futurebox-without-using-javascript' rel='bookmark' title='Lightbox , Futurebox Without Using JavaScript'>Lightbox , Futurebox Without Using JavaScript</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/dojo-a-distinct-library-for-javascript/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Uploadify : a multiple file upload plugin for jQuery</title>
		<link>http://www.extratuts.com/uploadify-a-multiple-file-upload-plugin-for-jquery</link>
		<comments>http://www.extratuts.com/uploadify-a-multiple-file-upload-plugin-for-jquery#comments</comments>
		<pubDate>Thu, 03 Sep 2009 16:03:40 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Reviews]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[upload]]></category>
		<category><![CDATA[uploadify]]></category>
		<category><![CDATA[uploading]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=434</guid>
		<description><![CDATA[Uploadify , a jQuery plugin that allows the integration of a multiple or single file uploads on your website , easy to implement and integrate with any development langauge , Uploadify is available under the GPL and MIT licenses . some of the feauters : easy integration of a multiple (or single) file uploads on [...]


Related posts:<ol><li><a href='http://www.extratuts.com/crafting-an-animated-postcard-with-jquery' rel='bookmark' title='Crafting an Animated Postcard With jQuery'>Crafting an Animated Postcard With jQuery</a></li>
<li><a href='http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples' rel='bookmark' title='25+ jQuery Tutorials Roundup With Examples'>25+ jQuery Tutorials Roundup With Examples</a></li>
<li><a href='http://www.extratuts.com/create-simple-tabs-with-jquery-and-css' rel='bookmark' title='Create Simple Tabs With jQuery and CSS'>Create Simple Tabs With jQuery and CSS</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.uploadify.com/">Uploadify </a>, a jQuery plugin that allows the integration of a  multiple or single file uploads on your website , easy to implement and integrate with any development langauge , Uploadify is available under the GPL and MIT licenses .</p>
<p><span id="more-434"></span></p>
<h2><a href="http://www.uploadify.com/"><img class="alignnone" src="http://www.extratuts.com/wp-content/uploads/wp-post-thumbnail/tutorial33.jpg" alt="" width="590" height="170" title="tutorial33 Uploadify : a multiple file upload plugin for jQuery" /></a></h2>
<h5>some of the feauters :</h5>
<ul>
<li>easy integration of a  multiple (or single) file uploads on your site .</li>
</ul>
<ul>
<li>easy to implement</li>
</ul>
<ul>
<li>easy to customize</li>
</ul>
<ul>
<li>allows you to get the details of a file as it is opened for uploading by Flash</li>
</ul>
<ul>
<li>available under the GPL and MIT licenses</li>
</ul>
<h2></h2>
<h5>Demo : <a href="http://www.uploadify.com/demo">http://www.uploadify.com/demo</a></h5>
<h5>Website : <a href="http://www.uploadify.com/">http://www.uploadify.com/</a></h5>
<h5>Download : <a href="http://www.uploadify.com/download/">http://www.uploadify.com/download/</a></h5>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/crafting-an-animated-postcard-with-jquery' rel='bookmark' title='Crafting an Animated Postcard With jQuery'>Crafting an Animated Postcard With jQuery</a></li>
<li><a href='http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples' rel='bookmark' title='25+ jQuery Tutorials Roundup With Examples'>25+ jQuery Tutorials Roundup With Examples</a></li>
<li><a href='http://www.extratuts.com/create-simple-tabs-with-jquery-and-css' rel='bookmark' title='Create Simple Tabs With jQuery and CSS'>Create Simple Tabs With jQuery and CSS</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/uploadify-a-multiple-file-upload-plugin-for-jquery/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>25+ jQuery Tutorials Roundup With Examples</title>
		<link>http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples</link>
		<comments>http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples#comments</comments>
		<pubDate>Mon, 17 Aug 2009 19:29:45 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[web2 roundups]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jquery tutorials]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[tutorials]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=273</guid>
		<description><![CDATA[jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.  ,,  jQuery.com So we have selected a set of best tutorials that will strengthen your practical side using jQuery . Using [...]


Related posts:<ol><li><a href='http://www.extratuts.com/amazing-jquery-tabs-tutorials' rel='bookmark' title='15 amazing jquery tabs tutorials'>15 amazing jquery tabs tutorials</a></li>
<li><a href='http://www.extratuts.com/16-amazing-jquery-navigation-menu-tutorials' rel='bookmark' title='16 amazing jquery navigation menu tutorials'>16 amazing jquery navigation menu tutorials</a></li>
<li><a href='http://www.extratuts.com/top-6-photoshop-text-effect-tutorials-august-2009' rel='bookmark' title='Top 6 Photoshop Text-Effect Tutorials : August 2009'>Top 6 Photoshop Text-Effect Tutorials : August 2009</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;">jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. <strong>jQuery is designed to change the way that you write JavaScript.  ,, <span style="color: #333399;"> jQuery.com</span></strong></p>
<p>So we have selected a set of best tutorials that will strengthen your practical side using jQuery .<strong><span style="color: #cc99ff;"> </span></strong><span id="more-273"></span></p>
<h2 style="text-align: left;"><a href="http://snook.ca/archives/javascript/jquery-bg-image-animations/">Using jQuery for Background Image Animations</a><strong> </strong><strong> : <a href="http://snook.ca/technical/jquery-bg/">View Demo</a><a href="http://www.sohtanaka.com/web-design/spice-up-your-images-with-css/"><br />
</a></strong></h2>
<p style="text-align: center;"><a href="http://snook.ca/archives/javascript/jquery-bg-image-animations/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/1/1.jpg" alt="Using jQuery for Background Image Animations" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/">Animated Menus Using jQuery</a><strong> </strong><strong> </strong><strong> </strong><strong> : <a href="http://www.shopdev.co.uk/blog/menuDemo.html">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/2/2.jpg" alt="Animated Menus Using jQuery" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://banhawi.com/2009/06/create-your-own-kwicks-jquery-effect/">Create Your Own “kwicks” jQuery Effect</a><strong> </strong><strong> </strong><strong> </strong><strong><a href="http://banhawi.com/2009/06/create-your-own-kwicks-jquery-effect/"> </a>: <a href="http://banhawi.com/demos/jquery/kwicks-clone/Example.html">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://banhawi.com/2009/06/create-your-own-kwicks-jquery-effect/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/3/3.jpg" alt="Create Your Own “kwicks” jQuery Effect" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://net.tutsplus.com/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/">Create a Cool Animated Navigation with CSS and jQuery</a><strong> </strong><strong> </strong><strong> </strong><strong> : <a href="http://nettuts.s3.amazonaws.com/009_jQueryMenu/sm/result/index.html">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://net.tutsplus.com/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/4/4.jpg" alt="Create a Cool Animated Navigation with CSS and jQuery" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://design-notes.info/tutorial/jquery-tutorial/make-your-header-responses-to-mouse-movements-with-jparallax/">Make Your Header Responses To Mouse Movements with jParallax</a><strong> </strong><strong> </strong><strong> </strong><strong> : <a href="http://alexandratong.com/">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://design-notes.info/tutorial/jquery-tutorial/make-your-header-responses-to-mouse-movements-with-jparallax/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/5/5.jpg" alt="Make Your Header Responses To Mouse Movements with jParallax " width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2><a href="http://desizntech.info/2009/06/playing-with-jquery-color-plugin-and-color-animation/">Playing with jQuery Color Plugin and Color Animation</a><strong> </strong><strong> </strong><strong> </strong><strong> : <a href="http://desizntech.info/demo/jQuery_color_animation/">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://desizntech.info/2009/06/playing-with-jquery-color-plugin-and-color-animation/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/6/6.jpg" alt=" Playing with jQuery Color Plugin and Color Animation" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://9lessons.blogspot.com/2009/07/delete-records-with-random-animation.html">Delete Records with Random Animation Effect using jQuery and Ajax</a><strong> </strong><strong> </strong><strong> </strong><strong> : <a href="http://9lessons.net63.net/delete_random.php">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://9lessons.blogspot.com/2009/07/delete-records-with-random-animation.html"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/7/7.jpg" alt=" Delete Records with Random Animation Effect using jQuery and Ajax" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/">Create a Realistic Hover Effect With jQuery</a><strong> </strong><strong> </strong><strong> </strong><strong> : <a href="http://adrianpelletier.com/sandbox/jquery_hover_nav/">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/8/8.jpg" alt="Create a Realistic Hover Effect With jQuery" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://blog.themeforest.net/tutorials/simulate-gravity-with-jquery/">Simulate Gravity with jQuery</a><strong> </strong><strong> </strong><strong> </strong><strong> : <a href="http://themeforest.s3.amazonaws.com/74_jquery/jquerygravitysource/index.html">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://blog.themeforest.net/tutorials/simulate-gravity-with-jquery/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/9/9.jpg" alt="Simulate Gravity with jQuery" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://css-tricks.com/auto-moving-parallax-background/">Auto-Moving Parallax Background</a><strong> </strong><strong> </strong><strong> </strong><strong> : <a href="http://css-tricks.com/examples/StarryNightMoving/">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://css-tricks.com/auto-moving-parallax-background/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/10/10.jpg" alt="Auto-Moving Parallax Background" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://net.tutsplus.com/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/">How to Load In and Animate Content with jQuery</a><strong> </strong><strong> </strong><strong> </strong><strong> : <a href="http://nettuts.s3.amazonaws.com/011_jQuerySite/sample/index.html">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://net.tutsplus.com/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/11/11.jpg" alt="How to Load In and Animate Content with jQuery" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2><a href="http://www.kriesi.at/archives/apple-menu-improved-with-jquery">Create an apple style menu and improve it via jQuery</a><strong> </strong><strong> </strong><strong> </strong><strong> : <a href="http://www.kriesi.at/wp-content/extra_data/kwicks_tutorial/kwicks_final.html">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://www.kriesi.at/archives/apple-menu-improved-with-jquery"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/12/12.jpg" alt="Create an apple style menu and improve it via jQuery" width="590" height="170" /></a></p>
<p style="text-align: center;"><script type="text/javascript"><!--
google_ad_client = "ca-pub-4023069866880559";
/* extra in post */
google_ad_slot = "5362203380";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<h2 style="text-align: left;"><a href="http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/">Sliding Boxes and Captions with jQuery</a><strong> </strong><strong> </strong><strong> </strong><strong> : <a href="http://buildinternet.com/live/boxes/">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/13/13.jpg" alt="Sliding Boxes and Captions with jQuery" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html">Sexy Drop Down Menu w/ jQuery &amp; CSS</a><strong> </strong><strong> </strong><strong> </strong><strong> : <a href="http://www.sohtanaka.com/web-design/examples/drop-down-menu/">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/14/14.jpg" alt="Sexy Drop Down Menu w/ jQuery &amp; CSS" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://www.webdesignbooth.com/create-a-vertical-scrolling-news-ticker-with-jquery-and-jcarousel-lite/">Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite</a><strong> </strong><strong> </strong><strong> </strong><strong> : <a href="http://www.webdesignbooth.com/demo/news-ticker">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://www.webdesignbooth.com/create-a-vertical-scrolling-news-ticker-with-jquery-and-jcarousel-lite/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/15/15.jpg" alt="Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://valums.com/scroll-menu-jquery/">Horizontal Scrolling Menu made with CSS and jQuery</a><strong> </strong><strong> </strong><strong> </strong><strong> : <a href="http://valums.com/wp-content/uploads/2009/02/menu/final.htm">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://valums.com/scroll-menu-jquery/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/16/16.jpg" alt="Horizontal Scrolling Menu made with CSS and jQuery" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://www.ilovecolors.com.ar/rollovers-tooltips-jquery/">Rollovers and tooltips with jQuery</a><strong> </strong><strong> </strong><strong> </strong><strong><a href="http://www.ilovecolors.com.ar/rollovers-tooltips-jquery/"> </a>: <a href="http://ilovecolors.com.ar/wp-content/uploads/jquery-rollover-tooltip/example.html">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://www.ilovecolors.com.ar/rollovers-tooltips-jquery/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/17/17.jpg" alt="Rollovers and tooltips with jQuery" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-dynamic-poll-with-jquery-and-php/">Creating a Dynamic Poll with jQuery and PHP</a><strong> </strong><strong></strong><strong></strong><strong> : <a href="http://net.tutsplus.com/demos/test_poll/">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-dynamic-poll-with-jquery-and-php/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/18/18.jpg" alt="Creating a Dynamic Poll with jQuery and PHP" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://jqueryfordesigners.com/simple-jquery-spy-effect/">Simple jQuery Spy Effect</a><strong></strong><strong></strong><strong></strong><strong> : <a href="http://jqueryfordesigners.com/demo/simple-spy.html">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://jqueryfordesigners.com/simple-jquery-spy-effect/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/19/19.jpg" alt="Simple jQuery Spy Effect" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://jqueryfordesigners.com/slider-gallery/">Slider Gallery Using jQuery</a><strong></strong><strong></strong><strong></strong><strong> : <a href="http://jqueryfordesigners.com/demo/slider-gallery.html">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://jqueryfordesigners.com/slider-gallery/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/20/20.jpg" alt="Slider Gallery Using jQuery" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://www.hieu.co.uk/blog/index.php/2009/01/28/how-easy-to-create-a-slide-tabbed-box-using-jquery/">How easy to create a slide tabbed box using jQuery</a><strong></strong><strong></strong><strong></strong><strong> : <a href="http://www.hieu.co.uk/examples/slidetabs/index.html">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://www.hieu.co.uk/blog/index.php/2009/01/28/how-easy-to-create-a-slide-tabbed-box-using-jquery/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/21/21.jpg" alt="How easy to create a slide tabbed box using jQuery" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/">Animated tabbed content with jQuery</a><strong></strong><strong></strong><strong></strong><strong> : <a href="http://www.gayadesign.com/scripts/tabbed/">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/22/22.jpg" alt="Text Animated tabbed content with jQuery" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://net.tutsplus.com/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/">Submit A Form Without Page Refresh using jQuery</a><strong></strong><strong></strong><strong></strong><strong> : <a href="http://net.tutsplus.com/demos/contactform/">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://net.tutsplus.com/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/23/23.jpg" alt="Submit A Form Without Page Refresh using jQuery" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/">Creating a Mouseover Fade Effect with jQuery</a><strong></strong><strong></strong><strong></strong><strong> : <a href="http://bavotasan.com/demos/fadehover/">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/24/24.jpg" alt="Creating a Mouseover Fade Effect with jQuery" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/">Sliding Top Menu With jQuery</a><strong></strong><strong></strong><strong></strong><strong> : <a href="http://www.webresourcesdepot.com/wp-content/uploads/file/jquery-sliding-menu/">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/25/25.jpg" alt="Sliding Top Menu With jQuery" width="590" height="170" /></a></p>
<p style="text-align: center;">
<h2 style="text-align: left;"><a href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/">Learning jQuery: Fading Menu – Replacing Content</a><strong></strong><strong></strong><strong></strong><strong> : <a href="http://css-tricks.com/examples/MenuFader/">View Demo</a></strong></h2>
<p style="text-align: center;"><a href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/extutorials/2/26/26.jpg" alt="Learning jQuery: Fading Menu – Replacing Content" width="590" height="170" /></a></p>
<p style="text-align: left;">&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;</p>
<p style="text-align: left;">LusterForever.com &#8211; Cool silver charms and <a href="http://www.lusterforever.com/" target="_blank">leather bracelets design</a>! Totally awesome sterling silver bracelets</p>
<h6>Text Link: LusterForever.com - Cool silver charms and <a href="http://www.lusterforever.com/" target="_blank">leather bracelets design</a>! Totally awesome sterling silver bracelets.</h6>
<p style="text-align: center;">


<p>Related posts:<ol><li><a href='http://www.extratuts.com/amazing-jquery-tabs-tutorials' rel='bookmark' title='15 amazing jquery tabs tutorials'>15 amazing jquery tabs tutorials</a></li>
<li><a href='http://www.extratuts.com/16-amazing-jquery-navigation-menu-tutorials' rel='bookmark' title='16 amazing jquery navigation menu tutorials'>16 amazing jquery navigation menu tutorials</a></li>
<li><a href='http://www.extratuts.com/top-6-photoshop-text-effect-tutorials-august-2009' rel='bookmark' title='Top 6 Photoshop Text-Effect Tutorials : August 2009'>Top 6 Photoshop Text-Effect Tutorials : August 2009</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples/feed</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>Crafting an Animated Postcard With jQuery</title>
		<link>http://www.extratuts.com/crafting-an-animated-postcard-with-jquery</link>
		<comments>http://www.extratuts.com/crafting-an-animated-postcard-with-jquery#comments</comments>
		<pubDate>Tue, 11 Aug 2009 02:14:23 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[animated]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[postcard]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=270</guid>
		<description><![CDATA[This -for advanced level users- tutorial is going to show you how to create an animated postcard using jQuery , applying this tutorial will learn you the basics of setting up a continuous animation which can be applied pretty much anywhere and : The art of looping animations using setTimeout() How to take advantage of [...]


Related posts:<ol><li><a href='http://www.extratuts.com/css-jquery-animated-navigation-2' rel='bookmark' title='CSS and jQuery Animated Navigation'>CSS and jQuery Animated Navigation</a></li>
<li><a href='http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples' rel='bookmark' title='25+ jQuery Tutorials Roundup With Examples'>25+ jQuery Tutorials Roundup With Examples</a></li>
<li><a href='http://www.extratuts.com/create-a-cartoon-landscape-website-with-a-little-jquery' rel='bookmark' title='Create a Cartoon Landscape Website With a little jQuery'>Create a Cartoon Landscape Website With a little jQuery</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>This -for advanced level users- tutorial is going to show you how to create an animated postcard using jQuery , applying this tutorial will learn you the basics of setting up a continuous animation which can be applied pretty much anywhere and :</p>
<ul>
<li>The art of looping animations using setTimeout()</li>
<li>How to take advantage of the Easing plugin</li>
<li>A new way to spice up your banner</li>
</ul>
<p style="text-align: center;"><span id="more-270"></span></p>
<p style="text-align: center;"><a href="http://buildinternet.com/2009/08/crafting-an-animated-postcard-with-jquery/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/wp-post-thumbnail/tutorial30.jpg" alt="Crafting an Animated Postcard With jQuery" width="590" height="170" /></a></p>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/css-jquery-animated-navigation-2' rel='bookmark' title='CSS and jQuery Animated Navigation'>CSS and jQuery Animated Navigation</a></li>
<li><a href='http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples' rel='bookmark' title='25+ jQuery Tutorials Roundup With Examples'>25+ jQuery Tutorials Roundup With Examples</a></li>
<li><a href='http://www.extratuts.com/create-a-cartoon-landscape-website-with-a-little-jquery' rel='bookmark' title='Create a Cartoon Landscape Website With a little jQuery'>Create a Cartoon Landscape Website With a little jQuery</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/crafting-an-animated-postcard-with-jquery/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Create a Cartoon Landscape Website With a little jQuery</title>
		<link>http://www.extratuts.com/create-a-cartoon-landscape-website-with-a-little-jquery</link>
		<comments>http://www.extratuts.com/create-a-cartoon-landscape-website-with-a-little-jquery#comments</comments>
		<pubDate>Fri, 07 Aug 2009 18:09:51 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS & Xhtml]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[tutorials]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=256</guid>
		<description><![CDATA[This tutorial will show you how to produce a website that is a little different to the typical ones you see around. It will be a cartonny or comic scene using a variety of different graphic vectors , it also going to show you how to add a little JQuery to spice it up! Related [...]


Related posts:<ol><li><a href='http://www.extratuts.com/create-simple-tabs-with-jquery-and-css' rel='bookmark' title='Create Simple Tabs With jQuery and CSS'>Create Simple Tabs With jQuery and CSS</a></li>
<li><a href='http://www.extratuts.com/create-jquery-sliders-tutorial' rel='bookmark' title='Create jQuery Sliders Tutorial'>Create jQuery Sliders Tutorial</a></li>
<li><a href='http://www.extratuts.com/how-to-create-tweet-counter-with-jquery' rel='bookmark' title='How To Create Tweet Counter With jQuery'>How To Create Tweet Counter With jQuery</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>This tutorial will show you how to produce a website that is a little different to the typical ones you see around. It will be a cartonny or comic scene using a variety of different graphic vectors , it also going to show you how to add a little JQuery to spice it up!</p>
<p style="text-align: center;"><span id="more-256"></span></p>
<p style="text-align: center;"><a href="http://blog.creativityden.com/create-a-cartoon-landscape-website-with-a-little-jquery/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/wp-post-thumbnail/tutorial27.jpg" alt="Lightbox Without Using JavaScript" width="590" height="170" /></a></p>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/create-simple-tabs-with-jquery-and-css' rel='bookmark' title='Create Simple Tabs With jQuery and CSS'>Create Simple Tabs With jQuery and CSS</a></li>
<li><a href='http://www.extratuts.com/create-jquery-sliders-tutorial' rel='bookmark' title='Create jQuery Sliders Tutorial'>Create jQuery Sliders Tutorial</a></li>
<li><a href='http://www.extratuts.com/how-to-create-tweet-counter-with-jquery' rel='bookmark' title='How To Create Tweet Counter With jQuery'>How To Create Tweet Counter With jQuery</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/create-a-cartoon-landscape-website-with-a-little-jquery/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

