If you are a web designer, you will agree that to keep the interst of the visitors, design of the website must be clear and intuitive. And, of course, the key to clear design is a clear navigation, so it’s important to make it both attractive and easy to use. Today we are presenting you some of the most hunky-dory jQuery-based navigation menus. If you come across more interesting stuff do share the links with us.

jQuery Navigation Menu Tutorials

Create a Slick Tabbed Content Area using CSS & jQuery — Demo | Details

Tabbed content is a great way to handle this issue and has been widely used on blogs recently. In this tutorial, author will show is how to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally achieving the same thing using the jQuery library.

How to Make a Smooth Animated Menu with jQuery — Demo | Details | Download
The author builds a menu and animates it with some smooth effects.

CSS Sprites2 – It’s JavaScript Time — Demo | Details
In this tutorial, author will show you how to create a navigation menu using jQuery to compete with flash based navigation.

jQuery Random Link Color Animations — Demo | Details
In this tutorial author will show how to create menu using random colors to add a bit more dynamism and flair as jQuery allows you to not only animate to a specified color, but also allows you to animate to a random color.

Animated Drop Down Menu with jQuery — Demo | Details | Download
In this tutorial, author will show you how to use jQuery for making Drop down menus are a really convient way to fit a large menu into a really small initial space.

Create an apple style menu and improve it via jQuery — Demo | Details | Download
In this tutorial, Author will show you how to create the Apple-flavored Leopard-text-indent style in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery — Demo | Details | Download
In this tutorial, author will show us what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. Author will also use jQuery to handle the effects and add the finishing touches for us.

How to Build a Lava-Lamp Style Navigation Menu — Demo | Details | Download
In this tutorial, author will tell us on how to build a lava-lamp style menu using a JavaScript library.

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery — Demo | Details | Download
In this tutorial, author will tell us how To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery.

Making Accordion Menu Using jQuery — Demo | Details | Download
In this tutorial, author will show us how to create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it.

jQuery idTabs — Demo | Details | Download
In this tutorials author will show you how to use idtabs. idTabs is simple and easy to use.

Create a multilevel Dropdown menu with CSS and improve it via jQuery — Demo | Details | Download
In this tutorial author will show you how to make a multilevel dropdown menu with a sleek touch

Using jQuery for Background Image Animations — Demo | Details
In this tutorial author will show you how to create background image imagination with the help of jQuery.

Superfish – “menu jQuery plugin”
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript)

Demo | Details | Download —

Drop down menu with jQuery — Demo | Details
Here’s a drop down animated menu example made with jQuery.

Creating a Floating HTML Menu Using jQuery and CSS — Demo | Details | Download
Author will show us how to make floating menus that move as you scroll a page. This is done using HTML, CSS and jQuery, and it’s fully W3C-compliant.

jQuery & CSS Example – Dropdown Menu — Demo | Details
Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit. This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.

Designing the Digg Header: How To & Download — Demo | Details | Download
In this tutorial, author will show you how to create a navigation menu just like the one used in Digg.

jQuery Tabbed Navigation — Demo | Details
In this tutorial, author will tell us how to create jQuery tabbed navigation.

Color Fading Menu with jQuery — Demo | Details | Download
In this tutorial, author will show you how to create a color fading efect with the help of jQuery.

  

By Paul Andrew

In the 15 years since the HTML table element was first incorporated into HTML 2.0, it has been on a constant roller coaster ride. Upon its introduction it was a revelation, it was a new way for web designers to present detailed data in structured tabular format, it made our life easier and we loved it. But as is the nature of web development, it was pushed further and further to do even more. Pretty soon the main use of tables was no longer tabular data, it was used as a handy and quick way to control the layout of a complicated web page. Yes, we loved it even more.

But that is were the love story ends and its bad rep begins.Using the table element for web layouts proved to be hard to modify, obtrusive and, more importantly, it caused major accessibility and usabilty problems. Thankfully, CSS came to the rescue, and HTML tables were duly dumped on the web design scrap heap. Tables were finally relegated to the position it was originally introduced for: Presenting tabular data.

Out of the box the tables are very, very bland, reasonably hard to style, its very difficult to display complex data effectively and you are limited to its basic functionality. This is were jQuery comes in, the every day web design super-hero.

In this article we present a collection of jQuery plugins and tutorials to help you get more out of your HTML tables. With the seemingly endless power of jQuery you can sort columns horizontally or vertically, have a fixed header, search the contents, paginate a large table, drag and drop multiple columns or even a plugin to make your table scrollable. You will find them all below accompanied by a quality selection of tutorials that will help you take things further.

