1顶

可与IE整合、分离的导航条下拉菜单

稿源：互联网 2022-05-10 07:39:20 点击： 836 撤稿纠错

可与IE整合、分离的导航条下拉菜单，下拉菜单各选项可自定义。

以下讨论的是和下拉菜单导航相关的可与IE整合、分离的导航条下拉菜单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

有什么问题请到<a href='/bbs/index.asp?boardid=2'>论坛</a>中发表<br>



<style rel=stylesheet type=text/css>
BODY {
    BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN: 0px; color: buttontext
}
#menu {
    BACKGROUND: buttonface; BORDER-BOTTOM: buttonface 1px solid; BORDER-LEFT: buttonface 1px solid; BORDER-RIGHT: buttonface 1px solid; BORDER-TOP: buttonface 1px solid; CURSOR: default; LEFT: 0px; POSITION: absolute; TOP: 0px
}
#menu .menu {
    BACKGROUND: buttonface; BORDER-BOTTOM: buttonhighlight 2px outset; BORDER-LEFT: buttonhighlight 2px outset; BORDER-RIGHT: buttonhighlight 2px outset; BORDER-TOP: buttonhighlight 2px outset; POSITION: absolute
}
#menu TD {
    FONT: menu; HEIGHT: 20px
}
#menu .root {
    BORDER-BOTTOM: buttonface 1px solid; BORDER-LEFT: buttonface 1px solid; BORDER-RIGHT: buttonface 1px solid; BORDER-TOP: buttonface 1px solid; MARGIN: 6px; PADDING-BOTTOM: 1px; PADDING-LEFT: 7px; PADDING-RIGHT: 7px; PADDING-TOP: 1px
}
#menu .icon {
    TEXT-ALIGN: center
}
#menu .disabled {
    COLOR: buttonshadow
}
#menu .more {
    FONT-FAMILY: webdings; TEXT-ALIGN: right; WIDTH: 20px
}
#menu #handle {
    BORDER-BOTTOM: buttonshadow 1px solid; BORDER-LEFT: buttonhighlight 1px solid; BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid; CURSOR: move; MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
#outerDiv {
    BORDER-BOTTOM: white 2px inset; BORDER-LEFT: white 2px inset; BORDER-RIGHT: white 2px inset; BORDER-TOP: white 2px inset; HEIGHT: 90%; OVERFLOW: auto; POSITION: absolute; WIDTH: 100%; Z-INDEX: -1
}
</style>
<SCRIPT>
var activeMenu = null;
var activeSub = null;
var tempEl;
var t;
var hideWindowedControls = true;

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></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.alixixi.com')">
          <TD></TD>
          <TD>About</TD>
          <TD></TD></TR></TBODY></TABLE></TD>
    <TD class=disabled width="100%"> </TD></TR></TBODY></TABLE>
<DIV id=outerDiv>

<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于可与IE整合、分离的导航条下拉菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200807141748.shtml方便下次再访问哦。

·上一篇： 选择相应的数字可以实现页面转跳的导航
·下一篇： 会动的页面导航菜单

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

可与IE整合、分离的导航条下拉菜单

文章分类LIST >>返回首页

最新游戏

最新新闻