Drop down menu with Prototype
Prototype and Sergio Pereira’s excellent documentation of it has made client-side scripting with JavaScript actually fun! JavaScript can be intimidating. DOM manipulation is a beast, especially to those exposed to how easy it is to program ActionScript! Browser differences further complicate matters. I’ll quote from Sergio, “This amazingly well thought and well written piece of standards-compliant code takes a lot of the burden associated with creating rich, highly interactive web pages that characterize the Web 2.0 off your back.“
Here is a function that powers a drop down navigation. It recursively applies a function to an li that toggles the visibility of a nested ul element.
/*
A function that toggles the visibility of nested ul’s
*/
// For every li
$$(“#nav li”).each(function(node){
// if there’s a ul
var ul = $A(node.getElementsByTagName(“ul”)).first();
if(ul != null){
// toggle it’s visibility on these events
node.onmouseover = node.onmouseout = function(){
Element.toggle(ul);
}
}
});
}
The above JavaScript code depends on having all the ul’s hidden via the following script. View the XHTML source to the demo page to see how it’s implimented. I should also note that this code runs prior to the site being rendered and the window.onload. You will never see a flicker of menu’s collapsing.
$$(“#nav ul”).each(function(node){
Element.hide(node);
});
April 17th, 2008 at 10:27 am
[...] Drop down menu with Prototype- A unique drop down navigation that recursively applies a function to an li that toggles the [...]
April 20th, 2008 at 1:26 am
[...] Drop down menu with Prototype [...]
May 22nd, 2008 at 7:51 am
Qiut using my identity! I had no idea there were so many Matt Garrett’s in the world. I was shocked when I seen Graphic artist; I also do graphics ( airbrushing), it’s a small world.
May 27th, 2008 at 6:30 am
lol!
there are quite a few Matt Garrett’s around, but I guess it’s a cool enough name for more than one of us to share it..
Matt Garrett