It’s time to follow in love with HTML tables all over again!

jQuery Table Plugins

Flexigrid – Web 2.0 Javscript Grid for jQuery
Flexigrid is a lightweight but feature rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an XML based data source using Ajax to load the content.
Similar in concept with the Ext Grid but built using jQuery, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

Chromatable JQuery Plugin
Chromatable is plugin that allows a large and detailed HTML table to have a fixed header, meaning that when the user scrolls down, the header follows them and stays in a fixed position.

Ingrid, the jQuery Datagrid
Ingrid is an unobtrusive jQuery plugin that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your HTML tables.
Ingrid Demo.

JQTreeTable
With the JQTreeTable plugin you can easily set which column from a HTML table to take the treeview effect, as well as setting which parents are initially collapasabile.
You have a highlight option can be set so that the rows change colour on hover, there is also dynamic striping of the rows, and there is also a state variable, which sets whether to keep the collapsed or expanded state.

Scrollable HTML table
The Scrollable HTML table jQuery code can be used to convert ordinary HTML tables in into scrollable ones. No additional coding is necessary. All you need to do is put header rows (if you need them) in THEAD section, table body rows in TBODY section, footer rows (if you need them) in TFOOT section and give your table an ID field, then you include the webtoolkit.scrollabletable.js file and create ScrollableTable() object after each table. Nice and easy.
Scrollable HTML table Demo

KeyTable
KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table. It allows you to adopt Excel like cell navigation and it gives you features such as editing of a table without requiring a mouse.
You simply navigate to the cell you wish to edit and hit return.

graphTable
The graphTable plugin lets you take a simple HTML table and turn the data in it into a graph using flot.

graphTable Demo

DataTables
The DataTables plugin is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
Features include: Variable length pagination, on-the-fly filtering, ulti-column sorting with data type detection, smart handling of column widths, display data from almost any data source and much more.

jqGrid Plugin
jqGrid is an Ajax-enabled jQuery plugin that offers solutions for representing and manipulating tabular data. Since the grid is a client-side solution, loading data dynamically through Ajax callbacks can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.
jqGrid Demos

Visualize: Accessible Charts & Graphs from Table Elements
Visualize is a plugin that can scrape data from an HTML table and generate charts using the HTML 5 Canvas element. This plugin is particularly useful because the data for the visualization already exists in the page in a structured tabular format, making it accessible to people who browse the web with a screen reader or other assistive technology.

Grider
Grider is a plugin for jQuery that makes your life easier when you need to edit or create a table that handles a list of items. It helps you to do calculations in a very simple way, it supports the following features: It can make simple operations defined in the headers, add a row count to the table, summaries for average (avg), sum (sum), maximum (max) and minimum (min) and also works nicely with Ruby on rails nested forms.

Adding Functionality to Tables

Table Drag and Drop
This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.

Table Pagination
TablePagination is a plugin so that you can auto add a pagination element to the bottom of a HTML table with a variety of settings to customize the elements.

tableRowCheckboxToggle
tableRowCheckboxToggle generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or CSS classes in the script.

BS Table Crosshair Plugin
The BS Table Crosshair Plugin automatically highlights the cell that you hover over giving a 'crosshair' effect by simply assigning an ID to the table.

jqtable2csv
This small plugin provides conversion from a HTML table to a CSV string. There are two parameter only: callback and delimiter.
The delimiter parameter provides which column delimiter should be used in the csv string and the callback parameter(a callback function) contains one argument which is the csv string so you can do anything you want with the generated string.

Colorize
Colorize is a jQuery plugin that can add background color to alternate HTML table rows, highlight a row/column on mouse over, and colorize a row/column upon hover. You can colorize as many table rows or columns as you want. A repeat mouse click will revert the row/column to the original background color.

jExpand
jExpand is an ultra lightweight plugin that will make your tables expandable. Very useful for business apps, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

columnHover
columnHover is a plugin that highlights the entire column in a table while hovering over them and it even supports colspans and rowspans.

HeatColor
HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element. The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a "heat" color based on its derived value's position within the range.
You can bind a collection of elements such as table rows, divs or list members to Heatcolor and let it do the work.

Fixed Header Table
This is yet another jQuery plugin to provide fixed headers for tables. It differs from the othere in that it does not require any odd html table semantics. It just needs a TABLE tag with THEAD and TBODY to work its magic.

Table Search & Filtering Plugins

tableFilter
This is not the most powerful plugin you could find nor does it offer much configurability, what it does it give is an easy to install simple and basic table filtering feature.

uiTableFilter
uiTableFilter is a small plugin for filtering (hiding) table rows based on their text contents.

