Question

Quick Question:

Anyone knows this? :

http://lwis.net/free-css-drop-down-menu/

It uses javascript for -IE6 only, but with javascript frameworks.

Is it possible to run this without a framework?

Answer 1

It could be used without a js library, but not out of the box. You’d have to write the js yourself. All you need is basically “on hover, set the style to display the dropdowns”, and “on mouseout, set the stlye to hide the dropdowns.” The key for that is the attachEvent function (for IE only, so if you decide you need other browsers, you’ll need a modify the code here). It’s better to stick it in a function so it’s easier to work with:

function observe(target, eventType, func, useCapture) {
    target = (typeof target=="string") ? document.getElementById(target) : target;
    useCapture = useCapture || false;

    target.attachEvent("on"+eventType, function(event) {func(event, target)});
}

You could then use that function to wait for page load, then set up the callbacks for the hover and mouseout:

observe(window, "load", function() {
    observe("button1", "mouseover", function() {
        document.getElementById("dropdown1").style.display = "block";
    });
    observe("button1", "mouseout", function() {
        document.getElementById("dropdown1").style.display = "none";
    });
});

This is of course a very simplistic example, only using id’s to grab your menu buttons and dropdowns, but it gives you an idea how to get it started.