Ajax Updates

Nice MooTools Animated Menu
Advanced jQuery Suckerfish Menu: Superfish
jQuery Tabs Plugin: idTabs
Simple Dropdown Menus With Pop
Smarter Breadcrumbs: jBreadCrumb

Posted: 21 Nov 2009 02:34 PM PST

This is a nice animated menu built with MooTools.

The trick of the menu is a Flashy hover effect of the arrow (or any element you want).

Curious how to build something like the menu featured on this site for your next web design project? (note IE6 users – the menu is not implemented for you as your browser does not properly support png transparency, but with a solid background, it would work great). To make the menu, you won't even have to muck about in javascript. Simply define:

a container for the background image
the nav elements
the 'current' nav element ID
the animation's horizontal track (the y coordinate of the background-image)
the left offset of the image in relation to the nav element
Basically, you just tell the function where to put the background image you want to animate, what the buttons are and how to identify the current id, then position its x and y coordinates in relation to the elements. If you are new to javascript web development, and not sure what this all means, keep reading. It breaks down very simply.

Installation
Install mootools 1.2, then copy and paste the code before the < /head > tag in your html file, or save it as a .js and pull it in.

Download mootools 1.2, in my opinion, the best javascript library around.
Upload mootools 1.2 and link to it in the head tag (), before the end of the head tag in your html (or)
Save the code as simple_animated_menu.js (or whatever you like) and link to in the head tag (
Download: http://www.consideropen.com/downloads/simple_animated_menu.zip Source: http://www.consideropen.com/blog/2008/06/simple-mootools-12-animated-menu/

Related Listings:

Simple & Nice MooTools Slideshow Plugin: Floom Floom is a MooTools slideshow plugin that can present...
BySlideMenu – Nice and powerful accordion menu BySlideMenu is a plugin for Mootools which allow you to...
Create a Sprited Navigation Menu Using CSS and MooTools CSS sprites are all the rage these days. And why...

Advanced jQuery Suckerfish Menu: Superfish

Posted: 21 Nov 2009 02:28 PM PST

Superfish is an advanced suckerfish menu plugin for jQuery.

It turns a standard CSS dropdown menu and tranforms it to a more powerful one (it gracefully degrades).

It supports both horizontal & vertical menus and unlimited sub-menus can be defined.

Considering the menu is generated from a CSS-dropdown menu, every sub can be easily styled too.
Other features of Superfish:
Suckerfish-style hover support for IE6.
Timed delay on mouseout.
Animation of sub-menu reveal.
Keyboard accessibility.
Indicates the presence of sub-menus by automatically adding arrow images to relevant anchors.
Drop shadows for capable browsers – degrades gracefully for Internet Explorer 6. Can disable shadows completely via options object.
Can show the path to your current page while the menu is idle.
Optional callback functions. The 'this' keyword within the handlers you attach will refer to the animated ul sub-menu.
Quick Start Guide
Begin with a working pure CSS dropdown menu just like you would if creating a Suckerfish menu – ie. for each li:hover selector, add an equivalent li.sfHover selector. To make this step easy, there are cross-browser CSS files for a variety of menu types available in the download section of this site.
Link to the superfish.js file using a script tag in the head of your document.

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

Call superfish() on the containing ul element.

 <script type="text/javascript">       $(document).ready(function() {         $('ul.sf-menu').superfish();     });   </script>

Demo: http://users.tpg.com.au/j_birch/plugins/superfish/#examples
Download: http://users.tpg.com.au/j_birch/plugins/superfish/superfish-1.4.8.zip
Source: http://users.tpg.com.au/j_birch/plugins/superfish/

Related Listings:

SuckerFish : jQuery Plugin Replicate Suckerfish is a powerful Menus using jquery library. Here...
10 incredible JQuery navigation menus JQuery is a lightweight, cross-browser compliant, and extremely powerful Javascript...
SuckerFish HoverLightbox From time to time I come across some truly impressive...

jQuery Tabs Plugin: idTabs

Posted: 21 Nov 2009 02:22 PM PST

idTabs is a jQuery plugin for creating simple to advanced tabs.

Tabs can be added dynamically, the “selected” tab can be acquired, idTabs can be binded to different events like mouseover.

Any element with a class name = idTabs becomes a tabbed area. Every link inside this class becomes a tab & the divs mentioned in these links become the content holders. To be more clear:

 <ul class="idTabs">   <li><a href="#jquery">jQuery</a></li>   <li><a href="#official">Tabs 3</a></li> </ul> <div id="jquery">If you haven't checked out ...</div> <div id="official">idTabs is only a simple ...</div>

is a basic 2 tabbed menu.

Demo: http://www.sunsean.com/idTabs/
Download: http://www.sunsean.com/idTabs/
Source: http://www.sunsean.com/idTabs/

Related Listings:

Image zoom with Tabs : Jquery Script Love this jquery image zoom script, the effect is a...
Sliding Tabs using Moo Tools Plugin The script relies on width and height of tabs and...
jQuery Tabs Address – Deep linking plugin The jQuery Address plugin provides powerful deep linking capabilities and...

Simple Dropdown Menus With Pop

Posted: 21 Nov 2009 02:17 PM PST

Pop! is a simple but effective jQuery plugin for creating dropdown menus.

It enables you to store any content in a container & shows/hides it with the clicks.

How to use it?
Insert the jquery.pop.js file into your webpage (make sure jQuery is inserted too)
Initialize it:

 <script type='text/javascript'>    $(document).ready(function(){      $.pop();    }); </script>

Using the preferred pop! class, wrap the content:

 <div class="pop">    any content to display </div>

Demo: http://pop.seaofclouds.com/
Download: http://github.com/seaofclouds/pop/tree/master%2Fjavascripts%2Fjquery.pop.js?raw=true
Source: a href=”http://pop.seaofclouds.com/” target=”_blank”>http://pop.seaofclouds.com/

Related Listings:

MooTools Dropdown Menus With MenuMatic MenuMatic is a MooTools 1.2 class that takes a sematic...
Flexible MooTools Tree Control: Mif.Tree Mif.Tree is a quality solution for creating tree menus with...
FreeStyle Menus v1.0 RC12 This is an XHTML compliant, CSS-formatted menu script, designed to...

Smarter Breadcrumbs: jBreadCrumb

Posted: 21 Nov 2009 02:13 PM PST

jBreadCrumb is a jQuery plugin for displaying breadcrumb navigations in a more flexible & smarter way.

As the length of a breadcrumb menu may be very long & the common method used for this problem is limiting th eamount of menus used, jBreadCrumb follows another route.

It creates a collapsible interface that smartly decides the display method according to the amount and length of the elements.

This is a better navigation in means of usability & SEO.

Usage is not complicated & it only requires the jQuery Easing plugin.

Download: http://www.comparenetworks.com/developers/jqueryplugins/jBreadCrumb_1.1.zip
Source: http://www.comparenetworks.com/developers/jqueryplugins/jbreadcrumb.html

Related Listings: