可与IE整合、分离的导航条

作者：佚名来源：不详发布时间：2006/10/29 发布人：admin

要完成此效果把如下代码加入到<body>区域中

var ie5 = (document.getElementsByTagName != null);

function menuItemHighlight(el) {
    el.style.background = "highlight";
    el.style.color = "highlighttext";
}

function menuItemNormal(el) {
    el.style.background = "";
    el.style.color = "";
}

function raiseButton(el) {
    el.style.borderTop ="1 solid buttonhighlight";
    el.style.borderLeft ="1 solid buttonhighlight";
    el.style.borderBottom ="1 solid buttonshadow";
    el.style.borderRight ="1 solid buttonshadow";
    el.style.padding ="1";
    el.style.paddingLeft = "7";
    el.style.paddingRight = "7";
}

function normalButton(el) {
    el.style.border = "1 solid buttonface";
    el.style.padding ="1";
    el.style.paddingLeft = "7";
    el.style.paddingRight = "7";
}

function pressedButton(el) {
    el.style.borderTop ="1 solid buttonshadow";
    el.style.paddingTop = "2";
    el.style.borderLeft ="1 solid buttonshadow";
    el.style.paddingLeft = "8";
    el.style.borderBottom ="1 solid buttonhighlight";
    el.style.paddingBottom= "0";
    el.style.borderRight = "1 solid buttonhighlight";
    el.style.paddingRight = "6";
}

function getMenuItem(el) {
    temp = el;
    while ((temp!=null) && (temp.tagName!="TABLE") && (temp.id!="menubar") && (temp.id!="menu") && (temp.id!="handle")) {
        if ((temp.tagName=="TR") || (temp.className=="root"))
            el = temp;
        temp = temp.parentElement;
    }
    return el;
}

function getSub(el) {
    temp = el;
    while ((temp!=null) && (temp.className != "sub")) {
        if (temp.tagName=="TABLE")
            el = temp;
        temp = temp.parentElement;
    }
    return el;
}

function Restore() {
    if (activeMenu) {
        toggleMenu(activeMenu.parentElement);
        cleanUpMenuBar();
    }
}

document.onclick=Restore;

}

function toggleMenu(el) {
    if (el.menu == null)
        el.menu = getChildren(el);
    if (el.menu == activeMenu) {
        if (activeSub)
            menuItemNormal(activeSub.parentElement.parentElement);
        cleanup(el.menu,true);
        activeMenu = null;
        activeSub = null;
//        showWindowedObjects(true);
    }
    else {
        if (activeMenu) {
            cleanup(activeMenu,true);
            hideMenu(activeMenu);
        }
        
        activeMenu = el.menu;

var tPos = topPos(el.menu) + menu.offsetHeight;

if ((document.body.offsetHeight - tPos) >= el.menu.offsetHeight) {
            el.menu.style.pixelTop = (ie5) ? el.offsetHeight + 1
                                           : menu.offsetHeight - el.offsetTop - 2;
            dir = 2;
        }
        else {
            el.menu.style.pixelTop = (ie5) ? el.offsetTop - el.menu.offsetHeight - 1
                                           : el.offsetTop - el.menu.offsetHeight + 2;
            dir = 8;
        }
            
        el.menu.style.pixelLeft = (ie5) ? el.offsetLeft - 2 : el.offsetLeft;
        show(el.menu, dir);
        showWindowedObjects(false);
    }
}

function showSubMenu(el,show) {
    var dir = 2;
    temp = el;
    list = el.children.tags("TD");
    el = list[list.length-1];
    if (el.menu == null)
        el.menu = getChildren(el);
    temp.subMenu = el.menu;
    if ((el.menu != activeMenu) && (show)) {
        activeSub = el.menu;

var lPos = leftPos(el.menu);
        if ((document.body.offsetWidth - lPos)  >= el.menu.offsetWidth) {
            el.menu.style.left = (ie5) ? el.parentNode.offsetWidth
                                       : el.offsetParent.offsetWidth;
            dir = 6;
        }
        else {
            el.menu.style.left = - el.menu.offsetWidth + 3;
            dir = 4;
        }

var tPos = (ie5) ? topPos(el.menu) + el.offsetTop
                         : topPos(el.menu) + el.offsetParent.offsetTop;// + el.menu.offsetTop;

if ((document.body.offsetHeight - tPos) >= el.menu.offsetHeight)
            el.menu.style.top =  (ie5) ? el.offsetTop - 4
                                       : el.offsetParent.offsetTop - 2;
        else
            el.menu.style.top =  (ie5) ? el.offsetTop + el.offsetHeight - el.menu.offsetHeight
                                       : el.offsetParent.offsetTop + el.offsetParent.offsetHeight - el.menu.offsetHeight + 2;
        showSub(el.menu, dir);
    }
    else {
        show(el.menu ,dir);
        activeSub = null;
    }
}

function topPos(el) {
    var temp = el;
    var y = 0;
    while (temp.id!="menu") {
        temp = temp.offsetParent;
        y += temp.offsetTop;
    }
    return y;
}

function leftPos(el) {
    var temp = el;
    var x = 0;
    while (temp.id!="menu") {
        temp = temp.offsetParent;
        x += temp.offsetLeft;
    }
    return x + el.offsetParent.offsetWidth;
}

