Accomplishing This Style of Drop-Down Menus in jQuery

Question

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 div s 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.

1. How does it work? I don't quite understand what it's doing, with the iframe s and all.
2. How can this be implemented in jQuery?

Answer 1

It works just like any other fly over menu, the submenu is statically positioned and they add the hover state (class) when you mouse over a menu item. It looks (from the DOM) like they are using the iframe to hack some IE issues. Open up a console session and watch the elements to see what I mean, the 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 lines up in the same area and fill in your sub-menus with well designed content). Then just bind up the mouseenter and mouseleave events like:

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

They are using iframe to set a consistent height across the elements (it seems), you could do this by simply setting the div height to be either a static amount or after rendering each sub-menu just find the tallest one (using innerHeight or outerHeight depending on your need) and set the rest to match it in height.