Tablesorter 2.0
tablesorter is a plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without having to refresh the page. It can successfully parse and sort many types of data including linked data in a cell and even has support for multi-column sorting.

PicNet Table Filter
This jQuery plugin adds real time Google-like column filtering capabilities to a regular HTML table.
Currently the picnet.table.filter.js only supports two kinds of filters. The first and default is 'text' which just produces a text box for context sensitive text matches. The second is 'ddl', this produces a drop down list that allows the selection of a single item within that list.

jQuery tinysort
TinySort will sort any nodetype by it’s text- or attribute value, or by that of one of it’s children.

LiveFilter 1.1
LiveFilter is a very lightweight plugin that will filter either an ordered or unordered list and display only the results that match the supplied string. It is well documented and designed in a way in which it is very easy to understand for designers to use and install.

jQtablesearch
jQtablesearch is a plugin for filtering large data sets with user input by searching through tables, lists, etc, very very quickly.

Quicksearch
This is a jQuery plugin that adds a simple search widget in a HTML table element.

jQuery Live Editing

TableEditor – Flexible in place editing of TableSorter
The TableEditor plugin provides flexible in place editing of HTML tables. User defined handler functions can easily be dropped in to, for example, update the data source via an AJAX request.

jGridEditor
This jQuery plugin allow you to add on-the-fly cell editing functionality in your HTML table.
You may configure it to perform AJAX queries and to return dynamic content or error messages.

jQuery Table Tutorials

jQuery Table Manipulation
This tutorial covers one of the most common tasks performed with tabular data and that is sorting. In a large table, being able to rearrange the information that you're looking for is invaluable. Unfortunately, this helpful operation is one of the trickiest to put into action, this tut will show you how.

Drag, drop and sort table rows with jQuery
This tutorial shows you how to add controls to a table that when clicked can move a table row (TR element), up and down within a table.

Displaying and sorting/paging tabular data using the JQuery tablesorter plugin, and query objects
One of the more repetitive tasks a server side developer encounters is displaying the results from a query. This is traditionally in the format of a table that displays the rows of data, along with any other functionality, such as paging controls and sortable headers. This detailed tutorial into using the excellent TableSorter Plugin.

Creating a table with dynamically highlighted columns like Crazy Egg's pricing table
On Crazy Egg's pricing table when you click on "Sign Up" for an option, that plan's column highlights, the other plans vanish, and a signup form takes their place – There is a number of impressive things happening within this small area. Using CSS, jQuery, and images in clever ways, this thorough tutorial will show you how to recreate these tabular effects.

Click Table Row to Trigger a Checkbox Click
This tutorial explains how to toggle a checkbox within a table row when the user clicks anywhere within the row.
This technique can be implemented with other elements as well, such as clicking on a containing element to trigger the click of an element inside it.

Table Striping Made Easy
The concept of this tutorial is to create stripes on a table and then have the background of each row change color when your cursor rolls over.

Using jQuery To Manipulate and Filter Data
When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. In this article, you will go over four techniques: hover effects, zebra rows, filtering, and sorting.

Resourceful Reading

• Web Usability – Accessible Data Tables
• Ultimate guide to table UI patterns
• Bring on the tables from 456 Berea Street
• Techniques for Accessible HTML Tables

  

It’s time for more JavaScript and jQuery goodies here on Noupe. Today we are featuring fresh JavaScript Development Frameworks, code optimization and minimization tools, reference tables, compatibility issues, common coding errors, image manipulation techniques and graph solutions. Please feel free to submit further resources in the comments to this post!

JavaScript Development Frameworks

php.js
php.js is an open source project that brings high-level PHP functions to low-level JavaScript platforms such as webbrowsers, AIR, V8 and rhino.

jai – javascript audio interface
J.A.I. or “Javascript Audio Interface” is the world’s first javascript interface for web <audio>. JAI uses no images for it’s player interface, all the graphics are rendered to a <canvas> element at run-time. The click-able play-list area is a list of links that are style using CSS. JAI is designed to provide juke-box functionality to <audio> enabled browsers that use the Ogg Vorbis audio codec. JAI is open-source. Feel free to download, modify and use the code in your own projects.

jQuery.sheet – Visual Interop Development
jQuery.sheet gives you all sorts of possibilities when it comes to giving your web application a spreadsheet style interface with MS Excel style calculations.

JavaScript Frameworks Playground: jsFiddle
jsFiddle is a shell editor that eases writing JavaScript code by creating a custom environment based on popular JS frameworks.