function show(el, dir) {
    if (typeof(fade) == "function")
        fade(el, true);
    else if (typeof(swipe) == "function") {
        tempElSwipe = el;
        tempDirSwipe = dir;
        el.style.visibility = "visible";
        el.style.visibility = "hidden";
        window.setTimeout("tempSwipe()", 0);
//        swipe(el, dir);
    }
    else
        el.style.visibility = "visible";
}

var tempElSwipe, tempDirSwipe;

function tempSwipe() {
    swipe(tempElSwipe, tempDirSwipe);
}

function showSub(el ,dir) {
    show(el, dir);
//    swipe(el, dir);
//    fade(el, true);
//    el.style.visibility = "visible";
}

}

function getChildren(el) {
    var tList = el.children.tags("TABLE");
    return tList[0];
}

var dragObject = null;
var dragObjectPos = "top";
var tx;
var ty;

window.onload=fixSize;
window.onresize=fixSize;

function document.onmousedown() {
    if(window.event.srcElement.id == "handle") {
        dragObject = document.all[window.event.srcElement.getAttribute("for")];
        Restore();    //Hide the menus while moving
        ty = (window.event.clientY - dragObject.style.pixelTop);
        window.event.returnValue = false;
        window.event.cancelBubble = true;
    }
    else {
        dragObject = null;
    }    
}

function document.onmouseup() {
    if(dragObject) {
        dragObject = null;
    }
}

function document.onmousemove() {
    if(dragObject) {
        if(window.event.clientX >= 0) {
            if((window.event.clientY - ty) <= 15) {
                dragObject.style.border = "0 solid buttonface";
                dragObject.style.width = "100%";
                dragObject.style.top = 0;
                dragObject.style.left = 0;
                dragObjectPos = "top";
                fixSize();
            }
            else if ((window.event.clientY - ty) >= document.body.clientHeight - menu.offsetHeight - 15) {
                dragObject.style.border = "0 solid buttonface";
                dragObject.style.width = "100%";
                dragObject.style.top = document.body.clientHeight - menu.offsetHeight;
                dragObject.style.left = 0;
                dragObjectPos="bottom";
                fixSize();
            }
            else {
                dragObject.style.width = "10px";    
                dragObject.style.left = window.event.clientX;
                dragObject.style.top = window.event.clientY - ty;
                dragObject.style.border = "2px outset white";
                dragObjectPos = "float";
                fixSize();
            }
        }
        else {
            dragObject.style.border = "";
            dragObject.style.left = "0";
            dragObject.style.top = "0";
        }
        window.event.returnValue = false;
        window.event.cancelBubble = true;
    } 
}

</Script>

<TABLE cellSpacing=1 id=menu onclick=menuClick() onmouseout=menuOut() 
onmouseover=menuOver() onselectstart="return false">
  <TBODY>
  <TR id=menubar>
    <TD class=disabled style="PADDING-LEFT: 0px; PADDING-RIGHT: 1px">
      <DIV class=disabled id=handle style="HEIGHT: 100%; LEFT: 3px; WIDTH: 3px" 
      title="Move me!" for="menu"></DIV></TD>
    <TD class=root>HOME 
      <TABLE cellSpacing=0 class=menu style="VISIBILITY: hidden">
        <TBODY> 
        <TR href="javascript:alert('这里可以改成一个链接!')"> 
          <TD><img src="http://www.netton.cn/wydh/images/home.gif" width=16 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></TD>
          <TD noWrap>LINK</TD>
          <TD></TD>
        </TR>
        <TR class=sub> 
          <TD></TD>
          <TD noWrap>LINK</TD>
          <TD> 
            <TABLE cellSpacing=0 class=menu style="VISIBILITY: hidden">
              <TBODY> 
              <TR href="javascript:alert('这里可以改成一个链接')"> 
                <TD noWrap style="HEIGHT: 20px">LINK</TD>
              </TR>
              </TBODY> 
            </TABLE>
          </TD>
        </TR>
        <TR class=disabled> 
          <TD colSpan=3> 
            <HR>
          </TD>
        </TR>
        <TR 
        href="javascript:alert('这里可以改成一个链接')"> 
          <TD></TD>
          <TD>LINK</TD>
          <TD></TD>
        </TR>
        <TR title="This is really easy"> 
          <TD></TD>
          <TD>LINK</TD>
          <TD></TD>
        </TR>
        </TBODY> 
      </TABLE>
    </TD>
    <TD class=root>Help 
      <TABLE cellSpacing=0 class=menu style="VISIBILITY: hidden">
        <TBODY>
        <TR 
        href="javascript:alert('www.JsShow.com')">
          <TD></TD>
          <TD>About</TD>
          <TD></TD></TR></TBODY></TABLE></TD>
    <TD class=disabled width="100%"> </TD></TR></TBODY></TABLE>
<DIV id=outerDiv>

特别说明：如网页特效代码中有引用图片文件等，请自己下载到本地调试！

[] [返回] [打印] [收藏] [评论]

上一篇代码：会活动的导航菜单

下一篇代码：会动的菜

可与IE整合、分离的导航条

精品推荐

代码分类

阅读排行

相关代码