Doing this style of dropdown menus in jQuery

Question

I was browsing the web and found this site . I noticed how the navigation bar is laid out, and I want to implement something like this on my website.

Turning to the source code of the page, I found that these drop-down areas are contained in a div with class fOut .

It turns out this is done using MooTools. Here is the script itself (link on the source 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 it works? I don’t quite understand what it is doing using an iframe and all.
• How can this be implemented in jQuery?

Answer 1

It works just like any other flight menu, the submenu is statically positioned, and they add a hover state (class) when you hover over a menu item. It looks (from the DOM) as if they are using an iframe to crack some IE problems. Open a console session and look at the elements to see what I mean, iframes do not change over time, they just sit there empty.

As for implementing it in jQuery, I would start with your dom layout (make sure everything is arranged in one area and fills your submenus with well-designed content). Then just bind the mouseenter and mouseleave events, for example:

 $("primaryNav li").mouseenter(function() {$(this).addClass("hover");$("a", this).addClass("hover");}); $("primaryNav li").mouseleave(function() {$(this).removeClass("hover"); $("a", this).removeClass("hover");}); 

They use an iframe to set a consistent height across all elements (it seems), you can do this by simply setting the height of the div as a static sum, or after each submenu just finds the highest (using innerHeight or externalHeight depending on your need) and set the rest to fit the height.