BaseJS: A Mobile (Safari) Javascript Framework
BaseJS is lightweight (less than 8KB when minified), fully-compatible with Mobile Safari, falls back on Sizzle selector library for iPhone 1.x (when query selector support is unavailable), is object-oriented and easy to extend.

SproutCore
JavaScript HTML 5 Application Framework. Create fast, native-style applications in any modern web browser without plugins.

CoffeeScript
CoffeeScript is a little language that compiles into JavaScript. Think of it as JavaScript’s less ostentatious kid brother — the same genes, roughly the same height, but a different sense of style. Apart from a handful of bonus goodies, statements in CoffeeScript correspond one-to-one with their equivalent in JavaScript, it’s just another way of saying it.

JavaScript Code Optimization and Minimization Tools

Writing Efficient JavaScript
The title speaks for itself: here is an interesting slideshow analyzing what makes JavaScript slow and offering solutions.

Closure Compiler
The Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

Online javascript beautifier
This little beautifier will reformat and reindent bookmarklets, ugly javascript, unpack scripts packed by the popular Dean Edward’s packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.

jQuery Code Does not have to be Ugly
Resolve problems with nesting curly braces and parenthesis.

CSS & Javascript Character Entity Calculator
Enter your HTML Entity Character number (such as ? or just 2335 – ?) to get the CSS and JS values for that entity.

Javascript, CSS, and (X)HTML entities in numeric order
Below are the entities listed in numeric order with definition and ISO numeric code. CSS ‘content’ does not accept named entities or regular numeric entities such as @, but does render ASCII text and unicode.

Common Errors To Know And Compability Issues

Top 10 Things that JavaScript Got Wrong
JavaScript, if only by default, is one of the most popular programming languages available. Over the years, it’s been labeled as a nightmare to work with, and, to some extent, this is true! However, more often than not, what people mean to say is that the DOM API is a nightmare. Nevertheless, there are a handful of flat-out errors in the language.

Javascript – Event compatibility tables
Quick overview of events browser compatibility, assuming that you know the three event registration models (traditional, W3C and Microsoft) as well as event bubbling and capturing. Most of the time is spent on the cross-browser events; the links in the first compatibility table lead to even more compatibility tables with detailed information about these events. Basic browser support for the Microsoft and W3C events is merely tested, without delving too deeply into the details.

How to Plan for the Absence of JavaScript
Though the methods used to gather website traffic statistics call into question the validity of the stats themselves, the fact is that some of your website’s visitors will have JavaScript disabled. You could divide your traffic sources into four broad categories: Search engines, mobile visitors, visitors using screen readers and visitors who have JavaScript turned off. When planning your information architecture and design, you must figure out how to deal with these special groups. Here is assembled a few recent real-world scenarios to find clarity on the issue.

Image Manipulation

Lazy Load Plugin for jQuery
Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) won’t be loaded before user scrolls to them. This is opposite of image preloading.

Spacegallery – jQuery plugin
Create Beautiful jQuery Gallery in a sec! Visually. No coding. Free

GalleryView: A jQuery Content Gallery Plugin
GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

Graphs

17 Javascript Animation Frameworks Worth Checking Out
Here are some examples of Javascript animation frameworks that are really worth checking out.

Chrome Experiments
These experiments were created by designers and programmers from around the world using the latest open standards, including HTML5, Canvas, SVG, and more. Their work is making the web faster, more fun, and more open – the same spirit in which we built Google Chrome.

boingPic – a javascript experiment
This is a simple experiment using javascript and jQuery which allows you to make an image of your choice all boingy!

Mind-blowing JavaScript Experiments
The following JavaScript experiments demonstrates the amazing capabilities of the modern browsers such as Chrome and Safari. In this post is showcased to you an array of experiments that will surely blows your mind off. Most of the following runs best in Chrome or Safari

Dygraphs: Create interactive graphs from open source Javascript library
Dygraphs is an open source JavaScript library that produces an interactive, zoom-able charts of the present time series. It is mainly designed to display the dense data sets and enable the users to explore and interpret them. It is a JavaScript Visualization Library.

Building an interactive map with jQuery instead of Flash
To make the map as engaging as possible, there needed to be smooth animations and crisp graphics. Traditionally such a project would require the use of Flash. We try to avoid Flash whenever possible, so we began to consider how the project could be accomplished in jQuery.

AnythingZoomer jQuery Plugin
You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there.

Scripts for Adobe Illustrator CS (JavaScript)
This archive includes many sample scripts (not well commented yet confused) tested with Adobe Illustrator CS3 13.0.3, Windows XP SP2 (Japanese version).

Google Chart Tools
The Google Chart Tools enable adding live charts to any web page.

  

