Accomplishing This Style of Drop-Down Menus in jQuery
- by Maxim Z.
I was browsing the web and found this site. I noticed how the nav bar drop-down works, and I want to implement something similar on my website.
Afer going into the source code of the page, I found that those drop-down areas are contained in divs with class fOut.
It turns out that this is being done with MooTools. Here is the script itself (referenced in the original page after the Mootools script itself):
window.addEvent('domready', function() {
$("primaryNav").getChildren("li").addEvents({
"mouseenter": function(){
$(this).addClass("hover").getChildren("a").addClass("hover");
},
"mouseleave": function(){
$(this).removeClass("hover").getChildren("a").removeClass("hover");
}
});
$$(".fOut").each(function(el,i){
var ifr = $(document.createElement("iframe"));
ifr.className = "ieBgIframe";
ifr.frameBorder = "0";
ifr.src="about:blank";
ifr.injectInside(el);
var p = el.getParent();
p.addClass("hover");
var h = el.getSize().size.y;
p.removeClass("hover");
ifr.height=h;
});
$$(".olderVersionsToggle").addEvents({
"click": function(e){
var event = new Event(e);
event.stop();
var p = $(this).getParent().getNext();
if(p.hasClass("open")){
p.removeClass("open");
$(this).setText("Show previous versions...");
}
else{
p.addClass("open");
$(this).setText("Hide previous versions...");
}
return false;
}
});
});
My Question(s)
I have two questions about this code.
How does it work? I don't quite understand what it's doing, with the iframes and all.
How can this be implemented in jQuery?
