40 Exceptional jQuery Interface Techniques and Tutorials

Modal Windows

****************************************************************

Sample Zooming TEchniques:

http://css-tricks.com/anythingzoomer-jquery-plugin/

http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/

http://www.queness.com/post/590/jquery-thumbnail-with-zooming-image-and-fading-caption-tutorial

http://css-tricks.com/anythingzoomer-jquery-plugin/

****************************************************************

1. How to create a stunning and smooth popup using jQuery

In this jQuery tutorial, you’ll discover a technique for creating a slick modal window that appears when the user clicks on the triggering element (in this case, form submit input, but you can easily modify it into other HTML elements like <a>). The tutorial will also show you how you can deal with keypress events so that you can incorporate keyboard shortcuts into your interface.
Live Demo

2. Simple jQuery Modal Window Tutorial

This modal window tutorial uses a rel attribute to indicate whether a link opens a modal window using inline content. You’ll witness a few popular jQuery methods in action like the .click() and .css() methods.
Live Demo

3. Building modal panels with jQuery

This jQuery tutorial discusses a method for creating a modal window that builds in graceful degradation in its design for users who don’t have JavaScript turned on.
Live Demo

Tool Tips

4. Build a Better Tooltip with jQuery Awesomeness

This tutorial will show you a method for replacing the built-in browser tooltips that appear on elements such as images and links with title attributes.
Live Demo

5. Smart Tooltips with jQuery

This tooltip technique will check whether a link has a title attribute or not, and if it doesn’t, it skips it title.
Live Demo

6. Coda Popup Bubbles

This excellent jQuery tutorial shows you how to create slick popup bubbles that appear when hovering over the target object.
Live Demo

Module Tabs

7. Create a Slide Tabbed Box using jQuery

This simple tutorial will show you how to create a set a module tab interface that slides content left and right as you click on the tabs.
Live Demo

8. Create a Tabbed Interface Using jQuery

This very detailed step-by-step tutorial will show you how to create a tabbed interface using jQuery.
Live Demo

9. jQuery Tabbed Interface

This excellent tutorial is yet another variation to the popular tabbed interface.
Live Demo

10. jQuery Tabs

This tutorial is in screencast format and is aimed at beginners and designers.
Live Demo

Showcasing Images

11. Create Sliding Image Caption with jQuery

This image gallery tutorial shows you an interesting interaction technique for having captions that slide up to reveal more information about a particular image when the user hovers over it.
Live Demo

12. Image Cross Fade Transition

This tutorial will show you how to fade another image in, superimposing onto the current image when the user hovers it. It can be a great way to display more information about a particular image.
Live Demo

13. A Basic Image Gallery – The jQuery Way

Create a basic image gallery by leveraging the strengths of jQuery in traversing the DOM and in DOM manipulation.
Live Demo

14. Image Reveal using jQuery

This quick and easy tutorial shows you the concept of hiding and showing elements by watching out for window events (in this instance – mouse hovers).
Live Demo

15. Inline Image Enlargement with jQuery

This jQuery tutorial shows you a slick and animated method for enlarging thumbnail-sized photos when the user hovers on them.
Live Demo

16. Slider Gallery

In this jQuery tutorial, you’ll learn how to create a sliding gallery that leans on jQuery UI to make dealing with theming the web component a breeze.
Live Demo

17. Simple jQuery Image Slide Show with Semi-Transparent Caption

In this tutorial, you’ll learn about the concept of tweaking opacity of elements, as well as using the setInterval function to delay the firing off of another function.
Live Demo

18. BBC Radio 1 Zoom Tabs

This screencast tutorial shows you how to zoom in and out of an image and reveal a module tab interface when the user hovers of it. The tutorial was inspired the BBC Radio 1 site which shows a similar effect.
Live Demo

19. Photo Slider Tutorial

This tutorial shows you how easy it is to implement the Photo Slider JS library to create a stunning but user-friendly sliding photo gallery.
Live Demo

Interacting with Content / Displaying Content

20. Creating a "Filterable" Portfolio with jQuery

In this jQuery tutorial, you’ll discover a method for creating a gallery of images that can be filtered by categories.
Live Demo

21. How to Build a Super Duper News Scroller

This screencast-format tutorial will show you how you can create a news scroller to display dynamic news feed connected to an RSS feed. This tutorial also uses PHP and SimplePie to interface with RSS feeds.

22. Text Resizing With jQuery

Resizing text on a web page is often a valuable site feature to help adjust the text within the web page instead of using the browsers’ features. This tutorial goes over a method for being able to resize text with jQuery that will work regardless of what font size units you use (i.e. px, em, %).
Live Demo

