MAKE SITES .CC

I worked on my friend Dylan Rhodes’ website called Reezle that just entered its public beta. Among other things I did the main navigation menu for the site. Since the website uses the Prototype-Scriptaculous combination it was logical to create this element with the existing libraries.

I eventually came up with a solution that was both elegant and efficient and I decided to release this script as open-source (with permission of course) as it can have many other implementations.

See an example here

The above is included in the archive, along with the Prototype library, and I suggest you use that as a basis for your application. The actual JavaScript routine for the menu is this:

var DropDownMenu = Class.create();
 
DropDownMenu.prototype = {
 
 initialize: function(menuElement) {
	menuElement.childElements().each(function(node){
		// if there is a submenu
		var submenu = $A(node.getElementsByTagName("ul")).first();
		if(submenu != null){
			// make sub-menu invisible
			Element.extend(submenu).setStyle({display: 'none'});
			// toggle the visibility of the submenu
			node.onmouseover = node.onmouseout = function(){
				Element.toggle(submenu);
			}
		}
	});
}
 
};

Download the Script

Version: 1.0
Language: JavaScript
File size: 29,6kb

Last 5 projects by Makis

• Twitter Status v1.0 (with JSON and cURL in PHP) - December 2nd, 2009
• OptusZoo - Restructure - October 20th, 2009
• inSing.com: New website - May 18th, 2009
• Script: Post-load banner ads - May 17th, 2009
• Flash-antics: New website - May 6th, 2009

This entry was posted on Tuesday, November 11th, 2008 at 11:33 pm and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.