Make your own WordPress Drop-Down menu

To get started with this tutorial, you'll need to have a WordPress website up and running and a willingness to alter your theme files. Once that's squared away you're ready to rock!

The Standard WordPress navigation layout

Before we get into making drop downs, we need to take a look at the way WordPress layouts it’s navigation.

<ul id="nav">
	    <?php wp_list_categories('title_li=&sort_column=menu_order'); ?>
</ul>

You might also want to include a home link. You can add this manually like so:
view source
print?

<ul id="nav">
	    <li><a href="<? bloginfo('siteurl'); ?>">Home</a></li>
	    <?php wp_list_categories('title_li=&sort_column=menu_order'); ?>
</ul>

Both wp_list_pages and wp_nav_menu lay out their menus pretty much exactly the same, besides different class names, so we’ll just take a look at wp_nav_menu's printed code:

<ul class="menu">
	<li class="cat-item cat-item-6"><a href="http://localhost/wordpress/category/long-category/" title="View all posts filed under Long Category">Long Category</a>
	<ul class='children'>
		<li class="cat-item cat-item-7"><a href="http://localhost/wordpress/category/long-category/sub-long-category/" title="View all posts filed under Sub Long Category">Sub Long Category</a></li>
	</ul>
	</li>
	<li class="cat-item cat-item-1"><a href="http://localhost/wordpress/category/uncategorized/" title="View all posts filed under Uncategorized">Uncategorized</a>
	<ul class='children'>
		<li class="cat-item cat-item-4"><a href="http://localhost/wordpress/category/uncategorized/subcategories/" title="View all posts filed under SubCategories">SubCategories</a></li>
	<li class="cat-item cat-item-3"><a href="http://localhost/wordpress/category/uncategorized/subcategorized/" title="View all posts filed under Subcategorized">Subcategorized</a></li>
	</ul>
	</li>
</ul>

As you can see, WordPress neatly (well neat besides all the classes) layouts out the menu in a nice semantic list, with the children of the navigation nested inside of it’s parent li. This allows us to use both CSS and/or jQuery to make our drop downs work!

Styling the Navigation