23. jQuery Sequential List

This tutorial leverages DOM manipulation to create a jQuery script that will replace your unordered (<ul>) and ordered (<ol>) lists into something fancier. The script you’ll learn to write in this tutorial gracefully degrades in the JavaScript off scenario.
Live Demo

24. Animate your message boxes with jQuery

You’ll read about a technique on how to animate message boxes using jQuery, in this excellent tutorial.
Live Demo

25. Create an Amazon Books Widget with jQuery and XML

You’ll learn how to leverage jQuery and the Amazon API to display products inside a content area that’s horizontally-scrollable in this highly-involved step-by-step tutorial.
Live Demo

26. Building a jQuery-Powered Tag-Cloud

Tag clouds are effective in display the most popular categories or keywords on your site. By using jQuery and following along this excellent tutorial, you can create a remarkable tag cloud widget on your site.

27. Simple jQuery Spy Effect

In this tutorial, you’ll discover an innovative technique for mimicking Digg’s now defunct Digg Spy application (here is Digg Spy’s predecessor).
Live Demo

28. Coda Slider Effect

Learn to create the Coda sliding content area using jQuery in this step-by-step screencast.
Live Demo

Web Forms

29. Improving Search Boxes with jQuery

Create search boxes that are highlighted when the user focuses on them by following along this excellent jQuery tutorial.
Live Demo

30. Build An Incredible Login Form With jQuery

If you’re interested in creating better-looking and more interactive signup forms that drop down from its location when a user clicks on it, this excellent jQuery tutorial will show you how.
Live Demo

Navigation Menus

31. Horizontal Scrolling Menu with CSS and jQuery

This jQuery tutorial will show you a technique for creating an impressive scrollable menu that moves based on the user’s mouse movements.
Live Demo

32. Fading Menu – Replacing Content

Create an animated fading navigation menu by following along Chris Coyier’s excellent tutorial.
Live Demo

33. Using jQuery for Background Image Animations

Johnathan Snook shows us how easy it is to create a slick, animated navigation menu by transitioning background-image position.
Live Demo

34. Animated Menus Using jQuery

Learn how to create this impressive jQuery-based navigation menu that has an interesting animation effect.
Live Demo

35. Create an apple style menu and improve it via jQuery

This interesting tutorial shows you how to create an Apple-inspired navigation menu that, when hovered over, expands the navigation item.
Live Demo

36. multilevel Dropdown menu with CSS and jQuery

This tutorial shows you how you can leverage some powerful jQuery methods such as .find() and .css() to create an animated, multilevel dropdown navigation menu.
Live Demo

37. jQuery & CSS Example – Dropdown Menu

In this jQuery tutorial, you’ll find a quick and easy method for creating a dropdown menu. (Live demo on the tutorial page)

38. Creating a Floating HTML Menu Using jQuery and CSS

This jQuery-based navigation menu tutorial will show you how to create a menu that follows you up and down the page as you scroll.
Live Demo

39. Navigation List menu + jQuery Animate Effect Tutorial

You’ll learn about a technique on how to animate a navigation list menu in this wonderful jQuery tutorial.

40. Horizontal Slide Nav Using jQuery & CSS

Learn to create a spectacular sliding navigation whose animation is triggered when the user hovers over a navigation item.
Live Demo

LightBox effects

While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives.

• colorbox
• jQueryUI Dialog
• fancybox
• DOM window
• shadowbox.js
• http://jquery.com/demo/thickbox/

How to Load External HTML page into a DIV?

Here is the simplified Code to Load external External page into a Selected DIV!! Here what we loading HTML page basis on tht Page name.

<html>
    <head>
        <title>AJAX with jQuery Example</title>
         <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
        <style type="text/css">
        #wrapper {
            width: 240px;
            height: 80px;
            margin: auto;
            padding: 10px;
            margin-top: 10px;
            border: 0px solid black;
            text-align: center;
        }
        #quote{ border:2px solid #ccc;}
        </style>
    </head>
    <body>
        <div id="wrapper">
        <script type="text/javascript">
        $(document).ready(function(){
//here we Defaulty loding Index.html page into a DIV called "quote"
                $("#quote").load("index.html");       
            $(".anil").mouseover(function(event){

// here we loading page on basis of .html extension. So we need to specify html page to the link.(ex: to load home.html we specifying  id="home"

                $("#quote").load(event.target.id+'.html')
            });
        });
        </script>
