简单的HoverMenu效果

2011年6月7日版本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HoverMenu</title>
<head>
<script type="text/javascript">
function addEvent(obj, evType, fn){
 if (obj.addEventListener){
    obj.addEventListener(evType, fn, false);
    return true;
 } else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType, fn);
    return r;
 } else {
    return false;
 }
}

function removeEvent(obj, evType, fn, useCapture){
  if (obj.removeEventListener){
    obj.removeEventListener(evType, fn, useCapture);
    return true;
  } else if (obj.detachEvent){
    var r = obj.detachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Handler could not be removed");
  }
}

function initHoverMenu(){
    var elms = document.getElementsByTagName('a');
    for (i = 0; i < elms.length; i++) {
        if (elms[i].className.indexOf("HoverMenu") == 0) { 
            addEvent(elms[i],'mouseover',showHoverMenu);
            addEvent(elms[i],'mouseout',hidHoverMenu);
        }
    }
}

function showHoverMenu(e){

    var Pos = getPosition(e);
    
    var menu = createMenu();
    
    menu.style.display = "block";
    menu.style.top = Pos.y + "px";//要加"px"否则不兼容FF
    menu.style.left = Pos.x + "px";
}

function hidHoverMenu(){
    var menu = createMenu();
    menu.style.display = "none";
}

function createMenu(){
    if(createMenu._init == undefined){
        theBody = document.getElementsByTagName('BODY')[0];
        menu = document.createElement('div');
        menu.id = "MenuID";
        menu.style.position = 'absolute';
        menu.innerHTML = "this is Menu";
        menu.style.top = 100;
        theBody.appendChild(menu);
        createMenu._init = 1;
    }
    return menu;
}

function getPosition(e){//要兼容FF的话，这个参数一定要写上

    e = window.event || e; 
    srcElement = e.srcElement || e.target;
    
    var top = srcElement.getBoundingClientRect().top + getScrollTop();
    var left = srcElement.getBoundingClientRect().right + getScrollLeft();

    return {x:left, y:top};
}

function getScrollTop() {
    if (self.pageYOffset) // all except Explorer
    {
        return self.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop) // Explorer 6 Strict
    {
        return document.documentElement.scrollTop;
    }
    else if (document.body) // all other Explorers
    {
        return document.body.scrollTop;
    }
}

function getScrollLeft() {
    if (self.pageXOffset) // all except Explorer
    {
        return self.pageXOffset;
    }
    else if (document.documentElement && document.documentElement.scrollLeft) // Explorer 6 Strict
    {
        return document.documentElement.scrollLeft;
    }
    else if (document.body) // all other Explorers
    {
        return document.body.scrollLeft;
    }
}

addEvent(window,'load',initHoverMenu);

</script>
</head>

<body>

<a href="#" id="ima" class="HoverMenu">菜单</a><br>
<a href="#" id="ima" class="HoverMenu">菜单</a><br>
<a href="#" id="ima" class="HoverMenu">菜单</a>
</body>

</html>
效果图