Now, let’s styling the navigator. We want our list items aligned horizontally, and of course centered in the middle of the page.

	ul.menu { list-style: none outside none; padding: 0; margin: 0 10px; float: left; font-size: 13px;}
	ul.menu li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; }
	ul.menu li a { padding: 9px 5px; color: rgb(255, 255, 255); display: block; text-decoration: none; float: left;  display: block;}
	ul.menu li:hover { background: #A6CB1B; }
	.current-cat { background: #8BBF47; }
	ul.menu li span { width: 11px; height: 10px; float: left; background: url('images/narga-sprites.png') -561px -78px no-repeat; margin: 11px 0 0 0;}
	ul.menu li ul.children {z-index:99; list-style: none outside none; position: absolute; left: 0; top: 31px; background: none repeat scroll 0% 0% rgb(51, 51, 51); margin: 0; padding: 0; display: none; float: left; width: 170px;  border-bottom: 1px solid #F8C92D;}
	ul.menu li ul.children li { margin: 0; padding: 0; clear: both; width: 170px; border-top: 1px solid #F8C92D;}
	html ul.menu li ul.children li a { float: left; width: 145px; background: url('images/narga-sprites.png') -578px -162px no-repeat #A6CB1B; padding-left: 20px; }
	html ul.menu li ul.children li a:hover { background: url('images/narga-sprites.png') -578px -162px no-repeat #7BAF36; }

jQuery Animation the Navigation

There’s also an easy way to make WordPress menus with jQuery drop downs. jQuery allows you to get a bit more fancy, by adding speeds and fades to the animation. It’s also useful if you’re still stuck supporting IE6.
There’s a tiny piece of jQuery required to show/hide the drop down menu’s. From an accessibility point of view, you can link the top-level navigation item so that if JS is disabled, the user will still be able to get around your site. Here’s the script.

jQuery(document).ready(function() {
//Dropdown Menu
	if(!jQuery.browser.msie){// IE  - 2nd level Fix
		jQuery("ul.topnav&quot.css({opacity:"0.95"});
	}
	jQuery(".topnav > li > ul&quot.css({display: "none"}); // Opera Fix
	jQuery("ul.children&quot.parent().append("<span></span>" //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
	jQuery("ul.menu li a&quot.hover(function() { //When trigger is clicked...
		//Following events are applied to the subnav itself (moving subnav up and down)
		jQuery(this).parent().find("ul.children&quot.slideDown('fast').show(400); //Drop down the subnav on hover
		jQuery(this).parent().hover(function() {
		}, function(){
			jQuery(this).parent().find("ul.children&quot.slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});
		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() {
			jQuery(this).addClass("subhover" //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			jQuery(this).removeClass("subhover" //On hover out, remove class "subhover"
	});

})

WordPress Drop-Down menu with CSS and jQuery (View in Action)

Finally!! A Drop Down WordPress Navigation Menu using CSS and jQuery!

That's basically it, the example is about as stripped down as I could make it. Hopefully you'll have fun bending the code to your next project. Feel free to post comments if you have any questions about the tutorial. Happy coding!

MobileMe Login Form

Inline labels are nothing new – in fact the easiest way to label a field is to simply set the field value up front and blow it away when the field gains focus. This is handy way for designers to save space and make their designs cleaner all-around. Unfortunately for us developers, simply setting the input value isn't very semantic or usable then you can't do it simple. I've just use a little jQuery to make it all happen.

The HTML

We'll start with the HTML. Nothing fancy here, just your standard sign-up form with labels and inputs.

<form id="signup" name="signup">
	<label for="email">Email Address</label>
	<input class="text" name="email" type="text" />
	<label for="username">Username</label>
	<input class="text username" name="username" type="text" />
	<input class="btn" type="submit" value="Sign Up" />
</form>

And a Little Bit of Javascript

The JavaScript needs to do three things:

1. Add the focus class to the label when the user clicks into a field and move the mouse cursor to start position
2. Add the typing class as soon as they start typing to make the difference
3. Bring the label back if they leave the field empty and switch to another field.

I've found a small jQuery snippet allow me choose the mouse cursor position when I click on input field.

	$.fn.setCursorPosition = function(pos) {
		if ($(this).get(0).setSelectionRange) {
			$(this).get(0).setSelectionRange(pos, pos);
		} else if ($(this).get(0).createTextRange) {
		var range = $(this).get(0).createTextRange();
		range.collapse(true);
		range.moveEnd('character', pos);
		range.moveStart('character', pos);
		range.select();
		}
	}

First of all, I will want to loop through our label elements and assign their values to the inputs that immediately follow. Then you'll want to hide those labels.

    $("#signup label&quot.each(function (i) {
        $(this).next("input&quot.attr("value",$(this).html()+"..."
        $(this).hide();
    });

Next step, I will handle the CSS classes to get rid of the label values at focus and blur events.

    $("#signup input&quot.focus(function() {
        if($(this).prev("label&quot.html()+"..." == this.value){
            $(this).addClass("focus&quot.setCursorPosition(0);
        }
    });
    $("#signup input&quot.keypress(function() {
        if($(this).prev("label&quot.html()+"..." == this.value){
            this.value = "";
            $(this).removeClass("focus&quot.addClass("typing"
        }
    });
    $("#signup input&quot.blur(function() {
		$(this).removeClass("focus&quot.removeClass("typing"
		if(this.value == "&quot{
		this.value = $(this).prev("label&quot.html()+"...";
		}
    });

Finally, I have complete jQuery snippet:

$(document).ready(function() {
	$.fn.setCursorPosition = function(pos) {
		if ($(this).get(0).setSelectionRange) {
			$(this).get(0).setSelectionRange(pos, pos);
		} else if ($(this).get(0).createTextRange) {
		var range = $(this).get(0).createTextRange();
		range.collapse(true);
		range.moveEnd('character', pos);
		range.moveStart('character', pos);
		range.select();
		}
	}
    $("#signup label&quot.each(function (i) {
        $(this).next("input&quot.attr("value",$(this).html()+"..."
        $(this).hide();
    });
    $("#signup input&quot.focus(function() {
        if($(this).prev("label&quot.html()+"..." == this.value){
            $(this).addClass("focus&quot.setCursorPosition(0);
        }
    });
    $("#signup input&quot.keypress(function() {
        if($(this).prev("label&quot.html()+"..." == this.value){
            this.value = "";
            $(this).removeClass("focus&quot.addClass("typing"
        }
    });
    $("#signup input&quot.blur(function() {
		$(this).removeClass("focus&quot.removeClass("typing"
		if(this.value == "&quot{
		this.value = $(this).prev("label&quot.html()+"...";
		}
    });
});

Styling the form with CSS

The CSS isn't important at all to what we're trying to do, so I won't cover any of that. There are a few key CSS lines that give us the positioning and effects we want.

input {
		border: 1px solid #ccc;
		color: #000;
		font: inherit;
		padding: 4px;
		width: 230px;
	}
	input:focus { border-color: #99B32D;}
	.focus { color: #8F8F8F; }
	.typing { color: #99B32D; }

Inline Form Labels with JQuery (View in Action)

Conclusion

It’s so simple, but perfect that solves an obnoxious little usability problem for inline labels.
Smashing Magazine recently published an article by Zurb called Stronger, Better, Faster Design with CSS3 that expands on this technique and makes it even better with CSS3 by just masking the label so even when you click into the input you can still read the label.
You can use a simple jQuery plugin  to get the same result, its call In-Field Labels jQuery Plugin

Further Reading

• Awesome Inline Form Labels
• jQuery Inline Form Labels
• jQuery Set Cursor Position in Text Area

Lazy Loader

Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. It can give to efficiency in the program's operation if properly and appropriately used.

How the logic works?

Using JavaScript, it is possible to detect the following:

• the coordinates of the part of the page (x-y) we’re viewing
• the coordinates of a specific element
• the width-height of the viewport

Having these inputs, we can easily understand if a given element is in the viewpoint or not. And, after it becomes "in", we can make a JavaScript call to load the content.

How to use?

Include them in your header:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

and in your code do:

$("img&quot.lazyload();

This causes all images below the fold to be lazy loaded.

Setting sensitivity

There are options for control maniacs who need to finetune. You can set threshold on how close to the edge (don’t push me too far) image should come before it is loaded. Default is 0 (when it is visible).

$("img&quot.lazyload({ threshold : 200 });

Setting threshold to 200 causes image to load 200 pixels before it is visible.

Placeholder image

You can also set placeholder image and custom event to trigger loading. Place holder should be a url to image. Transparent, grey and white 1×1 pixel images are provided with plugin.

$("img&quot.lazyload({ placeholder : "img/grey.gif" });

Event to trigger loading

Event can be any jQuery event such as click or mouse over. You can also use your own custom events such as sporty or foobar. Default is to wait until user scrolls down and image appears on the window. To prevent all images to load until their grey placeholder image is clicked you could do:

$("img&quot.lazyload({
    placeholder : "img/grey.gif",
    event : "click"
});

Using effects

By default plugin waits for image to fully load and calls show to show it. You can use any effect you want. Following code uses fadeIn effect. Check how it works at effect demo page.

$("img&quot.lazyload({
    placeholder : "img/grey.gif",
    effect : "fadeIn"
});

Images inside container

You can also use plugin for images inside scrolling container, such as div with scroll bar. Just pass the container as jQuery object. There is a demo for horizontal and vertical container.

#container {
    height: 600px;
    overflow: scroll;
}

$("img&quot.lazyload({
     placeholder : "img/grey.gif",
     container: $("#container&quot
});

When images are not sequential

After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong. You can control loading behaviour with failurelimit option.

$("img&quot.lazyload({
    failurelimit : 10
});

Setting failurelimit to 10 causes plugin to stop searching for images to load after finding 10 images below the fold. If you have a funky layout set this number to something high.

Delayed loading of images.

Not exactly feature of Lazy Load but it is also possible to delay loading of images. Following code waits for page to finish loading (not only HTML but also any visible images). Five seconds after page is finished, below the fold images are loaded automatically. You can also check the delayed loading demo.

$(function() {
    $("img:below-the-fold&quot.lazyload({
        placeholder : "img/grey.gif",
        event : "sporty"
    });
});
$(window).bind("load", function() {
    var timeout = setTimeout(function() {$("img&quot.trigger("sporty&quot}, 5000);
}); 

Known problems

Due to WebKit bug #6656 Lazy Loading wont give you any improvements in Safari. It will load all images you wanted it or not. You can workaround this with

Also you are using Mint you should have mint tag in the header of the page. Mint tag in the end of the page interferes with Lazy Load plugin. This is rather peculiar problem. If somebody finds an answer let me know.
Lazy Loader Homepage (jQuery plugins)

Get jQuery Lazy Loader Minified (JS, 2.92KB)

Another Javascript Libraries Images Lazy Loading Solutions

• MooTools LazyLoad is a customizable MooTools plugin that allows you to only load images when the user scrolls down near them.
• YUI 3 – ImageLoader Utility allows you as an implementor to delay the loading of images on your web page until such a time as your user is likely to see them. This can improve your overall page load performance by deferring the loading of some images that are not immediately visible at the time the page first renders. Because images are often the heaviest components of a given page, deferring the loading of some images can yield a marked improvement in the way the page "feels" to your user.
• Prototype – lazierLoad lazierLoad automatically hooks itself to the page, finds all images and only loads those appearing “above the fold” resulting in faster page loads. The images not located in the viewport, are not loaded until they appear within it (viz. when the user scrolls down).

Fancybox - Fancy lightbox alternative

The script has gained widespread popularity due to its simple yet elegant style and easy implementation. While it was initially developed from scratch, Lightbox has since been modified to use a number of JavaScript libraries (such as the Prototype Javascript Framework and jQuery for its animations and positioning), to reduce the size of the code. The release of Lightbox encouraged other developers to work on similar projects, resulting in products such as 15+ promising jQuery Lightbox-Clones plugins.

1. FancyBox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.
It was built using the jQuery library. Licensed under both MIT and GPL licenses

How to use

1. Make sure you are using valid DOCTYPE, this is required for FancyBox to look and function correctly.
2. Include nessesary JS and CSS files:

   <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.0.pack.js"></script>
   <!-- Optional - Add transitions as jQuery by default supports only "swing" and "linear" -->
   <script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
   <!-- Optional - Enable "mouse-wheel" to navigate throught gallery items -->
   <script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
   <link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.0.css" type="text/css" media="screen">

3. Sample Code:

   $(document).ready(function() {
   $("p#test1 a".fancybox();
   $("p#test2 a".fancybox({ 'hideOnContentClick': true });
   $("p#test3 a".fancybox({
                 'zoomSpeedIn': 0,
                 'zoomSpeedOut': 0,
                 'overlayShow': true
   });
   });
   

2. FancyZoom

This works with any html (images, text, headings, flash). The only caveat is it doesn't currently work with AJAX. Whatever you want to zoom to must be html already on the page. Below are several examples. Width and height of zoom box are configurable through optional setting or css.
The code below initialized the plugin and add the Zoom Effect to any a tag classed with zoom, and will show content relating to the id referenced in the href of the a tag.

$(document).ready(function() {
$('a.zoom').fancyZoom({scaleImg: true, closeOnClick: true});
});

The sample html code.

<a class="zoom" href="http://www.narga.net/"><img src="path/to/image/sample.gif"></a>

3. prettyPhoto

prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.
It comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)!
This plugin has been tested and is known to work in the following browsers

• Firefox 2.0+
• Safari 3.1.1+
• Opera 9+
• Internet Explorer 6.0+

Include the jQuery library, prettyPhoto javascript and the prettyPhoto CSS in the head of the page(s) where you want to use prettyPhoto.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />

Then, initialize prettyPhoto. Put the following code before the closing tag of your body ()

<script type="text/javascript">
	$(document).ready(function(){
		$("a[rel^='prettyPhoto']".prettyPhoto();
	});
</script>

Just add rel="prettyPhoto" to the link you want prettyPhoto to be enabled on.

4. Slimbox2

Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.
Include the script and CSS in the header of your page, after the inclusion of the jQuery library:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />

Add the rel="lightbox" attribute to the links pointing to your full-sized images. Use the optional title attribute if you want to show a caption:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Slimbox 2 is currently the smallest Lightbox-like script available for the jQuery library.

5. Colorbox

A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4. Allow users to create a customized lightbox that is unique to their project. Tested In: Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8.
The colorbox method takes a key/value object and an optional callback.

Format: $('selector').colorbox({key:value, key:value, key:value}, callback);
Example: $('a#login').colorbox({transition:'fade', speed:500});
Example: $('a.gallery').colorbox();
Example: $('button').colorbox({href:"thankyou.html"});

And it can be called directly, without assignment to an element

Example: $.fn.colorbox({href:"thankyou.html"});

ColorBox will accept a function for any of it's parameters.

$("a[rel='example']".colorbox({title: function(){
    var url = $(this).attr('href');
    return '<a href="'+url+'" target="_blank">Open In New Window</a>';
}});

6. imgBox

imgBox is a jQuery plugin that implements a smooth zoom effect on images.

What’s So Great About this Plugin?

• Elegant looking, Mac-like effect
• Popup blockers are no problem. The content opens within the active browser window
• Multiple images can be opened at the same time
• Can be customized with settings and CSS
• It’s just 7KB (packed)
• All modern browsers supported, including IE6

First, make sure that there is a XHTML DOCTYPE declaration at the very top of the page then include necessary files.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="en-US">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="imgbox/jquery.imgbox.pack.js"></script>
<link rel="stylesheet" href="imgbox/imgbox.css" />
<script type="text/javascript">
	$(document).ready(function(){
		$("a.zoom".imgbox();
	});
</script>

Create a link elements. You can set the title using the title attribute:

<a class="zoom" title="Lorem ipsum dolor sit amet" href="big_image.jpg"><img src="thumb.jpg" alt="" /></a>

7. Shadowbox

Shadowbox is a web-based media viewer application that supports all of the web's most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.
The simplest way to set up Shadowbox is to include the JavaScript and CSS files in the <head> of your document (web page) and then call Shadowbox.init, like this:

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

Next you need to tell Shadowbox which links you want it to open. The simplest way to do this is through your HTML markup. If you're going to take this route, at the very least you must add a rel="shadowbox" attribute to each link. For example, say you have this link to an image on your page:

<a href="myimage.jpg" rel="shadowbox">My Image</a>

8. Facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.
Load the dependency files. Make sure the jQuery is loaded first before the facebox plugin.

<script src="jquery.js" type="text/javascript"></script>
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/facebox/facebox.js" type="text/javascript"></script>

While calling facebox() on any anchor tag will do the trick, it's easier to give your Faceboxy links a rel="facebox" and hit them all onLoad.

jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox()
})

9. piroBox

piroBox is a versatile gallery plugin, with a choice of three styles (shadow,white or black). You can view your gallery as a slideshow or as single images and when an image is selected will automatically reposition the image in the browser window.
Choose your style (shadow,white or black) and include one of the three .css in your header.

<link href="css_pirobox/shadow/style.css" media="screen" title="shadow" rel="stylesheet" type="text/css" />
<link href="css_pirobox/white/style.css" media="screen" title="white" rel="stylesheet" type="text/css" />
<link href="css_pirobox/black/style.css" media="screen" title="black" rel="stylesheet" type="text/css" />

Include jQuery.js, pirobox.js and pirobox options in your header.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pirobox.1_2_min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$().piroBox({
      my_speed: 300, //animation speed
      bg_alpha: 0.5, //background opacity
      radius: 4, //caption rounded corner
      scrollImage : false, // true == image follows the page _|_ false == image remains in the same open position
                           // in some cases of very large images or long description could be useful.
      slideShow : 'true', // true == slideshow on, false == slideshow off
      slideSpeed : 3, //slideshow
      pirobox_next : 'piro_next', // Nav buttons -> piro_next == inside piroBox , piro_next_out == outside piroBox
      pirobox_prev : 'piro_prev', // Nav buttons -> piro_prev == inside piroBox , piro_prev_out == outside piroBox
      close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox
      });
});
</script>

In the Body, Add class="pirobox_gall" to any link tag to activate pirobox for a set of images

<a href="image_1.jpg" class="pirobox_gall" title="your title"><img src="thumb_1.jpg" /></a>
<a href="image_2.jpg" class="pirobox_gall" title="your title"><img src="thumb_2.jpg" /></a>
<a href="image_3.jpg" class="pirobox_gall" title="your title"><img src="thumb_3.jpg" /></a>

10. Interface Imagebox

This a jQuery equivalent for Lightbox2. Alternative to image popups that will display images in an overlay. All links that have attribute 'rel' starting with 'imagebox' and link to an image will display the image inside the page. Galleries can by build buy giving the value 'imagebox-galname' to attribute 'rel'. Attribute 'title' will be used as caption.
Code sample:

$.ImageBox.init(
	{
		loaderSRC: 'images/imagebox/loading.gif',
		closeHTML: ''
	}
);

11. lightBox

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery's selector.
Include lightBox plugin:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

You don´t need to modify your HTML markup to use jQuery lightBox plugin. Just use the power and flexibility of jQuery´s selector and create a set of related images.

<a href="image1.jpg" rel="lightbox"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

After it, select the links and call the jQuery lightBox plugin. See some examples:

<script type="text/javascript">
$(function() {
	// Use this example, or...
	$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	$('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	$('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>

12. NyroModal

Designers seem to like using modal windows more and more, as they provide a quick way to show data without reloading the entire page. It's easy to use and easy to design.
Supported Media: Images, Inline HTML, iFrame, AJAX, Video.
nyroModal(); is the basic function to set the click or submit function. To add the nyroModal functionnality to all links containing in #container, you'll do:

$('#container a').nyroModal();

13. Picbox

Picbox is a lightweight (around 5KB) javascript image viewer based on the excellent Slimbox by Christophe Beyls, and available using either the Mootools or jQuery frameworks. It features automatic resizing and zooming of large images, allowing them to fit in the browser or be viewed at full size.
Insert the following code into your <head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="js/picbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/picbox.css" type="text/css" media="screen" />

For easy migration from Lightbox/Slimbox, by default the script activated for links with rel=”lightbox” e.g.

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Picbox includes an api and customisation options. Refer to picbox.js in the src/ folder for the full list, including descriptions.

14. CeeBox

An overlay popup script for easily embedding flash video, displaying images, or showing html (either external sites via iframe or content on your own site via AJAX). Tested in Safari(4)/Chrome/FireFox(3.5)/Internet Explorer(6–8)/Opera(10). Note: Mobile Safari has an issue with fixed position.
Link all this javascript up with your site and add

$(document).ready(function(){ $(“your selector here“).ceebox();});

to your global .js file

15. ThickBox

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Before you can implement ThickBox make sure the page that invokes ThickBox has a valid DTD. This is required for ThickBox to look and function correctly.

ThickBox requires the jQuery JavaScript library; because of this, you will need to include the jquery.js file in the head element of your web page, followed by the thickbox.js file (NOTE: jquery.js must come first in the source order). Example below:

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

Go to ThickBox Homepage to learn the many different ways to use and invoke ThickBox functionality.
While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives above.

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management).
Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user's machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites.

I discovered right away is that the <a> tag does not allow the target attribute in XHTML Strict (nor does it in HTML Strict).

Open external links

//	Open external links in new windows using jquery
	$('a[href^="http://"]').filter(function() {
        return this.hostname && this.hostname !== location.hostname;
    }).attr('target', '_blank');

Really easy, really powerful, problem solved.

1. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.

Sexy Drop Down Menu w/jQuery & CSS

2. CSS-Tricks Simple jQuery Dropdowns

Very stripped down code and minimal styling, yet still drop down menu has all the functionality typically needed.

Simple jQuery Dropdowns

3. The Fanciest Dropdown Menu

Brian Cray teaches you how to create this stunning website drop down navigation menu. The drop down menu uses HTML, CSS and Javascript. You can also include the hoverIntent JQuery plugin for extra juicy effects.

The Fanciest Dropdown Menu

4. A Different Top Navigation Menu

They will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.

A Different Top Navigation Menu

5. jdMenu Hierarchical Menu Plugin

The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications

jdMenu Hierarchical Menu Plugin

6. Professional dropdown #2

This menu also styles the path taken through the menu so that it works in IE5.x and IE6 as well as IE7 and all other browsers. This is a little long-winded but necessary as IE5.5 and IE6 do not understand the child selector.

Professional dropdown #2

7. Designing the Digg Header

The design of Digg is full of smart ideas. The site identity is strong but doesn’t take up too much valuable vertical space. Navigation is compacted with the use of simple drop-down menus. Important things like subscribing, searching and account information are right up top where you would expect them to be. It’s fluid width, but it doesn’t shrink too far or grow too big.

Designing the Digg Header

8. Create Vimeo-like top navigation

What I like the most is the menu that drops down when you hover search box. It offers you different search options that you can choose and narrow your search.

Create Vimeo-like top navigation

9. Cut & Paste jQuery Mega Menu

Mega Menus refer to drop down menus that contain multiple columns of links. This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation. Customize the animation duration plus delay before menu disappears when the mouse rolls out of the anchor. Mega cool!

Cut & Paste jQuery Mega Menu

10. Animated Drop Down Menu with jQuery

Drop down menus are a really convent way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.

Animated Drop Down Menu with jQuery

11. mcDropdown jQuery Plugin

To overcome this obstacle, we spent a lot of time developing code that would automatically split long lists into multiple columns and then position itself so that it always fits within the viewport. The overall effect is somewhat similar to the Microsoft® Windows® "Start > All Programs" menu. However, the algorithm we use should keep the menus laid out in a more compact layout—which we believe offers quicker selection of the menu items. The screenshot below shows what the menu looks like when used with a very large menu.

mcDropdown jQuery Plugin

12. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

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, or set options to show breadcrumb links above the menu options to both deliver feedback and allow quick access to nodes higher up in the hierarchy. A lateral iPod-style slide transition reinforces the notion that you're moving forward into more granular data, or backward into higher-level data. This menu is specifically useful in traversing deeply nested hierarchies, particularly those more than three levels deep. It also provides a more usable alternative to multi-level fly-out menus, which can present challenges to those with limited manual dexterity.

jQuery Menu - Dropdown, iPod Drilldown, and Flyout styles

13. Drop down menu with nested submenus

Create your own drop down menu with nested submenus using CSS and a little JavaScript.

Drop down menu with nested submenus

14. jQuery Drop Line Tabs

This menu turns a nested UL list into a horizontal drop line tabs menu. The top-level tabs are rounded on each side thanks to the use of two transparent background images, while the sub ULs each appear as a single row of links that drop down when the mouse rolls over its parent LI. The menu also manages to sneak in a little CSS3, making use of the "border-radius" property to give each link within the sub ULs rounded edges when the mouse hovers over them..

jQuery Drop Line Tabs

15. jQuery Drop Down Boxes

One problem with HTML forms is it is hard to style the elements to fit into your design. The tutorial will show you how to style the hardest of them all, the select box.

jQuery Drop Down Boxes

16 . Reinventing a Drop Down with CSS and jQuery

For me, standard HTML Select element is pretty much annoying. It's ugly. It can't be styled properly in Internet Explorer. And it can't contain nothing but simple text. That is the reason I needed to reinvent Drop Down element. This tutorial shows how to do that (easily, believe it or not).

Reinventing a Drop Down with CSS and jQuery

17. Sliding Jquery Menu Tutorial

This tutorial will show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.

Sliding Menu Tutorial

18. Creating an Outlook Navigation Bar using the ListView and Accordion Controls

The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that has AccordionPane web controls.

Outlook Navigation Bar using the ListView and Accordion Controls

19. Perfect signin dropdown box likes Twitter with jQuery

This tutorial will explain how it works step by step and it’s good for learning jQuery how to do the toggle and tool tips. Enjoy it!

Perfect signin dropdown box likes Twitter with jQuery

20. jQuery UI Potato Menu Plugin

jQuery UI Potato Menu

21. Superfish v1.4.8 – jQuery menu plugin by Joel Birch

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 more features.

Superfish - jQuery menu plugin

22. Dynamic Drive - Smooth Navigational Menu

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that's a good thing given the important role of this element in any site. The menu's contents can either be from direct markup on the page, or an external file and fetched via Ajax instead.

Smooth Navigation Menu

23. jQuery File Tree

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.

jQuery File Tree

24. Make a Mega Drop-Down Menu with jQuery

Make a Mega Drop-Down Menu with jQuery

25. jQuery.mb.Menu

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right-click) in an intuitive way!
You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component’ll get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.

jQuery.mb.Menu