当前位置：Gxlcms > JavaScript > 又一个漂亮的导航栏的下拉菜单

又一个漂亮的导航栏的下拉菜单

时间：2021-07-01 10:21:17 帮助过：10人阅读

网上收集整合出来的，算是剽窃吧，IE6下用过，其他的没试。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
 
<HTML><HEAD><TITLE>SHARE</TITLE> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<style> 
BODY { 
    MARGIN: 0px; 
} 
A.notes { 
    FONT-SIZE: 12px; COLOR: #ffffff; TEXT-DECORATION: none 
} 
.MS_link0 { 
    BORDER-RIGHT: #1e77d3 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #1e77d3 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; BORDER-LEFT: #1e77d3 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #1e77d3 1px solid 
} 
.MS_link1 { 
    BORDER-RIGHT: #a1c6eb 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #a1c6eb 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; BACKGROUND: #3484d7; PADDING-BOTTOM: 0px; BORDER-LEFT: #a1c6eb 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #a1c6eb 1px solid 
} 
.MS_linksep { 
    PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 2px; FONT: 12px Verdana; COLOR: #a1c6eb; PADDING-TOP: 0px 
} 
TD#msviGlobalToolbar { 
    PADDING-BOTTOM: 2px; WIDTH: 200px; PADDING-TOP: 2px 
} 
#msviGlobalToolbar A { 
    FONT: 12px Verdana; COLOR: #ffffff; TEXT-DECORATION: none 
} 
.MSFlyoutPopup { 
    BORDER-RIGHT: #dddddd 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #dddddd 1px solid; PADDING-LEFT: 3px; Z-INDEX: 10; FILTER: progid:DXImageTransform.Microsoft.dropshadow(OffX=1,OffY=1,Color=#cccccc,Positive='true') alpha(opacity=90); PADDING-BOTTOM: 2px; BORDER-LEFT: #dddddd 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #dddddd 1px solid; FONT-FAMILY: "宋体"; BACKGROUND-COLOR: #1e77d3; TEXT-ALIGN: left 
} 
.MSFlyoutPopupHr { 
    BACKGROUND: #d0e0f0; MARGIN: 0px 11px 21px; HEIGHT: 1px 
} 
.TFlyPopupAnimate { 
    BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: gray 1px solid; DISPLAY: block; PADDING-LEFT: 0px; Z-INDEX: 1; VISIBILITY: hidden; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; BORDER-LEFT: gray 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: gray 1px solid; POSITION: absolute 
} 
</style> 
<SCRIPT language="javascript"> 
function TFly_Init(name, offsetLeft, offsetTop, alignment, anyIter, anyTime, staticHover, popupHover, popupLatency, hideLatency, onInit, onPopup, onHide) { 
    var TFly = document.getElementById(name); 
    TFly.DT = document.getElementById(name + "_Popup"); 
    TFly.F = document.getElementById(name + "_Anim"); 
    TFly.oX = offsetLeft; 
    TFly.oY = offsetTop; 
    TFly.alignment = alignment; 
    TFly.AnyIter = anyIter; 
    TFly.AnyTime = anyTime; 
    TFly.popupLatency = popupLatency; 
    TFly.hideLatency = hideLatency; 
    TFly.onPopup = onPopup; 
    TFly.onHide = onHide; 
    TFly.onmouseover = function() { 
        if (staticHover != '') { 
            TFly.className_ = TFly.className; 
            TFly.className = staticHover; 
        } 
        TFly_Popup(TFly, true); 
    } 
    TFly.onmouseout = function() { 
        if (staticHover != '') { 
            TFly.className = TFly.className_; 
        } 
        TFly_Popup(TFly, false); 
    } 
    if (document.all) { 
        TFly.onactivate = TFly.onmouseover; 
        TFly.ondeactivate = TFly.onmouseout; 
    } 
    else { 
        TFly.onfocus = TFly.onmouseover; 
        TFly.onblur = TFly.onmouseout; 
    } 
    TFly.DT.onmouseover = function() { 
        if (popupHover != '') { 
            TFly.DT.className_ = TFly.DT.className; 
            TFly.DT.className = popupHover; 
        } 
        TFly_Popup(TFly, true); 
    } 
    TFly.DT.onmouseout = function() { 
        if (popupHover != '') { 
            TFly.DT.className = TFly.DT.className_; 
        } 
        TFly_Popup(TFly, false); 
    } 
    TFly_CallClientFunction(onInit, TFly); 
} 
function TFly_CallClientFunction(name, TFly) { 
    if (name != null && name != "") 
        eval(name + "(TFly);"); 
} 
function TFly_SetPosition(TFly, obj) { 
    obj.style.top = TFly.oY + TFly.offsetHeight + "px"; 
    obj.style.left = TFly.oX + (TFly.offsetWidth - obj.offsetWidth ) * (1 + TFly.alignment) / 2 + "px"; 
} 
function TFly_Popup(TFly, value) { 
    if (TFly.timer != null) window.clearTimeout(TFly.timer); 
    if (value) { 
        if (TFly.status == "on") return; 
        var timeout = (TFly.status == "active") ? 0 : TFly.popupLatency; 
        if (TFly.AnyIter > 0 && TFly.AnyTime > 0) 
            TFly.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, true, TFly.F.curIter);}, timeout); 
        else 
            TFly.timer = window.setTimeout(function() {TFly_SetVisibility(TFly, true);}, timeout); 
        } 
    else { 
        if (TFly.status == "off") return; 
        var timeout = (TFly.status == "active") ? 0 : TFly.hideLatency; 
        if (TFly.AnyIter > 0 && TFly.AnyTime > 0) 
            TFly.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, false, TFly.F.curIter);}, timeout); 
        else 
            TFly.timer = window.setTimeout(function() {TFly_SetVisibility(TFly, false);}, timeout); 
    } 
} 
function TFly_SetVisibility(TFly, value) { 
    if (value == true) { 
        TFly_SetPosition(TFly, TFly.DT); 
        TFly.DT.style.visibility = "visible"; 
        TFly.style.zIndex = "999"; 
    } 
    else { 
        TFly.DT.style.visibility = "hidden"; 
        TFly.style.zIndex = "0"; 
        TFly.DT.style.left = "-10000px"; 
    } 
} 
function TFly_AnimateStart (TFly, inout, curIter) { 
    if (TFly.F.timer != null) window.clearTimeout(TFly.F.timer); 
    if (curIter == null) curIter=0; 
    if (TFly.status != "active") { 
        TFly.status = "active"; 
        TFly.F.style.visibility = "visible"; 
        TFly.DT.style.visibility = "hidden"; 
    } 
    if (curIter < 0 || curIter > TFly.AnyIter) { 
        TFly.F.curIter = (curIter < 1) ? 0 : TFly.AnyIter; 
        TFly.status = (TFly.F.curIter == TFly.AnyIter) ? "on": "off"; 
        TFly.F.style.visibility = "hidden"; 
        TFly_SetPosition(TFly, TFly.DT); 
        TFly.style.zIndex = (TFly.F.curIter == TFly.AnyIter) ? "999" : "0"; 
        if (TFly.F.curIter == TFly.AnyIter) { 
            TFly.status = "on"; 
            TFly_SetVisibility(TFly, true); 
            TFly_CallClientFunction(TFly.onPopup, TFly); 
        } 
        else { 
            TFly.status = "off"; 
            TFly_SetVisibility(TFly, false); 
            TFly_CallClientFunction(TFly.onHide, TFly); 
        } 
    } 
    else { 
        var per = curIter * (95 / TFly.AnyIter) + 5; 
        TFly.F.style.visibility = "hidden"; 
        TFly.F.style.width = TFly.DT.offsetWidth / 100 * per + "px"; 
        TFly.F.style.height = TFly.DT.offsetHeight / 100 * per + "px"; 
        TFly_SetPosition(TFly, TFly.F); 
        TFly.F.style.visibility = "visible"; 
        var timeout = (per == 100 ) ? 0 : TFly.AnyTime - (TFly.AnyTime / (TFly.AnyIter) * (curIter)); 
        curIter += (inout) ? 1 : -1; 
        TFly.F.timer = window.setTimeout(function() {TFly_AnimateStart(TFly, inout, curIter)}, timeout); 
        TFly.F.curIter = curIter; 
    } 
} 
</SCRIPT> 
<META content="MSHTML 6.00.3790.630" name=GENERATOR></HEAD> 
<BODY oncontextmenu="return false" onselectstart="return false"  
ondragstart="return false"> 
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0> 
  <TBODY> 
  <TR> 
    <TD  
    style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4B92D9', endColorStr='#CEDFF6', gradientType='1')"  
    width=150 height=20> 
      <TABLE cellSpacing=0 cellPadding=0 width=150 align=center border=0> 
        <TBODY> 
        <TR> 
          <TD style="WORD-BREAK: keep-all; PADDING-TOP: 3px" vAlign=center  
          align=middle><FONT style="COLOR: #ffffff; font-size:12px;">2007年06月14日 星期四 
            </TD></TR></TBODY></TABLE></TD> 
    <TD  
    style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#CEDFF6', endColorStr='#1E77D3', gradientType='1')"  
    align=right width="100%"> 
      <TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0> 
        <TBODY> 
        <TR> 
          <TD style="PADDING-RIGHT: 15px; PADDING-LEFT: 15px; PADDING-TOP: 3px"  
          vAlign=center align=middle width="100%"> 
            <MARQUEE id=gua onmouseover=gua.stop()  
            style="FONT-SIZE: 12px; COLOR: #ffffff" onmouseout=gua.start()  
            scrollAmount=3 scrollDelay=0 width="100%">4月份年休假人员名单公布     
            请大家尽快上交4月份交通燃油发票。     
            4月25日文艺晚会推迟至4月29日，请互相转告！    查看全部   </MARQUEE></TD></TR></TBODY></TABLE></TD> 
    <TD id=msviGlobalToolbar style="BACKGROUND-COLOR: #1e77d3"> 
      <TABLE cellSpacing=0 cellPadding=0 align=center border=0> 
        <TBODY> 
        <TR> 
          <TD class=MS_linksep>|</TD> 
          <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
          onmouseout="this.className='MS_link0'" noWrap> 
            我的账户 <IMG height=4 alt=""  
            src="http://www.microsoft.com/library/mnp/2/gif/ql.gif" width=11>  
             
            <TABLE border=0> 
              <TBODY> 
              <TR> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap colSpan=3>shundyang</TD></TR> 
              <TR> 
                <TD class=MSFlyoutPopupHr colSpan=3></TD></TR> 
              <TR> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>注销登录</TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>切换用户</TD></TR> 
              <TR> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>修改密码</TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>锁定界面</TD></TR> 
              <TR> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>我的文档</TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>基本资料</TD></TR></TBODY></TABLE> 
            </TD> 
          <TD class=MS_linksep>|</TD> 
          <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
          onmouseout="this.className='MS_link0'" noWrap>发布</TD> 
          <TD class=MS_linksep>|</TD> 
          <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
          onmouseout="this.className='MS_link0'" noWrap>论坛</TD> 
          <TD class=MS_linksep>|</TD> 
          <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
          onmouseout="this.className='MS_link0'" noWrap>管理</TD> 
          <TD class=MS_linksep>|</TD> 
          <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
          onmouseout="this.className='MS_link0'" noWrap> 
            链接 <IMG height=4 alt=""  
            src="http://www.microsoft.com/library/mnp/2/gif/ql.gif" width=11>  
             
            <TABLE border=0> 
              <TBODY> 
              <TR> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>培训信息</TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>企务直通车</TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>党务公开专栏</TD></TR> 
              <TR> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>文化人物</TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>网上论坛</TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>企业快讯</TD></TR> 
              <TR> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>招聘信息</TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>共青团</TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>招投标工程</TD></TR> 
              <TR> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>投诉与意见</TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>联系我们</TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>广告推广</TD></TR> 
              <TR> 
                <TD class=MSFlyoutPopupHr colSpan=5></TD></TR> 
              <TR> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap colSpan=3>网站地图</TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className='MS_link1'"  
                onmouseout="this.className='MS_link0'" noWrap>帮助</TD></TR></TBODY></TABLE> 
            </TD> 
          <TD class=MS_linksep>|</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> 
<SCRIPT> 
TFly_Init('MS_user', 0, 0, -1, 2, 60, 'MSFlyoutStaticHover_msdn', '', 100, 400, '', '', ''); 
TFly_Init('MS_shortcut', 0, 0, 1, 2, 60, 'MSFlyoutStaticHover_msdn', '', 100, 400, '', '', ''); 
</SCRIPT> 
</BODY></HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

又一个漂亮的导航栏的下拉菜单

人气教程排行