By Angel Wardriver

jQuery can empower a developer with the tools required to create a rich user experience. The way in which we display images, text, charts and graphs can enhance functionality for the wide range of users. Let’s take a look at 35 powerful and effective jQuery plugins and techniques for slideshows, graphs and text effects.

Also consider our previous articles:

• 50 Useful JavaScript Tools which lists excellent tools to help you achieve various tasks involved in authoring JavaScript code.
• Data Visualization and Infographics Resources which lists more than 25 useful resources for infographics and data visualization.
• The Mystery Of CSS Sprites: Techniques, Tools And Tutorials which explains CSS sprites technique with jQuery.

jQuery Galleries and Slideshows

GalleryView jQuery Plugin
GalleryView jQuery Plugin is a content-gallery plugin capable of displaying any HTML content in an animated gallery view. It comes with lots of many options for customization. GalleryView does require the jQuery Timers plugin to facilitate timing of animation events.

Jquery Plugin MopSlider 2.4
MopSlider is the slider box can contain any item that is set height and width. From 2.2, MopSlider can be put 2 in the page. A CSS file isn’t necessary.

jQuery Image Scroller
Making use of jQuery’s excellent animation features, this image scroller will be completely autonomous and will begin scrolling once the page loads. The finished widget will be completely cross-browser compatible and perform as expected in the latest versions of all of the most common browsers. The tutorial helps build in some interaction by adding controls that allow the visitor to change the direction of the animation.

Sliding Boxes and Captions with jQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my CSS) that essentially acts as a window where two other items of your choosing “peek” through. From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.

Full Screen Image Gallery Using jQuery and Flickr
By using jQuery, this full screen image gallery automatically scales the image while using Flickr as the search engine. It comes with thumbnail preview, preloader, captions, and more. The results are extremely impressive.

jCarousel Lite
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

Galleriffic | A jQuery plugin for rendering fast-performing photo galleries
Galleriffic offers fantastic performance in delivering a high volume of photos. This is a useful jQuery plugin that will render fast photo galleries, while both impressing and improving your user’s experience.

jQuery plugin: Wilq32.RotateImage
This is the final product of a Wilq32.PhotoEffect Snippet. You can use this simple and tiny script to get an effect of rotated images directly from client side, such as user generated content, and then animate them using functions.

jQZoom Evolution
JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

Resizable Image Grid with jQuery
Image grids that smoothly scale at the simple drag of a slider are no longer confined to desktop apps like iPhoto or Picasa. Thanks to some clever CSS and the jQuery UI, fluid image grids are now surprisingly simple to implement on the web.

jQuery plugin: Tooltip
This jQuery plugin tooltip can help you use bodyHandler to display footnotes, an image with a tooltip, or block tooltip. Also is helps links to have no delay with tracking and fading, or with extra content with extra classes. It’s useful for different tooltip styles on a single page like an image map with tooltips and testing repositioning at viewport borders.

Charts and Graphs with jQuery

jqPlot Charts and Graphs for jQuery
jqPlot is a plotting and charting plugin for the jQuery Javascript framework. It’s strongest feature is its pluggability. Computation and drawing of lines, axes, shadows even the grid itself is handled by pluggable “renderers”. The plot elements are customizable. The core jqPlot code allows custom event handlers, new plot types, and more.

JS Charts – Free JavaScript charts
JS Charts is a JavaScript chart generator that requires little or no coding. JS Charts allows you to easily create charts in different templates like bar charts, pie charts, or simple line graphs.

moBlur.org – Google Charts GUI with jQuery
This jQuery is a basic frontend GUI to be used with Google’s charts API.

jQuery Text Effect Plugins

Airport – Information board text effect jQuery plugin
Airport is a rather simple text effect plugin for jQuery. It emulates the style of those flickering information boards you sometime find on airports and train stations.

Editable (jQuery Editable Plugin)
This is a real customizable jQuery editable plugin. Currently it can convert any tag (span, div, p and …) to text input, password, textarea, or drop-down list. You can easily extend it by adding your own input type using its editableFactory object.

jQuery Plugins
Some of these plugins have been merged into jQuery core in one form or another. These include the ability to batch results into an array, a resolution for IE z-index issues, auto-expand text areas, dynamically create configurable gradient to the background without using images, implement the over label technique, live query and many more helpful plugins.

Jquery Elastic 1.2 Demo
This page contains a couple of demos of the Jquery plugin Elastic. Elastic makes your textarea change its height dynamically.

