Cross-browser javascript menu with few lines of code

[serkan sendur]

Menu is about three things :
1) Position
2) Show-hide
3) Content

the Positining function is this :

function elementPosition(obj) {
        var curleft = 0, curtop = 0;

        if (obj.offsetParent) {
            curleft = obj.offsetLeft;
            curtop = obj.offsetTop;

            while (obj = obj.offsetParent) {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            }
        }

        return { x: curleft, y: curtop };
    }

the rest is Show-hide and content issues :

var _time_out = null;
            function show_menu(ele,divToShow)
            {
            if(_time_out != null)
            {
            clearTimeout(_time_out);
            }
           var _pos = elementPosition(ele);
           document.getElementById('dvMenu').style.left = _pos.x + "px";
            document.getElementById('dvMenu').style.top = (_pos.y + 30) + "px";
            document.getElementById('dvMenu').innerHTML =  document.getElementById(divToShow).innerHTML; 
            document.getElementById('dvMenu').style.visibility = "visible";
            }
            function hide_menu()
            {
            _time_out = setTimeout("document.getElementById('dvMenu').style.visibility = 'hidden'",200);
            }

the content container is this :

<div id="dvMenu" style="position:absolute;top:100px;left:100px;color:White;font-family:Verdana;font-size:11px;visibility:hidden;z-index:100;background-color:#2b2b2b" onmouseout="this.style.visibility='hidden'" onmouseover="clearTimeout(_time_out)"></div>

create your content divs :

<div id="foo">
<a href="http://www.foo.com" onmouseout="event.cancelBubble=true" onmouseover="this.parentNode.style.visibility='visible'>go to foo</a>
<a href="http://www.foo1.com" onmouseout="event.cancelBubble=true" onmouseover="this.parentNode.style.visibility='visible'>go to foo1</a>
</div>

menu buttons will be like this :

<img src="foo" onmouseover="show_menu(this,'foo')" onmouseout="hide_menu()" />