<a href="javascript:" class="anil" id="home">anil</a>
<a href="javascript:" class="anil" id="aboutus">Nail</a>

        <div id="quote"><!--Content will Load here--></div>
        </div>
    </body>
</html>

useful Navigations

1. CSS-Based Navigation Menus

Loodo
A colorful menu that adds to the feel of the website.

Acko.net
Steven Wittens takes a look at the navigation menu from a quite unusual perspective.

Web Design Ledger
Web Design Ledger has an excellent menu; its large size is convenient but doesn’t intrude on the content.

UX Booth
UX Booth uses a a stylish text box under the navigation as a sort of subtext for each menu item.

Nopokographics
Vertical navigation menus are used very rarely, for the simple reason: they are harder to use. However, some designers risk unusual approaches. Nopoko Graphics uses an arrow and a hover-effect for its vertical navigation menu.

Icon Designer
This website uses a large image-based menu on the home page. The user’s attention is drawn directly to this large menu, making it convenient for users.

Cosmicsoda
This large and colorful menu is very noticeable and uses a slight hover effect to further define the menu items.

Designsensory
An intuitive drop-down navigation that uses 2 colors effectively to communicate the active navigation item and the passive ones.

Smallstone
Smallstone, a U.S. record label, presents its navigation menu in the form of a the so-called Space Echo Roland SE-201.

TNVacation
It’s pretty hard to find a nice-looking drop-down menu. This one is a beautiful exception.

Clearleft
Clearleft uses a couple of paper pieces for its navigation.

45royale
A simple, clean and beautiful navigation with a nice hover effect.

Design Intellection
An excellent example of block navigation that shows how effectively “speaking” hover effects can be used with a clean and simple navigation menu.

Ronnypries.de
A navigation menu doesn’t have to look like a traditional navigation menu. Ronny Pries uses a floor plan to lead site visitors through the pages of the site.

Jiri Tvrdek
Jiri Tvrdek presents the navigation options of his site as leaves on a tree. Creative, unusual and memorable.

Water’s Edge Media
Patricia Abbott uses clothespins for the navigation options.

Matt Dempsey
Matt Dempsey highlights his navigation options with a brush stroke.

Cognigen
The current navigation option is pressed — clear and intuitive.

District Solutions
Vertical tabs are used very rarely. But they can look good!

Jayme Blackmon
Jayme Blackmon seems to like setting “done”-marks…

Jeff Sarmiento
Why not try a sloping navigation options once in a while?

Studioracket
A really unusual navigation menu that uses some kind of a mindmap to illustrate the navigation. And, apart from that, the navigation menu is hand-drawn!

Cultured Code
A subtle yet distinct menu that is out of the way of content. Excellent colors and a nice hover effect also add to the menu.

Nando Designer
This Portuguese designers uses handwriting and a piece of paper for its main navigation.

Bonfiremedia
Sometimes typography is just enough…

Artgeex
Vivid typography in use.

Gloobs
Some designers integrate a stamp in the contact navigation option.

South Creative
This website uses large navigation buttons and has a good hover effect.

Mac RabbitOne more example of a large and clean menu. This one uses icons to aid the reader in recognizing each item’s function.

RapidWeaver
This menu has a clean and smooth layout, and it has a great sub-menu that uses transparency to separate it from the main menu.

DFW UPA
Icons reinforce the menu items on this website and add emphasis to each option.

Revolution Driving Tuition
This website has a great grunge style, and the menu fits right into the layout.

Duarte Pires
This menu is located close to the content, where it is easy to use. It uses large icons, which adds a visual element to the navigation. Also, the menu on other pages uses the same icons in a vertical layout, bringing consistency to the website. The icons may not fit perfectly, but it’s a nice idea.

Valetin Agachi
This navigation has a rather unique style that emphasizes selected items. Also, the menu layout stays consistent throughout the whole website.

Tutorial9
Tutorial9 recently got a nice redesign, which came with a very usable and well-organized menu.

2. CSS Menus With JavaScript

Agami Creative
Designers sometimes use tooltips for their navigation. However, tooltips and aqua are quite an unusual combination.

Whitehouse.gov
A perfect example of how one should organize huge amounts of content into clear and easily distinguishable sections. Also, excellent design of the drop-down menu.

AppStorm
AppStorm is a new website by Envato. A jQuery effect is used to create an excellent and very usable drop-down menu.

Eric Johansson
Eric Johansson, a designer from Sweden, uses tall vertical blocks and images for his navigation.

Coda
This conveniently located menu has a beautiful hover effect. The sub-menus are consistent and include every item.