Stephane Caron – No Margin For Errors ¬ Pretty comments
Here’s a small jQuery plugin that allow textareas to stretch as content is put in. If the content goes over the defined height of the textarea, the textarea will grow as needed.

ToggleVal
ToggleVal gives you the option to populate the default text of form fields in a few different ways. It will then toggle the default value when the field receives and loses keyboard focus.

jQuery sIFR Plugin
The jQuery sIFR plugin is an addon for jQuery that makes it easy to replace text in a web page with flash text (sIFR) using the internal jQuery API.

jQuery Spoilers Plugin
Spoilers is a jQuery plugin which implements a feature first seen on the imdb.com web site. The pages using this plugin to show “Spoilers!” text, but when you mouse over that text, "Spoilers” disappear and the underlying text is revealed. The intention is to keep the casual reader from inadvertently reading details which he might not want to know. By mousing over them, he can reveal the details.

jTruncate – Text Truncation for jQuery
jTruncate allows you to customize nearly every aspect of the truncation operation. It provides simple yet customizable truncation for text entities in your web page.

Further jQuery Resources

List of Useful jQuery Plugins: jQuery, JavaScript
This is a huge masterlist from the jQuery plugins in the jQuery plugins repository. These are some of the best and most practical. The truly exceptional plugins are marked with “EXCELLENT.”

Lazy – The on-demand jQuery plugin loader
This jQuery plugin is an on-demand plugin loader, also known as a lazy loader. Instead of downloading all jQuery-plugins, that you might or might not need, Lazy downloads the plugins when you actually use them. The major difference between Lazy and it’s competitors is it’s size.

jQuery Callout Plugin
This jQuery Callout Plugin is based entirely on CSS, so no images are required like in the static text below. The rounded corners come courtesy of the excellent jQuery Rounded Corners plugin.

Guapo – jQuery copy plugin
We all know that in IE we can easily copy text to clipboard. It is, however, not such an easy in FX. This plugin uses a SWF file to achieve this; the SWF file’s default location is the same to the plugin. If you move it to another location, it changes in the plugin source code.

Moousture
Moosture is a mouse gesture library written solely in javascript with power and flexibility. Implemented on Mootools following the Object Oriented standards, the library is aimed to set out a future framework for mouse guesters for any browser including modern mobile devices.

Gritter for jQuery (Growl) (Demo)
A jQuery Growl look-a-like plugin, a notification bubble/popup that appears in the top right of your layout. Think of it as calling the alert() function in JavaScript, only it’s subtle and looks nice.

jGrowl – Unobtrusive Notification System for jQuery
jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works. It has the ability to create multiple container instances, allowing a developer to raise and create various notifications in various location on the user’s screen.

Add a favicon near external links with jQuery
External links should always be marked distinctly in order to see them easily. An even better idea is using the favicon.ico of the external site, if it is available of course.

Oursignal.com used jQuery plugins
OurSignal is a awesome visualization that displays the popular stories from Digg, Delicious, Reddit, Yahoo! Buzz and Hacker News in single page. Developed by Stateless Systems, it is nicely implemented with jQuery Plugins.

UI.Layout Plug-in
This plug-in was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.

  

By Paul Andrew

As many of us know, the initial 15-20 seconds of a new user’s visit to a web site will have a large impact on whether on not they are going to like or dislike the site, prompting them to decide whether they will stay or go. This means it’s vital that you follow usability rules with common design practices and layout your site, especially the navigation, in a style that the user can either learn easily or already understands. The biggest part of this process is developing a menu that is both easy to use and intuitive, as well as styling it to fit into your site’s design. Having said all that, an easy-to-use menu should not put the shackles on creativity.

In this article we’ve listed 45 jQuery plugins and tutorials that demonstrate not only how powerful jQuery is, but also how your website’s navigation can be both creative and usable. For most of these items, we’ve listed a “demo” link, except when the demo is on the same page as the tutorial or article itself.

Horizontal Menu Navigation Plugins and Tutorials

Mega Drop Down Menu w/ CSS & jQuery | Demo
According to usability expert Jakob Nielsen, mega drop down menus tested to be more efficient for large-scale websites. In this tutorial, the author demonstrates his technique for creating a menu system that would be ideal for large or e-commerce web sites.

A Perfect Multi-Level Navigation Bar | Demo
In this tutorial, the author illustrates his method for implementing a perfect multi-level navigation bar using HTML, CSS and some lines of unobtrusive JavaScript code with jQuery to show and hide sub-sections.

Use Sprites to Create a Navigation Menu | Demo
CSS sprites can dramatically increase a website’s performance, and with jQuery, we can easily implement awesome transition effects.

