KrishnaVandanu

Embed Code Syntax Highlighting in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">Hi Friends,<br /><br />If you are a developer & want to share your code over the blog with proper <span class="IL_AD" id="IL_AD2">highlighting</span> & syntax, then <span class="IL_AD" id="IL_AD6">Blogger</span>/Wordpress doesn't have the immediate solution out here!<br /><br />A quick workaround for Blogger can be to embed your source between:<br /><blockquote></blockquote><br />tags in order to prevent them from getting parsed.<br />E.g.<br /><pre class="brush: js"><br /><blockquote><br /><a href="http://site.com">Site</a><br /></blockquote><br /></pre> But for the formatting & highlighting used <span class="IL_AD" id="IL_AD5">to quote</span> above <br />example, an excellent open source tool called <a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter" linkindex="13">SyntaxHighlighter</a> is available.<br /><br />This is ready to use out of box 100% Javascript based SyntaxHighlighter with extensive features & multiple other options.<br /><br />SyntaxHighlighter can be either <span class="IL_AD" id="IL_AD12">downloaded</span> & used on your own webserver or if you have a blog on Blogger, this can be directly used as well.<br /><br />To downloaded SyntaxHighlighter for your own personal Webserver/Hosted Site: <a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download" linkindex="14">http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download</a><br />Configuration Steps: <a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration" linkindex="15">http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration</a><br /><span class="IL_AD" id="IL_AD9">Brush</span> Aliases:<a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes" linkindex="16">http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes</a><br /><br />In order <span class="IL_AD" id="IL_AD3">to install</span> & use it on Blogger, <span class="IL_AD" id="IL_AD4">follow the</span> below <span class="IL_AD" id="IL_AD11">simple steps</span>:<br />1) Go to your Template Layout-><span class="IL_AD" id="IL_AD1">Download</span> your template as a backup first<br />2)Now click Edit HTML for Layout & then paste the below code in your Template before your </head> tag ends. Note this is pointing to the Latest released version v2.1.364; older versions can be found at: <a href="http://alexgorbatchev.com/pub/sh/" linkindex="17">http://alexgorbatchev.com/pub/sh/</a><br />  <pre class="brush: js"><br /><link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> <br /><link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script> <br /><script language='javascript'> <br />SyntaxHighlighter.config.bloggerMode = true;<br />SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';<br />SyntaxHighlighter.all();<br /></script> <br /></pre><br />3)Save the template & open you blog in IE & Firefox to test if any javascript errors are reported as this might conflict with various other embedded scripts in your template.<br /><br />This completes the direct embedding of SyntaxHighlighter in your Blog. Now lets proceed how to use it in your posts:<br /><br />Usage:<br />For SyntaxHighlighter 2.0 & above:<br />Any code you want to be placed & displayed using SyntaxHighlighter must be enclosed in:<br />  <pre class="brush: js"><br /><script type="syntaxhighlighter" class="brush: html"><![CDATA[<br />#######YOUR CODE############<br />]]></script> <br /></pre><br />Note that we have option of using different <span class="IL_AD" id="IL_AD10">brushes</span> for highlighting different type of codes..e.g. HTML/ASP/C++ etc<br />In order to choose the appropriate brush, following are the various brush aliases supporting the corresponding code highlighting:<br />actionscript3<br />bash, shell<br />c-sharp, csharp<br />cpp, c<br />css     <br />delphi, pas, pascal<br />diff, patch<br />groovy <br />js, jscript, javascript<br />java<br />jfx, javafx<br />perl, pl<br />php <br />plain, text<br />ps, powershell <br />py, python<br />rails, ror, ruby<br />scala<br />sql<br />vb, vbnet<br />xml, xhtml, xslt, html, xhtml <br /><br />Above aliases can be used at: class="brush: <b>alias</b>" while embedding your code in the Blog.<br /><br />Another easy way supported by SyntaxHighlighter is to enclose the code within:<br /> <pre class="brush: js"><br /><pre class="brush: js"><br />#########YOUR CODE########<br /></pre></pre>   The only catch involved out here is, you have to use encoded HTML while embedding within <pre>tags.</pre>Your code can be converted to HTML Encoded using following easy to use Tool:<br /><a href="http://www.string-functions.com/htmlencode.aspx" linkindex="18">http://www.string-functions.com/htmlencode.aspx</a><br /><br />Just copy paste your code & generate the encoded HTML Code. Paste the encoded HTML within <pre>tags for correct rendering. Failure to do so might render wrong code, especially < & > <span class="IL_AD" id="IL_AD8">brackets</span>.<br /><br />Some examples of codes in my Blog:<br /><a href="http://geektalkin.blogspot.com/2009/07/historical-audit-trail-information.html" linkindex="19">http://geektalkin.blogspot.com/2009/07/historical-audit-trail-information.html</a><br /><br /><a href="http://geektalkin.blogspot.com/2009/11/batch-program-to-rename-file-with-date.html" linkindex="20">http://geektalkin.blogspot.com/2009/11/batch-program-to-rename-file-with-date.html</a> <br /><br />Keep Blogging!  </div> Blogger, Embed Code, Code, Syntax, Syntax Highlight, Syntaxhighlighter, Javascript, Blog Tricks, Blogs, Java, SQL, ASP, HTML, HTM, C#, XML, XSL, JS, CSS, PHP, PL, CGI, embed code blog,embed blogger blog, embed youtube blogger, swf embed code, you tube embed code, embed src code, embed wordpress blog, embed video blogger, myspace embed code,embed into, html code,rss feeds,blogger templates, blogger,syntax highlighting,script error,script,etc

Embed Code Syntax Highlighting in Blogger

Hi Friends, If you are a developer & want to share your code over the blog with proper highlighting & syntax, then Blogger /Wordpre...

