整合在IE中的导航条（经典）

整合在IE中的导航条（经典）

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 height=17 src="../../../这里改为图片地址" width=16></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.51js.com')">
          <TD></TD>
          <TD>About</TD>
          <TD></TD></TR></TBODY></TABLE></TD>
    <TD class=disabled width="100%"> </TD></TR></TBODY></TABLE>
<DIV id=outerDiv>

【内容导航】
第1页：完全用CSS实现的中英文双语导航菜单(经典)	第2页：商业风格的CSS垂直菜单
第3页：突起的导航栏效果[经典]	第4页：点击显示的FAQ菜单效果[经典]
第5页：一款DIV+CSS闪动导航条效果(经典)	第6页：非常酷的CSS菜单效果B(经典)
第7页：非常酷的CSS菜单效果A（经典）	第8页：会旋转的菜单导航（经典）
第9页：带项目描述的导航菜单（经典）	第10页：聚合的导航菜单效果（经典）
第11页：整合在IE中的导航条（经典）	第12页：含下拉菜单的绿色导航条
第13页：关联菜单（连动菜单）	第14页：可拖动的导航菜单
第15页：多级滚动菜单	第16页：微软导航菜单
第17页：鼠标移到文字上自动展开	第18页：点击渐显的导航菜单
第19页：随机网站推荐脚本	第20页：网站内快捷键导航
第21页：左侧导航菜单类似按钮	第22页：可移动的导航栏
第23页：页面顶部多级导航栏	第24页：浮动、隐藏的导航菜单
第25页：上下弹动的导航条	第26页：鼠标指向显示次级菜单
第27页：漂亮的仿flash菜单	第28页：滑动的层作菜单导航
第29页：精彩的跳动菜单效果	第30页：类似与QQ的好友/黑名单之类的树型菜单
第31页：定时改变标题栏的内容

菜单导航集合

整合在IE中的导航条（经典）