Tab Navigation with Smooth Horizontal Sliding
In this tutorial you will create a navigation menu that slides horizontally. It begins with a set of “tabs” on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back.

droppy – Nested drop down menus
This is not the most flexible of plugins, but if you’re looking for a basic menu, it’s perfect.

jQuery Listmenu | Demo
This jQuery plugin allows you to easily convert a long, hard-to-navigate list into a compact, easy-to-skim first-letter-based menu system, allowing quick and out-of the-way access to hundreds of items.

Kwicks for jQuery | Demo
Kwicks for jQuery started off as a port of the insatiably attractive Mootools effect (of the same name), but has evolved into a highly customizable and versatile widget.

Creating a Navigation Menu with CSS & jQuery
In this tutorial you’ll learn how to build a CSS navigation menu with a smooth scroll effect using jQuery and the scrollTo plugin.

Apple Style Menu | Demo
In this in-depth tutorial you’ll create an Apple-flavored Leopard-text-indented menu from scratch. First you’ll build the menu in Photoshop, then you’ll create the needed HTML and CSS, and finally improve it with jQuery.

Sexy Drop Down Menu w/ jQuery & CSS | Demo
Most drop-down menus may look aesthetically pleasing, but developing them to degrade gracefully is also essential. In this tutorial, the author shows you how to create a sexy drop-down menu that degrades gracefully.

Mega Drop-Down Menu with jQuery | Demo
The recommended hover time for a mega drop-down menu is 0.5 seconds, with a further 0.5 seconds delay when the user moves the mouse away. With these guidelines, the author demonstrates how to build a mega drop-down menu with usable time delays.

JQuery Pager | Demo
jQuery Pager is a simple JQuery plugin to provide paging functionality for data-driven web applications.

Simple jQuery Dropdowns | Demo
jQuery menus don’t have to be complicated; sometimes you may want to try something slightly different by making them as simple as possible. This menu plugin has stripped down code with minimal styling, yet still has all the functionality typically needed.

Smooth Animated Menu with jQuery | Demo
In this tutorial you’ll learn how to build a jQuery menu and animate it with some lovely and smooth effects, using the jQuery Easing plugin.

Stylish Navigation Menu With jQuery | Demo
In this menu tutorial there are three main classes that define the looks: normalMenu – for the normal state of the navigation links, hoverMenu – lighter link that slides down on hover, selectedMenu – the active (selected) state.

Easy to Style jQuery Drop Down Menu | Demo
This tutorial will show you how to create a simple and easily-styled menu with hover mouse event and the most basic jQuery animation using slideUp and slideDown.

A Different Top Navigation | Demo
If you’re trying to make your website stand out, you might consider thinking outside the “norm” when it comes to navigation. In this tutorial, you’ll be doing precisely that, by creating a different multi-layered horizontal navigation system that’s still intuitive enough for anyone to use for the first time.

Vimeo-Like Top Navigation | Demo
If you’ve ever visited the Vimeo home page you may have noticed the menu that drops down when you hover over the search box, offering you different search options to narrow your search. You’ll learn how to recreate this effect in this tutorial.

jQuery'd Bread Crumb – jBreadCrumb
This collapsible breadcrumb jQuery plugin has been developed to deal with deeply-nested, verbosely-named pages. Rather than limit the amount of elements shown on the sever side, the developers opted to go with a client side solution for usability and SEO. It also turned out to be nice to look at and fun to play with.

idTabs
The marvelously-versatile idTabs plugin makes adding tabs to a website very simple and opens the door to endless navigation possibilities. The homepage of this plugin shows you not only how easy idTabs is to use and style, but also demonstrates many of the navigation options you’ll have at your disposal.

Keypress Navigation | Demo
With jQuery, your website’s navigation doesn’t have to be limited to mouse-based activation. In this highly-original experimental tutorial you’re shown how to let the user navigate your site using their keyboard.

Sliding jQuery Menu | Demo
In this tutorial you’ll learn how to create a sliding menu button, similar to the effect you can see in action over on the PSDtuts+ homepage. When the button is clicked it rolls out a box full of links, when the button is clicked again the box rolls back in.

Dropdown, iPod Drilldown, and Flyout Styles
This iPod-style menu plugin provides easy navigation of complex nested structures with any number of levels. The entire menu sits within a fixed-size area, and when a node is selected, by default a “Back” link appears below the menu to allow navigation to previous (parent) menus.

Flickr Menu Design | Demo
This is a simple step-by-step tutorial that shows you how to implement a Flickr-style menu with cool sliding effects using jQuery and CSS.

