又一個漂亮的導航欄的下拉菜單

2019-11-21 02:02:01

字體：大中小

來源：轉載

供稿：網友

網上收集整合出來的，算是剽竊吧，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%"><A class=notes              href="note/note_scrollNote.asp?nid=32529"              target=_blank>4月份年休假人員名單公布</A>                 請大家盡快上交4月份交通燃油發票。                 4月25日文藝晚會推遲至4月29日，請互相轉告！    <A class=notes              href="note/note_scrollNoteAll.asp"              target=_blank>查看全部</A>   </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>             <div   class="iwvjtn8m0"   id=MS_user style="PADDING-BOTTOM: 2px; POSITION: relative"><A              href="javascript:void(0)">我的賬戶 </A><IMG height=4 alt=""              src="http://www.microsoft.com/library/mnp/2/gif/ql.gif" width=11>              <div   id="iwvjtn8m0"   class=MSFlyoutPopup id=MS_user_Popup              style="LEFT: -65534px; VISIBILITY: hidden; POSITION: absolute">             <TABLE border=0>               <TBODY>               <TR>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap colSpan=3><A                    href="javascript:void(0);">shundyang</A></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><A                    href="main/top.asp#">注銷登錄</A></TD>                 <TD class=MS_linksep>|</TD>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">切換用戶</A></TD></TR>               <TR>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">修改密碼</A></TD>                 <TD class=MS_linksep>|</TD>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">鎖定界面</A></TD></TR>               <TR>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">我的文檔</A></TD>                 <TD class=MS_linksep>|</TD>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">基本資料</A></TD></TR></TBODY></TABLE></DIV>             <div   id="iwvjtn8m0"   class=TFlyPopupAnimate id=MS_user_Anim></DIV></DIV></TD>           <TD class=MS_linksep>|</TD>           <TD class=MS_link0 onmouseover="this.className='MS_link1'"            onmouseout="this.className='MS_link0'" noWrap><A              href="main/pub/">發布</A></TD>           <TD class=MS_linksep>|</TD>           <TD class=MS_link0 onmouseover="this.className='MS_link1'"            onmouseout="this.className='MS_link0'" noWrap><A              href="main/bbs/">論壇</A></TD>           <TD class=MS_linksep>|</TD>           <TD class=MS_link0 onmouseover="this.className='MS_link1'"            onmouseout="this.className='MS_link0'" noWrap><A              href="main/admin/">管理</A></TD>           <TD class=MS_linksep>|</TD>           <TD class=MS_link0 onmouseover="this.className='MS_link1'"            onmouseout="this.className='MS_link0'" noWrap>             <div   class="iwvjtn8m0"   id=MS_shortcut              style="PADDING-BOTTOM: 2px; POSITION: relative"><A              href="javascript:void(0)">鏈接 </A><IMG height=4 alt=""              src="http://www.microsoft.com/library/mnp/2/gif/ql.gif" width=11>              <div   id="iwvjtn8m0"   class=MSFlyoutPopup id=MS_shortcut_Popup              style="LEFT: -65534px; VISIBILITY: hidden; POSITION: absolute">             <TABLE border=0>               <TBODY>               <TR>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">培訓信息</A></TD>                 <TD class=MS_linksep>|</TD>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">企務直通車</A></TD>                 <TD class=MS_linksep>|</TD>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">黨務公開專欄</A></TD></TR>               <TR>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">文化人物</A></TD>                 <TD class=MS_linksep>|</TD>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">網上論壇</A></TD>                 <TD class=MS_linksep>|</TD>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">企業快訊</A></TD></TR>               <TR>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">招聘信息</A></TD>                 <TD class=MS_linksep>|</TD>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">共青團</A></TD>                 <TD class=MS_linksep>|</TD>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">招投標工程</A></TD></TR>               <TR>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">投訴與意見</A></TD>                 <TD class=MS_linksep>|</TD>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">聯系我們</A></TD>                 <TD class=MS_linksep>|</TD>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/top.asp#">廣告推廣</A></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><A                    href="main/map/">網站地圖</A></TD>                 <TD class=MS_linksep>|</TD>                 <TD class=MS_link0 onmouseover="this.className='MS_link1'"                  onmouseout="this.className='MS_link0'" noWrap><A                    href="main/help/">幫助</A></TD></TR></TBODY></TABLE></DIV>             <div   id="iwvjtn8m0"   class=TFlyPopupAnimate id=MS_shortcut_Anim></DIV></DIV></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需刷新才能執行]

上一篇：特想搞點新的創意出來-立體方塊

下一篇：非常不錯的一個JS分頁效果代碼，值得研究