36 Eye-Catching Jquery Navigation Menus

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div style="text-align: justify;"><br />Navigation menus have really important role in any website. For big <br />sites full with a lot of pages and articles, drop down menus and tabs <br />are popular because they can make it a lot more easier to navigate and <br />move through site, also you can save space on website displaying content<br /> on dynamic tabs. Also if you want to create a navigation menu, that <br />really stands out of the crowd, jQuery could be the right choice to <br />choose offering bunch of customizable options. That’s why I present to <br />You 36 really good jquery navigation menu examples for every need.</div><br /><br /><br /><h2 style="text-align: justify;"><br />1.<a href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial" target="_blank">jQuery Tabbed Interface / Tabbed Structure Menu Tutorial</a></h2><br /><div style="text-align: justify;"><br />Tabbed Interface or Tabbed Structure Menu is getting really famous in<br /> web design & development. This tutorial will show you how to build <br />your own tabbed Interface using jQuery with slideDown/slideUp effect. Be<br /> sure to check out the demo, you definitely will like it.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial" target="_blank"><img alt="jquery-tabbed-interface" height="238" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-tabbed-interface.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html" target="_blank">Preview </a> || <a href="http://www.queness.com/resources/archives/jquery-tab-menu.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />2.<a href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/" target="_blank">Animated Menus Using jQuery</a></h2><br /><div style="text-align: justify;"><br />Learn how to create this amazing animated effect menu just with plain Xhtml,CSS and Javascript help, similar to <a href="http://dragoninteractive.com/" target="_blank">Dragon Interactive</a> (dragoninteractive.com).</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/" target="_blank"><img alt="jquery-animated-menu" height="100" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-animated-menu.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.shopdev.co.uk/blog/menuDemo.html" target="_blank">Preview</a> || <a href="http://www.shopdev.co.uk/blog/menuTut.psd" target="_blank">Download</a></div><br /><div style="text-align: justify;"><br /><br /></div><br /><h2 style="text-align: justify;"><br />2.1. <a href="http://codecanyon.net/item/sliding-tabs-jquery-plugin/141774?ref=1stwebdesigner">Sliding Tabs – jQuery Plugin</a></h2><br /><div style="text-align: justify;"><br />Sliding Tabs is a jQuery plugin for creating horizontal and/or <br />vertical animated tabs for your website. You can have multiple instances<br /> of the tabs and customize them in any way with CSS . The script comes <br />with many customization options, making it very flexible and easy to <br />customize to your needs.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://codecanyon.net/item/sliding-tabs-jquery-plugin/141774?ref=1stwebdesigner"><img alt="" class="" height="300" src="http://3.s3.envato.com/files/2497280/inline_preview.jpg" title="Sliding Tabs" width="590" /></a></div><br /><div style="text-align: center;"><br /><a href="http://codecanyon.net/item/sliding-tabs-jquery-plugin/full_screen_preview/141774?ref=1stwebdesigner">View Demo</a></div><br /><h2 style="text-align: justify;"><br />3. <a href="http://nettuts.com/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/" target="_blank">Create a Cool Animated Navigation with CSS and jQuery (Tutorial + Download)</a></h2><br /><div style="text-align: justify;"><br />Animation and visual feedback are great ways to assist a user in <br />navigating and interacting with a website. While traditionally Adobe’s <br />Flash was the goto for anything animated, these days with the magic of <br />javascript we can avoid Flash altogether.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://nettuts.com/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/" target="_blank"><img alt="jquery-navigation-slide" height="160" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-navigation-slide.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://nettuts.com/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/" target="_blank">Preview</a> || <a href="http://nettuts.s3.amazonaws.com/009_jQueryMenu/sm/result.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />4.<a href="http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx" target="_blank">jQuery ListNav Plugin</a></h2><br /><div style="text-align: justify;"><br />This jQuery plugin supplies an easy way to unobtrusively add a <br />letter-based navigation widget to any UL or OL list. An easily stylable <br />(via CSS) nav bar appears above the list, showing the user the letters <br />A-through-Z. Clicking one of the letters filters the list to show only <br />the items in the list that start with that letter. Hovering over a <br />letter (optionally) shows a count above the letter, indicating how many <br />items will be displayed if that letter is clicked. Other options give <br />you control over the basic functionality.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx" target="_blank"><img alt="jquery-list-nav" height="143" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-list-nav.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.ihwy.com/Labs/Demos/Current/jquery-listnav-plugin.aspx" target="_blank">Preview </a> || <a href="http://www.ihwy.com/Labs/downloads/jquery-listnav/2.0/jquery.listnav-2.0.js" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />5. <a href="http://plugins.jquery.com/project/jqDock" target="_blank">jqDock menu</a></h2><br /><div style="text-align: justify;"><br />Transform a set of images into a Mac-like Dock menu, horizontal or <br />vertical, with icons that expand on rollover, and optional labels.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://plugins.jquery.com/project/jqDock" target="_blank"><img alt="jqdock-jquery-plugin-menu" height="303" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jqdock-jquery-plugin-menu.jpg" width="474" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.wizzud.com/jqDock/" target="_blank">Preview</a> || <a href="http://www.wizzud.com/jqDock/" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />5.1. <a href="http://codecanyon.net/item/floatmenu/164109?ref=1stwebdesigner" target="_blank">FloatMenu</a></h2><br /><div style="text-align: justify;"><br />A little similar to the above navigation menu, only more smarter and <br />more pleasing to the eyes. It can float diagonally (both up and down), <br />vertically (left and right), and horizontally (up and down). It is hard <br />to discuss how cool this navigation menu is,<strong> you just have to see the live preview</strong>. Link below the image. Oh, it works for text links too with cool effects.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://codecanyon.net/item/floatmenu/164109?ref=1stwebdesigner"><img alt="" class="size-full wp-image-42205" height="290" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/floatmenu.jpg" title="floatmenu" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://codecanyon.net/item/floatmenu/full_screen_preview/164109?ref=1stwebdesigner" target="_blank">Live Demo</a></div><br /><h2 style="text-align: justify;"><br />6.<a href="http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" target="_blank">Sliding Jquery Menu</a></h2><br /><div style="text-align: justify;"><br />This tutorial explains and let you download sliding jquery menu and <br />you can see the effect in action over on the PSDtuts webpage in the top <br />right hand corner.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" target="_blank"><img alt="jquery-sliding-menu-tutplus" height="131" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-sliding-menu-tutplus.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br />This is how looks finished demo version:</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" target="_blank"><img alt="vertical-sliding-menu" height="167" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/vertical-sliding-menu.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html" target="_blank">Preview</a> || <a href="http://www.hv-designs.co.uk/tutorials/sliding_menu/sample.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />7.<a href="http://www.alistapart.com/articles/sprites2" target="_blank">CSS Sprites 2 – It’s JavaScript Time</a></h2><br /><h2 style="text-align: center;"><br /><a class="aligncenter" href="http://www.alistapart.com/articles/sprites2" target="_blank"><img alt="css-sprites-2-jquery" height="110" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/css-sprites-2-jquery.jpg" width="570" /></a></h2><br /><div style="text-align: center;"><br /><a href="http://www.alistapart.com/d/sprites2/examples/example1-css.html" target="_blank">Preview</a></div><br /><h2 style="text-align: justify;"><br />8. <a href="http://www.ndesign-studio.com/blog/design/css-dock-menu/" target="_blank">CSS Mac Dock Menu</a></h2><br /><div style="text-align: justify;"><br />If you are a big Mac fan, you will love this CSS dock menu that I <br />designed. It is using Jquery Javascript library and Fisheye component <br />from Interface and some of my icons. It comes with two dock styles – top<br /> and bottom. This CSS dock menu is perfect to add on to my iTheme.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.ndesign-studio.com/blog/design/css-dock-menu/" target="_blank"><img alt="css-dock-menu-jquery" height="120" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/css-dock-menu-jquery.jpg" width="549" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html" target="_blank">Preview</a> || <a href="http://www.ndesign-studio.com/file/css-dock-menu.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />9.<a href="http://www.jeremymartin.name/projects.php?project=kwicks" target="_blank">Kwicks for jQuery</a></h2><br /><div style="text-align: justify;"><br />Kwicks for jQuery started off as a port of the insatiably attractive <br />Mootools effect (of the same name), but has evolved into a highly <br />customizable and versatile widget.</div><br /><h2 style="text-align: center;"><br /><a class="aligncenter" href="http://www.jeremymartin.name/projects.php?project=kwicks" target="_blank"><img alt="kwicks-jquery-menu-navigation" height="104" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/kwicks-jquery-menu-navigation.jpg" width="570" /></a></h2><br /><div style="text-align: center;"><br /><a href="http://www.jeremymartin.name/examples/kwicks.php?example=1" target="_blank">7 Examples</a> || <a href="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/Kwicks-1.5.1.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />10.<a href="http://www.abeautifulsite.net/blog/2008/03/jquery-file-tree" target="_blank">Jquery File Tree</a></h2><br /><div style="text-align: justify;"><br />jQuery File Tree is a configurable, AJAX file browser plugin for <br />jQuery. You can create a customized, fully-interactive file tree with as<br /> little as one line of JavaScript code. Currently, server-side connector<br /> scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a<br /> developer, you can easily make your own connector to work with your <br />language of choice.</div><br /><h2 style="text-align: center;"><br /><a class="aligncenter" href="http://www.abeautifulsite.net/blog/2008/03/jquery-file-tree" target="_blank"><img alt="jquery-file-tree-navigation" height="180" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-file-tree-navigation.jpg" width="570" /></a></h2><br /><div style="text-align: center;"><br /><a href="http://labs.abeautifulsite.net/archived/jquery-fileTree/demo/" target="_blank">Preview</a> || <a href="http://labs.abeautifulsite.net/archived/jquery-fileTree/jquery.fileTree-1.01.zip" target="_blank">Download</a></div><br /><div style="text-align: justify;"><br /><br /></div><br /><h2 style="text-align: justify;"><br /><a href="http://codecanyon.net/item/drop-menu/81289?ref=1stwebdesigner">Drop Menu</a></h2><br /><div style="text-align: justify;"><br />With this script you can make nice and interactive drop down menus. <br />The advantage of this script is that it not only gives you the ability <br />to make list drop down menu. You can also use a div as drop down <br />element. This way you can create big drop down menus like under the <br />buttons products and tutorials in the live preview. Or you can create a <br />login panel in your drop down like I did in the live preview.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://codecanyon.net/item/drop-menu/81289?ref=1stwebdesigner"><img alt="" class="" height="296" src="http://0.s3.envato.com/files/249782.jpg" title="Drop Menu" width="600" /></a></div><br /><div style="text-align: center;"><br /><a href="http://codecanyon.net/item/drop-menu/full_screen_preview/81289?ref=1stwebdesigner">View Demo</a></div><br /><h2 style="text-align: justify;"><br />11.<a href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/" target="_blank">Learning jQuery: Fading Menu – Replacing Content</a></h2><br /><div style="text-align: justify;"><br />Nice tutorial from CSS-tricks explaining how to use CSS with jQuery, <br />this time he teaches how to use jquery fading options on menu.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/" target="_blank"><img alt="menu-fader-jquery-navigation" height="145" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/menu-fader-jquery-navigation.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://css-tricks.com/examples/MenuFader/" target="_blank">Preview</a> || <a href="http://css-tricks.com/examples/MenuFader.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />12. <a href="http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/" target="_blank">How to Make a Smooth Animated Menu with jQuery</a></h2><br /><div style="text-align: justify;"><br />Ever seen some excellent jQuery navigation that left you wanting to <br />make one of your own? This tutorial teaches how to do just that by <br />building a menu and animate it with some smooth effects.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/" target="_blank"><img alt="smooth-animated-jquery-menu" height="160" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/smooth-animated-jquery-menu.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://buildinternet.com/live/smoothmenu/animated-menu.html" target="_blank">Preview</a> || <a href="http://buildinternet.com/live/smoothmenu/animated-menu.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />13.<a href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx" target="_blank">Create Vimeo-like top navigation </a></h2><br /><div style="text-align: justify;"><br />Learn how to create navigation just like on Vimeo site, here is only xhtml,css used, but still I wanted to include this.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx" target="_blank"><img alt="create-vimeo-like-top-navigation" height="136" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/create-vimeo-like-top-navigation.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.jankoatwarpspeed.com/examples/vimeo_navigation/" target="_blank">Preview</a> + <a href="http://vimeo.com/" target="_blank">Vimeo site</a> || <a href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />14. <a href="http://pupunzi.wordpress.com/2009/01/18/mbmenu/" target="_blank">jQuery (mb)Menu 2.3</a></h2><br /><div style="text-align: justify;"><br />This is a powerful jQuery component to build easily a multilevel tree<br /> menu or a contextual menu (right click) in an intuitive way!</div><br /><div style="text-align: justify;"><br />You can add as many submenus as you want; if your submenu or menu is <br />not declared in the page, the component will get it via ajax calling the<br /> template page with the id of the menu you need (the value of “menu” <br />attribute) the ajax page should return a well formatted code as the <br />example below for the menu voices code.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://pupunzi.wordpress.com/2009/01/18/mbmenu/" target="_blank"><img alt="jquery-mb-menu-navigation" height="190" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-mb-menu-navigation.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://pupunzi.com/mb.components/mb._menu/demo/demo.html" target="_blank">Preview</a> || <a href="http://github.com/downloads/pupunzi/jquery.mb.menu/jquery.mb.menu.2.8.5.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />14.1.<a href="http://codecanyon.net/item/context-menu-class/108671?ref=1stwebdesigner" target="_blank">Context Menu Class</a></h2><br /><div style="text-align: justify;"><br />Advantage: anyone can use this class even without enough programming <br />experience. Or if you are a master coder but is short of time, this one <br />is for you. very easy to customize. You can even make a website the same<br /> as how you see a contextual menu on your desktop!</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://codecanyon.net/item/context-menu-class/108671?ref=1stwebdesigner"><img alt="" class="size-full wp-image-42207" height="290" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/context.jpg" title="context" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://codecanyon.net/item/context-menu-class/full_screen_preview/108671?ref=1stwebdesigner" target="_blank">Live Preview</a></div><br /><h2 style="text-align: justify;"><br />15. <a href="http://www.ndoherty.com/blog/category/coda-slider" target="_blank">Coda Slider</a></h2><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.ndoherty.com/blog/category/coda-slider" target="_blank"><img alt="coda-slider-jquery" height="245" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/coda-slider-jquery.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.ndoherty.com/demos/coda-slider/1.1.1/" target="_blank">Preview</a> || <a href="http://www.ndoherty.biz/demos/coda-slider/1.1.1/coda-slider.1.1.1.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />16. <a href="http://www.sunsean.com/idTabs/#t2" target="_blank">jQuery idTabs</a></h2><br /><div style="text-align: justify;"><br />idTabs is a plugin for jQuery. It makes adding tabs into a website <br />super simple. But it can also open the door to endless possibilities.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.sunsean.com/idTabs/#t2" target="_blank"><img alt="idtabs-jquery-navigation" height="102" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/idtabs-jquery-navigation.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.sunsean.com/idTabs/#t1" target="_blank">Preview</a> || <a href="http://www.sunsean.com/idTabs/jquery.idTabs.min.js" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />17. <a href="http://nettuts.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/" target="_blank">Create a Slick Tabbed Content Area using CSS & jQuery</a></h2><br /><div style="text-align: justify;"><br />One of the biggest challenge to web designers is finding ways to <br />place a lot of information on a page without losing usability. Tabbed <br />content is a great way to handle this issue and has been widely used on <br />blogs recently. This is great tutorial explain<br /><br />ing to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally achieve the same thing using the jQuery library.a </div><br /><div style="text-align: justify;"><br /><br /><a href="http://nettuts.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/"><img src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/slick-tabbed-content-area-css-jquery.jpg" /></a> <br /><a href="http://nettuts.s3.amazonaws.com/001_Tabbed/site/jQuery.html">Preview</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />18. <a href="http://www.gmarwaha.com/blog/category/client-side/jquery/" target="_blank">LavaLamp for jQuery lovers!</a></h2><br /><div style="text-align: justify;"><br />Extremely light weighted Lavalamp menu packaged as a plugin for the amazing jQuery javascript library.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.gmarwaha.com/blog/category/client-side/jquery/" target="_blank"><img alt="lava-lamp-jquery-navigation" height="79" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/lava-lamp-jquery-navigation.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.gmarwaha.com/blog/category/client-side/jquery/" target="_blank">Preview</a> || <a href="http://www.gmarwaha.com/jquery/lavalamp/zip/lavalamp_0.1.0.zip" target="_blank">Download</a></div><br /><div style="text-align: center;"><br /><br /></div><br /><h2 style="text-align: justify;"><br /><a href="http://codecanyon.net/item/mega-menu-complete-set/152825?ref=1stwebdesigner">Mega Menu Complete Set</a></h2><br /><div style="text-align: justify;"><br />This Mega Drop Down Menu Complete Set is perfect for creating unique <br />menus by using one of the 10+ jQuery effects and one of the 13 color <br />variants.Based on a custom grid, this menu allows you to organize your <br />content into columns (from 1 up to 12) with a lot of typography examples<br /> such as headings, lists, images styling, tables, form elements, etc.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://codecanyon.net/item/mega-menu-complete-set/152825?ref=1stwebdesigner"><img alt="" class="" height="300" src="http://1.s3.envato.com/files/3766260/large_preview.jpg" title="Mega Menu Javascript" width="590" /></a></div><br /><div style="text-align: center;"><br /><a href="http://codecanyon.net/item/mega-menu-complete-set/full_screen_preview/152825?ref=1stwebdesigner">View Demo</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />19. <a href="http://clarklab.com/posts/animated-drop-down-menu-with-jquery/" target="_blank">Animated Drop Down Menu with jQuery</a></h2><br /><div style="text-align: justify;"><br />Drop down menus are a really convient way to fit a large menu into a <br />really small initial space. For a long time people have just used a form<br /> element for standard drop downs, but with minimal effort you can create<br /> a much slicker effect using jQuery and CSS.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://clarklab.com/posts/animated-drop-down-menu-with-jquery/" target="_blank"><img alt="animated-dropdown-menu-jquery" height="199" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/animated-dropdown-menu-jquery.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://clarklab.com/lessons/dropdown/example.html" target="_blank">Preview</a> || <a href="http://clarklab.com/lessons/dropdown/animateddropdown.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />20. <a href="http://snook.ca/technical/jquery-bg/" target="_blank">Using jQuery for Background Image Animations</a></h2><br /><div style="text-align: justify;"><br />Five different ways, how to create background image animations using jquery – very live effect.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://snook.ca/technical/jquery-bg/" target="_blank"><img alt="jquery-background-image-animations" height="75" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-background-image-animations.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://snook.ca/technical/jquery-bg/" target="_blank">Preview</a></div><br /><h2 style="text-align: justify;"><br />21. <a href="http://nettuts.com/html-css-techniques/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/" target="_blank">How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery</a></h2><br /><div style="text-align: justify;"><br />As you know there are a host of competing javascript libraries around<br /> these days. Though I prefer jQuery, I’ve always liked the way the menu <br />on MooTools worked. So in this tutorial we’ll recreate that same effect …<br /> but this will be done in jQuery!</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://nettuts.com/html-css-techniques/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/" target="_blank"><img alt="mootools-homepage-navigation-effect" height="239" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/mootools-homepage-navigation-effect.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/demo.html" target="_blank">Preview</a> || <a href="http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/Download.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />22. <a href="http://greengeckodesign.com/projects/menumatic.aspx" target="_blank">Menumatic Mootools</a></h2><br /><div style="text-align: justify;"><br />MenuMatic is a MooTools 1.2 class that takes a sematic ordered or <br />unordered list of links and turns it into a dynamic drop down menu <br />system. For users without javascript, it falls back on a CSS menu system<br /> based on Matthew Carroll’s keyboard accessible flavor of Suckerfish <br />Dropdowns by Patrick Griffiths and Dan Webb.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://greengeckodesign.com/projects/menumatic.aspx" target="_blank"><img alt="menumatic-vertical-menu-jquery" height="324" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/menumatic-vertical-menu-jquery.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://greengeckodesign.com/projects/menumatic/examples/vertical/" target="_blank">Preview Vertical</a> || <a href="http://greengeckodesign.com/projects/menumatic/examples/horizontal/" target="_blank">Preview horizontal </a> || <a href="http://menumatc.googlecode.com/files/MenuMatic_0.68.3.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />22.1. <a href="http://codecanyon.net/item/super-menu-pack-10-menus/98066?ref=1stwebdesigner">Super menu pack (10 menus)</a></h2><br /><div style="text-align: justify;"><br />Super menu pack is a collection of 10 cool menus, 5 in pure css and 5<br /> using jQuery framework for customize or layout with your websites or <br />applications and projects.It’s perfect for anyone who wants to give a <br />special touch to their designs or find a starting point. Collection is <br />as varied as possible in style and appearance to give you choice. <br />Thinking in design working with code.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://codecanyon.net/item/super-menu-pack-10-menus/98066?ref=1stwebdesigner"><img alt="" class="" height="300" src="http://1.s3.envato.com/files/313239.jpg" title="Super Menu Pack" width="600" /></a></div><br /><div style="text-align: center;"><br /><a href="http://codecanyon.net/item/super-menu-pack-10-menus/full_screen_preview/98066?ref=1stwebdesigner">View Demo</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />23. <a href="http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/" target="_blank">jQuery convertion: Garagedoor effect using Javascript</a></h2><br /><div style="text-align: justify;"><br />For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/" target="_blank"><img alt="garage-door-jquery-menu" height="181" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/garage-door-jquery-menu.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.gayadesign.com/scripts/jquerygaragedoor/" target="_blank">Preview</a> || <a href="http://www.gayadesign.com/scripts/jquerygaragedoor/jquerygarage.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />24. <a href="http://www.mattweltman.com/sliding_tabs.html" target="_blank">Perspective tabs</a></h2><br /><div style="text-align: justify;"><br />Perspective tabs is a simple mootools 1.2 plug-in that allows for a lagre number of tabs to fit into a small space.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.mattweltman.com/sliding_tabs.html" target="_blank"><img alt="perspective-tabs-mootools-menu" height="255" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/perspective-tabs-mootools-menu.jpg" width="570" /></a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />25. <a href="http://marcgrabanski.com/pages/code/fisheye-menu" target="_blank">Fisheye Menu</a></h2><br /><div style="text-align: justify;"><br />Fisheye Menu is an expanding menu based on the MacOSX doc.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://marcgrabanski.com/pages/code/fisheye-menu" target="_blank"><img alt="fisheye-menu-jquery" height="203" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/fisheye-menu-jquery.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="https://github.com/1Marc/javascript-fisheye-menu/zipball/master" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />26. <a href="http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/" target="_blank">Sliding JavaScript Menu Highlight 1kb</a></h2><br /><div style="text-align: justify;"><br />This sliding hover effect script is an easy method to add some flavor<br /> to your navigation. Using the CSS you can easily customize the <br />navigation to fit your “look and feel”. The markup for the script is <br />very simple as below.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/" target="_blank"><img alt="sliding-javascript-menu-highlight" height="106" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/sliding-javascript-menu-highlight.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.leigeber.com/wp-content/uploads/2008/05/menueffect.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />27. <a href="http://www.chromasynthetic.com/blog/mootools-demo-redux/57/" target="_blank">Mootools Demo Redux</a></h2><br /><div style="text-align: justify;"><br />Simple expandable Javascript navigation menu.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.chromasynthetic.com/blog/mootools-demo-redux/57/" target="_blank"><img alt="mootools-demo-redux" height="117" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/mootools-demo-redux.jpg" width="570" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.chromasynthetic.com/blog/uploads/mootools_nav_example.html" target="_blank">Preview</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />28. <a href="http://berndmatzner.de/jquery/hoveraccordion/" target="_blank">HoverAccordion</a></h2><br /><div style="text-align: justify;"><br />A jQuery Plugin for no-click two-level menus (or whatever else you want to do with it).</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://berndmatzner.de/jquery/hoveraccordion/" target="_blank"><img alt="hover-accordion-jquery" height="325" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/hover-accordion-jquery.jpg" width="570" /></a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />29. <a href="http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/" target="_blank">Simple Javascript Accordions</a></h2><br /><div style="text-align: justify;"><br />Javascript accordians have been used a lot in todays web design <br />world. There are a lot of scripts we have seen and sure you too would <br />have seen them. This script is one of the smallest accordion script <br />which is extremely simple and easy to integrate. Does’nt require any <br />framework and fully cross-browser compatible.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/" target="_blank"><img alt="simple-javascript-accordion-jquery" height="193" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/simple-javascript-accordion-jquery.jpg" width="468" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.dezinerfolio.com/wp-content/uploads/accordemo/01.html" target="_blank">Preview</a> || <a href="http://www.dezinerfolio.com/system/files/simple_accordions_with_src.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br />30. <a href="http://tools.uvumi.com/dropdown.html" target="_blank">UvumiTools Dropdown Menu </a></h2><br /><div style="text-align: justify;"><br />The UvumiTools Dropdown Menu is the menu featured on this website. It<br /> is a very simple multi-level menu built from an HTML unordered list, <br />using Mootools Javascript Framework, it can be easily updated by simply <br />editing a <ul> HTML element.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://tools.uvumi.com/dropdown.html" target="_blank"><img alt="uvumi-tools-dropdown-menu" height="161" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/uvumi-tools-dropdown-menu.jpg" width="570" /></a></div><br /><h2 style="text-align: center;"><br /> </h2><br /><h2 style="text-align: justify;"><br />31. <a href="http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery" target="_blank">Create a multilevel Dropdown menu with CSS and improve it via jQuery</a></h2><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery" target="_blank"><img alt="multilevel-dropdown-menu-jquery" height="117" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/multilevel-dropdown-menu-jquery.jpg" width="490" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.kriesi.at/wp-content/extra_data/suckerfish_tutorial/step4.html" target="_blank">Preview</a> || <a href="http://www.kriesi.at/wp-content/uploads/files/dropdown.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />32. <a href="http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/" target="_blank">jQuery & CSS Example – Dropdown Menu</a></h2><br /><div style="text-align: justify;"><br />Dropdown menus and menu bars have been heavily used since the early <br />days of graphical user interfaces. Their use has become ubiquitous, and <br />even expected, in desktop applications, and the web has quickly followed<br /> suit. This article is intended to describe an extremely basic, yet <br />extremely powerful, technique for adding dropdown menus in your <br />application user interface or website design.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/" target="_blank"><img alt="jquery-css-example-dropdown-menu" height="183" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-css-example-dropdown-menu.jpg" width="510" /></a></div><br /><div style="text-align: center;"><br /><a href="http://designreviver.com/wp-content/uploads/2008/10/example.html" target="_blank">Preview</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />33. <a href="http://nettuts.com/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/" target="_blank">Floating menu jQuery&CSS</a></h2><br /><div style="text-align: justify;"><br />For all of us who deal with long web pages and need to scroll to the <br />top for the menu, here’s a nice alternative: floating menus that move as<br /> you scroll a page. This is done using HTML, CSS and jQuery, and it’s <br />fully W3C-compliant.</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://nettuts.com/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/" target="_blank"><img alt="live-floating-menu-jquery" height="203" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/live-floating-menu-jquery.jpg" width="231" /></a></div><br /><div style="text-align: center;"><br /><a href="https://nettuts.s3.amazonaws.com/018_Floating_Menu/demo/dhtml_float_menu_final_nettut.html" target="_blank">Preview</a> || <a href="https://nettuts.s3.amazonaws.com/018_Floating_Menu/code-floating-menu.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />34. <a href="http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started" target="_blank">Superfish – jQuery menu plugin</a></h2><br /><div style="text-align: justify;"><br />Superfish is an enhanced Suckerfish-style menu jQuery plugin that <br />takes an existing pure CSS drop-down menu (so it degrades gracefully <br />without JavaScript) and adds the following much-sought-after <br />enhancements:</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started" target="_blank"><img alt="superfish-examples-jquery" height="186" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/superfish-examples-jquery.jpg" width="415" /></a></div><br /><div style="text-align: center;"><br /><a href="http://users.tpg.com.au/j_birch/plugins/superfish/#examples" target="_blank">Preview</a> || <a href="http://users.tpg.com.au/j_birch/plugins/superfish/#download" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />35. <a href="http://plugins.jquery.com/project/Pager" target="_blank">JQuery Pager</a></h2><br /><div style="text-align: justify;"><br />A simple JQuery plugin to provide paging UI functionality for data driven web applications</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://plugins.jquery.com/project/Pager" target="_blank"><img alt="jquery-pager-menu" height="139" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-pager-menu.jpg" width="417" /></a></div><br /><div style="text-align: center;"><br /><a href="http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html" target="_blank">Preview</a> || <a href="http://www.komodomedia.comwp-content/uploads/2008/10/jquery_feed_menu.zip" target="_blank">Download</a></div><br /><h2 style="text-align: justify;"><br /> </h2><br /><h2 style="text-align: justify;"><br />36. <a href="http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/" target="_blank">jQuery feed menus</a></h2><br /><div style="text-align: justify;"><br />When feeds became popular, it worked to have one icon on your site to<br /> point your readers to your RSS or Atom feeds. As feeds are more <br />prevalent in blogs and websites abroad, the presence of multiple feeds <br />abound – this jquery feed menu is solution here!</div><br /><div style="text-align: center;"><br /><a class="aligncenter" href="http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/" target="_blank"><img alt="jquery-feed-menus" height="204" src="http://www.1stwebdesigner.com/wp-content/uploads/2009/05/jquery-nav-menu/jquery-feed-menus.jpg" width="491" /></a></div><br /><div style="text-align: center;"><br /><a href="http://www.komodomedia.com/mint/pepper/orderedlist/downloads/download.php?file=http%3A//www.komodomedia.com/samples/feed_menu/jquery_feed_menu.zip" target="_blank">Download</a></div><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=bb1f9ab9-9239-4439-9ada-fce26eafe693" style="border: none; float: right;" /></div><br /></div><br />