Fixed Fade Out Menu | Demo
The aim of this tutorial is to build a fixed navigation that follows the user when they scroll up or down, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again. The navigation includes some links, a search box, and top and bottom buttons that let the user navigate to the top or bottom of the page.

mb.menu | Demo
mb.menu is a powerful jQuery component that helps you build an intuitive multi-level tree menu or contextual (right click) menu. You can add as many submenus as you want; if your sub-menu or menu is not declared in the page, the component will get it via Ajax, calling the template page with the id of the menu you need (the value of the “menu” attribute).

mcDropdown
The mcDropdown plugin is a UI control that lets users select from a complex hierarchical tree of options that allows for both mouse and keyboard entry. The overall effect of this plugin is somewhat similar to the Microsoft Windows “Start > All Programs” menu.

Vertical or Sidebar Plugins and Tutorials

Simple JQuery Accordion Menu | Demo
This is a very simple accordion menu plugin built with jQuery. The links with sub-items under them will expand the sub-menu when clicked and items that don’t have sub-items are normal links. The menu will initialize with the first expanded sub-menu.

Tabbed Structure Menu | Demo
This tutorial will show you how to build your own space-saving, tabbed interface using jQuery with slideDown/slideUp effect.

Fresh Content Accordion | Demo
In this tutorial you’ll earn how to build a simple, yet eye-catching accordion with the help of CSS, jQuery and the easing plugin for fancy effect.

Horizontal Scroll Menu | Demo
This tutorial teaches you how to create a horizontal scrolling menu that scrolls automatically according to your mouse axis-Y movement and uses the jQuery.color plugin to animate the background-color changes.

Create a Slick Tabbed Content Area using CSS & jQuery | Demo
In this tut you’ll learn how to build a simple little tabbed information box in HTML, then make it function using pure JavaScript, and finally you’ll learn a way to achieve the same effect using jQuery.

Slide Out and Drawer Effect | Demo
The Apple web site is a great demonstration of this effect in action where the mouse settles on the title of the ‘section’ and the associated links are exposed. What makes this effect particularly cool is that the drawers maintain a fixed height and slide between a restricted area.

“Outside the Box” Navigation with jQuery | Demo
This tutorial offers three different ‘out-of-the-box’ OS X dock-style navigation options. There are the, as expected, horizontal and vertical examples, and finally the very cool OS X stack and drop stack.

Sproing! – Thumbnail Menu | Demo
Sproing! is a plugin that creates an elastic effect for your navigation that magnifies the menu items when they are hovered over.

Cool Animated Navigation | Demo
In this tutorial you’ll learn how to build a really cool animated navigation menu with background position animation using just CSS and jQuery.

jQuery File Tree | Demo
jQuery File Tree is a configurable, Ajax file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a developer, you can easily make your own connector to work with your language of choice.

Creating a Floating HTML Menu Using jQuery and CSS | Demo
For all of us who deal with long web pages and need to scroll to the top for the menu, this tutorial offers a nice alternative: floating menus that move as you scroll a page. This is built using HTML, CSS and jQuery, and it’s W3C-compliant.

BDC DrillDown Menu, an iPod-style menu | Demo
A drill-down menu takes up constant space like an accordion menu but offers the deep hierarchy of a fly-out menu at the same time. Because of this, it not only features a small footprint but is also easier to navigate than a fly-out menu, where more mouse movement and accuracy are required.

jQuery Context Menu Plugin | Demo
The goal of this plugin was to streamline the way actions bind to menu items and to use 100% CSS for styling. Keyboard shortcuts have been added for navigation once the menu is opened, and there are five methods that will allow you to control and clean-up your context menu on the fly.

A ‘Mootools Homepage’ Inspired Navigation | Demo
This tutorial takes you through the process of developing the menu that had previously been used on the homepage of MooTools, but with jQuery.

jQuery UI Selectmenu
The jQuery UI Selectmenu plugin has been designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind and allows all native mouse and keyboard controls.

Beautiful Slide Out Navigation | Demo
In this tutorial you are shown how to create an amazing slide-out menu or navigation. The navigation will be almost hidden — the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare you some space on your website.

Optional Horizontal or Vertical Navigation

Smooth Navigational Menu
This menu’s contents can either be reached from either direct markup on the page, or an external file and fetched via Ajax. And thanks to jQuery, a configurable, sleek “slide plus fade in” transition is applied during the unveiling of the sub menus. The menu supports both the horizontal and vertical (sidebar) orientation.

Superfish – Suckerfish on 'roids | Demo
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following enhancements: Timed delay on mouseout, animation of sub-menu reveal, keyboard accessibility, drop shadows for capable browsers and much, much more.

(ll)