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

1. How does it work? I don’t quite understand what it’s doing, with the iframes 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.