36 Eye-Catching Jquery Navigation Menus

Navigation menus have really important role in any website. For big sites full with a lot of pages and articles, drop down menus and tabs ar...

Hosting File dengan Google Code dan TortoiseSVN

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div style="text-align: justify;"><br />Selama ini kita biasa menggunakan <a href="http://code.google.com/">Google Code</a> untuk menyimpan maksimal hanya tiga jenis berkas/file saja. Yaitu JavaScript, ZIP dan gambar. Selain itu tidak pernah. Alasannya, saat file selain JavaScript, ZIP dan gambar yang tersimpan di Google Code dibuka maka akan gagal bekerja. Misalnya file CSS atau HTML. Saat dibuka malah hanya muncul sebagai teks biasa dan tidak bisa digunakan sebagaimana file CSS dan HTML pada normalnya.<br /><br /><br /><br />Biasanya kita mengunggah file melalui situs Google Code secara langsung, atau bisa juga melalui aplikasi subversi seperti <a href="http://tortoisesvn.net/">TortoiseSVN</a>. Kabar baiknya, dengan cara mengatur MIME yang beragam pada aplikasi tersebut, maka itu akan memungkinkan kita untuk mengunggah berbagai file dengan format yang berbeda-beda. Sehingga direktori Google Code tidak lagi tampak sebagai ruang penyimpanan file berupa kode saja, tetapi juga bisa kita gunakan untuk menyimpan berbagai macam file seperti halnya situs-situs penyedia layanan hosting file pada umumnya.<br /><br /><br /><br />Saya masih belum begitu berani untuk mengungkapkan apa itu pengertian MIME. Tapi kalau kamu ingin mencari tahu lebih jauh, kamu bisa membacanya di <a href="http://en.wikipedia.org/wiki/MIME">Wikipedia - MIME</a><br /><br /><br /><br />Dengan mendefinisikan properti otomatis pada aplikasi, maka kita bisa mengunggah beberapa file yang bisa dibilang sama sekali tidak ada hubungannya dengan kode seperti PDF, DOC, SWF (Flash), WAV dan lain-lain.<br /><br /><br /><br />Untuk mengubah masukan berkas Google Code menjadi lebih luas, maka ada dua buah pekerjaan yang harus kita lakukan. Pertama adalah menginstal aplikasi TortoiseSVN dan ke dua adalah membuat sebuah halaman proyek baru.</div><br /><div style="text-align: justify;"><br /><br /></div><br /><div style="text-align: justify;"><br /><b>Pekerjaan I: Menginstal TortoiseSVN</b><br /><br /><br /><br />Kunjungi situs ini ⇒ <a href="http://tortoisesvn.net/downloads.html">http://tortoisesvn.net/downloads.html</a>. Unduh aplikasi tersebut lalu instal. Setelah terinstal, komputer harus di-restart karena aplikasi ini akan terintegrasi dengan menu konteks/menu klik kanan (shell command).<br /><br /><br /><br />Setelah itu klik kanan pada desktop. Pilih menu <b>TortoiseSVN » Settings:</b></div><br /><div style="text-align: justify;"><br /></div><br /><div style="text-align: justify;"><br /><br /></div><br /><div style="text-align: justify;"><br /><a href="http://4.bp.blogspot.com/--eRTyvIbYgQ/URe8R2Z2H8I/AAAAAAAAG2Q/B5SBUZuhGpg/s1600/tortoise-svn_settings.png"><img src="http://4.bp.blogspot.com/--eRTyvIbYgQ/URe8R2Z2H8I/AAAAAAAAG2Q/B5SBUZuhGpg/s1600/tortoise-svn_settings.png" /></a> </div><br /><div style="text-align: justify;"><br /><i> TortoiseSVN » Settings</i></div><br /><div style="text-align: justify;"><br /></div><br /><div style="text-align: justify;"><br /></div><br /><div style="text-align: justify;"><br /></div><br /><div style="text-align: justify;"><br /></div><br /><div style="text-align: justify;"><br /><br /></div><br /><div style="text-align: justify;"><br />Akan muncul kotak dialog seperti ini. Klik <b>General </b>dan klik tombol <b>Edit</b>:</div><br /><div style="text-align: justify;"><br /><br /></div><br /><div style="text-align: justify;"><br /><a href="http://3.bp.blogspot.com/-TbQ2aQxBGqo/URe8Wl5BYqI/AAAAAAAAG2g/0jTmGqgxn0o/s1600/tortoise-svn_edit-mime-type.png"><img src="http://3.bp.blogspot.com/-TbQ2aQxBGqo/URe8Wl5BYqI/AAAAAAAAG2g/0jTmGqgxn0o/s400/tortoise-svn_edit-mime-type.png" /></a> </div><br /><div style="text-align: justify;"><br /><i>Pengaturan TortoiseSVN</i><br /><br /><br /><br />Setelah file config terbuka, salin kode ini dan letakkan di bawah komentar <a href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%23%20Makefile%20%3D%20svn%3Aeol-style%3Dnative&sa=Telusuri"># Makefile = svn:eol-style=native</a></div><br /><pre id="code-block:1"><code class="no-highlight"><br />[miscellany]<br />enable-auto-props = yes<br /><br />[auto-props]<br /># Scriptish formats<br />*.bat        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain<br />*.bsh        = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-beanshell<br />*.cgi        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain<br />*.cmd        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain<br />*.js         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/javascript<br />*.php        = svn:eol-style=native; svn:keywords=Id Rev Date; svn:mime-type=text/x-php<br />*.pl         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl; svn:executable<br />*.pm         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl<br />*.py         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-python; svn:executable<br />*.sh         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-sh; svn:executable<br /><br /># Image formats<br />*.bmp        = svn:mime-type=image/bmp<br />*.gif        = svn:mime-type=image/gif<br />*.ico        = svn:mime-type=image/ico<br />*.jpeg       = svn:mime-type=image/jpeg<br />*.jpg        = svn:mime-type=image/jpeg<br />*.png        = svn:mime-type=image/png<br />*.tif        = svn:mime-type=image/tiff<br />*.tiff       = svn:mime-type=image/tiff<br /><br /># Data formats<br />*.pdf        = svn:mime-type=application/pdf<br />*.avi        = svn:mime-type=video/avi<br />*.doc        = svn:mime-type=application/msword<br />*.eps        = svn:mime-type=application/postscript<br />*.gz         = svn:mime-type=application/gzip<br />*.mov        = svn:mime-type=video/quicktime<br />*.mp3        = svn:mime-type=audio/mpeg<br />*.ppt        = svn:mime-type=application/vnd.ms-powerpoint<br />*.ps         = svn:mime-type=application/postscript<br />*.psd        = svn:mime-type=application/photoshop<br />*.rtf        = svn:mime-type=text/rtf<br />*.swf        = svn:mime-type=application/x-shockwave-flash<br />*.tgz        = svn:mime-type=application/gzip<br />*.wav        = svn:mime-type=audio/wav<br />*.xls        = svn:mime-type=application/vnd.ms-excel<br />*.zip        = svn:mime-type=application/zip<br /><br /># Text formats<br />.htaccess    = svn:mime-type=text/plain<br />*.css        = svn:mime-type=text/css<br />*.dtd        = svn:mime-type=text/xml<br />*.html       = svn:mime-type=text/html<br />*.ini        = svn:mime-type=text/plain<br />*.sql        = svn:mime-type=text/x-sql<br />*.txt        = svn:mime-type=text/plain<br />*.xhtml      = svn:mime-type=text/xhtml+xml<br />*.xml        = svn:mime-type=text/xml<br />*.xsd        = svn:mime-type=text/xml<br />*.xsl        = svn:mime-type=text/xml<br />*.xslt       = svn:mime-type=text/xml<br />*.xul        = svn:mime-type=text/xul<br />*.yml        = svn:mime-type=text/plain<br />CHANGES      = svn:mime-type=text/plain<br />COPYING      = svn:mime-type=text/plain<br />INSTALL      = svn:mime-type=text/plain<br />Makefile*    = svn:mime-type=text/plain<br />README       = svn:mime-type=text/plain<br />TODO         = svn:mime-type=text/plain<br /><br /># Code formats<br />*.c          = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain<br />*.cpp        = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain<br />*.h          = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain<br />*.java       = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain<br />*.as         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain<br />*.mxml       = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain<br /><br /># Webfonts<br />*.eot        = svn:mime-type=application/vnd.ms-fontobject<br />*.woff       = svn:mime-type=application/x-font-woff<br />*.ttf        = svn:mime-type=application/x-font-truetype<br />*.svg        = svn:mime-type=image/svg+xml<br /></code></pre><br /><br /><br />Simpan perubahan yang kamu lakukan. Biarkan sampai di sini dulu.<br /><br /><br /><br /><b>Pekerjaan II: Membuat Halaman Proyek Baru</b><br /><br /><br /><br />Jika belum punya akun Google, buat terlebih dahulu agar bisa mendapatkan akses ke Google Code. Kunjungi <a href="http://code.google.com/">http://code.google.com</a>, lalu klik <a href="https://code.google.com/hosting/createProject">Create A New Project</a>:<br /><br /><br /><br /><a href="http://2.bp.blogspot.com/-AEg1k24-H9w/URebrWqy1pI/AAAAAAAAG0A/RGRuNMBOQUw/s1600/google-code_create-a-new-project.png"><img src="http://2.bp.blogspot.com/-AEg1k24-H9w/URebrWqy1pI/AAAAAAAAG0A/RGRuNMBOQUw/s1600/google-code_create-a-new-project.png" /></a><br /><br /><br /><br />Buat proyek baru.<br /><br /><br /><br />Isi formulirnya, atur pilihan version control system ke Subversion, lalu pilih lisensi yang kamu kehendaki untuk <br /><br />file-file yang diunggah di situ:<br /><br /><br /><br /><a href="http://2.bp.blogspot.com/-_mGU-eXbHPU/URebsKNdoFI/AAAAAAAAG0I/M_C7jS_Q64A/s1600/google-code_filling-the-project-form.png"><img src="http://2.bp.blogspot.com/-_mGU-eXbHPU/URebsKNdoFI/AAAAAAAAG0I/M_C7jS_Q64A/s400/google-code_filling-the-project-form.png" /></a><br /><br /><br /><br />Mengisi formulir.<br /><br /><br /><br />Klik Create Project. Kamu akan dibawa menuju halaman <a href="https://code.google.com/p/reader-download/">dasbor</a> proyek barumu jika sudah berhasil. Klik tab Source lalu klik tautan <a href="https://code.google.com/hosting/settings">googlecode.com password</a> untuk membuat password. Ini digunakan untuk menghubungkan aplikasi dengan proyek Google kamu:<br /><br /><br /><br /><a href="http://2.bp.blogspot.com/-8Dn0pcw4Dow/URecykjWosI/AAAAAAAAG0Q/As5ilb9QIq4/s1600/google-code_generate-password.png"><img src="http://2.bp.blogspot.com/-8Dn0pcw4Dow/URecykjWosI/AAAAAAAAG0Q/As5ilb9QIq4/s1600/google-code_generate-password.png" /></a><br /><br /><br /><br />Mengenerasikan password Google Code.<br /><br /><br /><br />Catat password yang tampil:<br /><br /><br /><br /><a href="http://1.bp.blogspot.com/-77MbQQRzouY/UReczlEqX6I/AAAAAAAAG0Y/rN6x9TngUyg/s1600/google-code_generating-password.png"><img src="http://1.bp.blogspot.com/-77MbQQRzouY/UReczlEqX6I/AAAAAAAAG0Y/rN6x9TngUyg/s1600/google-code_generating-password.png" /></a><br /><br /><br /><br />Password —dan alamat email— sudah digenerasikan.<br /><br /><br /><br /><br /><br /><b>Mulai Mengunggah</b><br /><br /><br /><br />Buka aplikasi TortoiseSVN dengan cara mengeklik kanan pada desktop lalu pilih TortoiseSVN » Repo Browser:<br /><br /><br /><br /><a href="http://4.bp.blogspot.com/-0zk3CrqdmJk/URfGgXT-86I/AAAAAAAAG4o/tygfWFPiwL8/s1600/tortoise-svn_repo-browser.png"><img src="http://4.bp.blogspot.com/-0zk3CrqdmJk/URfGgXT-86I/AAAAAAAAG4o/tygfWFPiwL8/s1600/tortoise-svn_repo-browser.png" /></a><br /><br /><br /><br />Repo browser.<br /><br /><br /><br />Akan muncul kotak dialog untuk memasukkan URL proyek:<br /><br /><br /><br /><a href="http://1.bp.blogspot.com/-ZiP7S1JF4E8/URfGQeKV9KI/AAAAAAAAG4Y/Hb1eXkD3Wz4/s1600/tortoise-svn_input-project-url-with-https.png"><img src="http://1.bp.blogspot.com/-ZiP7S1JF4E8/URfGQeKV9KI/AAAAAAAAG4Y/Hb1eXkD3Wz4/s1600/tortoise-svn_input-project-url-with-https.png" /></a><br /><br /><br /><br />Memasukkan URL proyek.<br /><br /><br /><br />Pola URL selalu berbentuk seperti ini:https://nama_proyek.googlecode.com/svn/trunk/<br /><br /><br /><br /><br /><br /><br /><br />Yang harus diingat dan yang paling sering membuat gagal dalam pengunggahan file: Saat menuliskan URL proyek di aplikasi, gunakan <a href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=https&sa=Telusuri">https</a>, tapi saat ingin melihat hasilnya atau mengakses hasil kerjanya secara online, gunakan <a href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=http&sa=Telusuri">http</a><br /><br /><br /><br />Klik OK. Tunggu sampai proses memuat selesai.<br /><br /><br /><br />Buka folder dimana terdapat file yang ingin diunggah. Seret file yang diinginkan ke area daftar file unggahan:<br /><br /><br /><br /><a href="http://4.bp.blogspot.com/-npUQwlBB2Cc/URfGVAXKqCI/AAAAAAAAG4g/ib0WsaGNvf0/s1600/tortoise-svn_uploading.png"><img src="http://4.bp.blogspot.com/-npUQwlBB2Cc/URfGVAXKqCI/AAAAAAAAG4g/ib0WsaGNvf0/s400/tortoise-svn_uploading.png" /></a><br /><br /><br /><br />Mengunggah file.<br /><br /><br /><br />Tunggu beberapa saat, maka kamu akan diminta untuk mengautentikasikan akun Google Code kamu seperti<br /><br />ini:<br /><br /><br /><br /><a href="http://1.bp.blogspot.com/-yanKZVMiY1I/URe8TQGdZmI/AAAAAAAAG2Y/FEYK7FEH4sk/s1600/tortoise-svn_authentication.png"><img src="http://1.bp.blogspot.com/-yanKZVMiY1I/URe8TQGdZmI/AAAAAAAAG2Y/FEYK7FEH4sk/s1600/tortoise-svn_authentication.png" /></a><br /><br />Autentikasi akun Google Code.<br /><br /><br /><br />Isi alamat email dan password yang sebelumnya sudah kamu catat. Centang Save authentication agar kita tidak perlu berkali-kali login pada saat pengunggahan file di masa mendatang.<br /><br /><br /><br />Dengan menggunakan aplikasi subversi, selain bisa mengunggah berbagai file yang tidak biasa, kita juga bisa mengedit file yang sudah kita unggah. Sehingga kita tidak perlu menghapus file lama dan mengunggah file yang baru berulang kali seperti saat menggunakan akun Google Code pada umumnya.<br /><br /><br /><br />Untuk memeriksa hasil kerja satu per satu secara online, akses pola URL ini:<br /><br /><br /><br /><b>http://nama_proyek.googlecode.com/svn/trunk/</b><br /><br /><br /><br />Kita juga bisa mengedit (hanya mengedit) file melalui situs Google Code secara langsung (jika kita memberikan izin pada pengaturan pengeditan secara online). Kunjungi pola URL ini:<br /><br /><br /><br /><b>http://code.google.com/p/nama_proyek/source/browse/trunk/</b><br /><br /><br /><br />Thanks to Taufik Nurrohman for great Article : <a href="http://www.dte.web.id/2013/02/hosting-file-dengan-google-code-dan.html">Hosting File dengan Google Code dan TortoiseSVN</a><br /><br /><br /><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=1e59e869-d6dc-4918-9ea6-c0f9350940c2" style="border: none; float: right;" /></div><br /></div><br />

Hosting File dengan Google Code dan TortoiseSVN

Selama ini kita biasa menggunakan Google Code untuk menyimpan maksimal hanya tiga jenis berkas/file saja. Yaitu JavaScript, ZIP dan gambar....