Dragon Interactive
Dragon Interactive has a colorful jQuery-based menu with a great effect.

Bern
I am a big fan of this navigation layout. I like how the menu fits in with the grunge theme. It also uses another jQuery drop-down effect.

Abduzeedo
For its recent redesign, Abduzeedo introduced a jQuery slider into the navigation.

3. Flash-Based Menus

Iipvapi
Colorful sloping Flash-based navgation from an Indian Web design agency.

Not Forgotten: The Movie
Most entertainment websites use Flash and unusual navigation menus to capture users’ attention. On this one, an instant classic, navigation items are put on cards.

Nick Tones
Nick Tones, with a dynamic, colorful and yet still somehow usable navigation menu.

woonky.ideas
This Argentinian design agency puts CDs and books on a table, each representing a navigation option, of course. When hovered over with a mouse, each object reveals what can be found inside.

Gotmilk
The designers of this Flash-based site came up with something truly original. The navigation menu is put on a ribbon; each navigation item has a nice and simple hover-effect: when an icon is hovered, it is replaced with the site area the icon stands for. Usually tooltips are used for this puprose, here designers use a different approach. Outstanding!

Spectra Visual Newsreader
A beautiful and very colorful Flash menu that is a good example of excellent usability.

NickAD
This unique website is all about easy-to-use navigation.

Sensi Soft
This amazing portfolio has very well-thought out and convenient navigation.

4. Highly Usable Navigation

tap tap tap
This website has a beautiful layout and a menu with great effects.

Apple
Apple has one of the more exceptional websites, particularly because of the navigation layout. The Mac menu is quite amazing. With images, it couldn’t be easier to find items and move through the menu.

Alex Buga
Visitors here use a large and well-laid out slider to move through news items.

CREASENSO
The content on the home page of this portfolio website has an extremely simple yet usable organization.

polargold
This visually stunning Flash-based portfolio uses an accordion-like layout for the content, so there is no loading of new pages. The large type stresses the importance of menu items.

Colourpixel
Colourpixel has a very interesting layout for its portfolio. It combines all of its sections onto a single page, and allows each item to be hidden or revealed, as demanded by the user.

DVEIN
Yet another excellent Flash-based portfolio. This website organizes all gallery items onto an interesting revolving list.

Alexandru Cohaniuc
This portfolio is rather well known for its beautiful layout. An accordion effect allows users to navigate through projects and portfolio items.

Porsche Canada
Porsche Canada’s website has very user-friendly navigation, with many sub-items for each menu item. The convenience and usability of this menu is great.

Jeremy Levine Design
This architecture portfolio has a unique layout that allows users to easily browse the website. The line of menu items has many effects and transitions that make it very convenient.

firstborn
Firstborn, a well-known design studio, uses scrollable, horizontal navigation for its portfolio. The navigation items can also be displayed in other modes, such as thumbnails, making it even better.

Benjamin David
This portfolio has a vertical slider that automatically moves through menu items. Many large items are placed together in a single glowing menu.

Thibaud’s Portfolio
Another stunning portfolio with creative navigation, this one with Flash-based “color samples” to choose from. Like items are grouped together.

Jason Reed Web Design
Accordions are useful when trying to squeeze many items into a small space. Jason Reed used a stylish accordion in his portfolio to allow users to navigate pages.

Marius Roosendaal
Another usable accordion menu that groups portfolio items.

5. Vertical Navigation Layouts

Danny Blackman
Danny Blackman’s website is often regarded as one of the better portfolios out there, in part because of the amazing vertical layout.

Tomas Pojeta
This website is yet another portfolio that uses a vertical layout to incorporate multiple pages onto one, while allowing users to move vertically between sections.

volll
Volll uses a vertical layout with a beautiful illustrated landscape background.

Mediocore
Mediocore is an awesome portfolio. It has a few more elements than usual on its pages, but still looks excellent.

6. User-Friendly Sidebar Menus

FreelanceSwitch
FreelanceSwitch organizes its articles using a great menu.

Fubiz
The redesign of Fubiz brings an excellent sidebar. Slide effects are used to fit a large amount of content into a small sidebar.

Checkout
Checkout has a stunning website. An extremely clean list-style menu in the features section also displays nice icons.

Ruby Tuesday
Ruby Tuesday has a very nice website. The sidebar menu has exceptional icons and smooth hover effects.

Concentric Studio
A simple and minimalist menu with sliding effects.

Barack Obama
President Obama’s website has a well-spaced and nicely contrasting list-style sidebar menu.

GABBO DESIGN
Another clean and well-spaced list menu.