Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Another beautiful drop-down menu for the navigation bar_Navigation menu

Another beautiful drop-down menu for the navigation bar_Navigation menu

PHP中文网
Release： 2016-05-16 19:12:00
Original
1032 people have browsed it

It was collected and integrated online. It can be considered plagiarism. I have used it under IE6 and have not tried it on others. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<!--    by shundyang    --> 
<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=&#39;true&#39;) 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 != &#39;&#39;) { 
            TFly.className_ = TFly.className; 
            TFly.className = staticHover; 
        } 
        TFly_Popup(TFly, true); 
    } 
    TFly.onmouseout = function() { 
        if (staticHover != &#39;&#39;) { 
            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 != &#39;&#39;) { 
            TFly.DT.className_ = TFly.DT.className; 
            TFly.DT.className = popupHover; 
        } 
        TFly_Popup(TFly, true); 
    } 
    TFly.DT.onmouseout = function() { 
        if (popupHover != &#39;&#39;) { 
            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=&#39;#4B92D9&#39;, endColorStr=&#39;#CEDFF6&#39;, gradientType=&#39;1&#39;)"  
    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=&#39;#CEDFF6&#39;, endColorStr=&#39;#1E77D3&#39;, gradientType=&#39;1&#39;)"  
    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=&#39;MS_link1&#39;"  
          onmouseout="this.className=&#39;MS_link0&#39;" noWrap> 
            <DIV 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 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=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" 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=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">注销登录</A></TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">切换用户</A></TD></TR> 
              <TR> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">修改密码</A></TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">锁定界面</A></TD></TR> 
              <TR> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">我的文档</A></TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">基本资料</A></TD></TR></TBODY></TABLE></DIV> 
            <DIV class=TFlyPopupAnimate id=MS_user_Anim></DIV></DIV></TD> 
          <TD class=MS_linksep>|</TD> 
          <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
          onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
            href="main/pub/.html">发布</A></TD> 
          <TD class=MS_linksep>|</TD> 
          <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
          onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
            href="main/bbs/.html">论坛</A></TD> 
          <TD class=MS_linksep>|</TD> 
          <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
          onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
            href="main/admin/.html">管理</A></TD> 
          <TD class=MS_linksep>|</TD> 
          <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
          onmouseout="this.className=&#39;MS_link0&#39;" noWrap> 
            <DIV 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 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=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">培训信息</A></TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">企务直通车</A></TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">党务公开专栏</A></TD></TR> 
              <TR> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">文化人物</A></TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">网上论坛</A></TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">企业快讯</A></TD></TR> 
              <TR> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">招聘信息</A></TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">共青团</A></TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">招投标工程</A></TD></TR> 
              <TR> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">投诉与意见</A></TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/top.asp#">联系我们</A></TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" 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=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap colSpan=3><A  
                  href="main/map/.html">网站地图</A></TD> 
                <TD class=MS_linksep>|</TD> 
                <TD class=MS_link0 onmouseover="this.className=&#39;MS_link1&#39;"  
                onmouseout="this.className=&#39;MS_link0&#39;" noWrap><A  
                  href="main/help/.html">帮助</A></TD></TR></TBODY></TABLE></DIV> 
            <DIV class=TFlyPopupAnimate id=MS_shortcut_Anim></DIV></DIV></TD> 
          <TD class=MS_linksep>|</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> 
<SCRIPT> 
TFly_Init(&#39;MS_user&#39;, 0, 0, -1, 2, 60, &#39;MSFlyoutStaticHover_msdn&#39;, &#39;&#39;, 100, 400, &#39;&#39;, &#39;&#39;, &#39;&#39;); 
TFly_Init(&#39;MS_shortcut&#39;, 0, 0, 1, 2, 60, &#39;MSFlyoutStaticHover_msdn&#39;, &#39;&#39;, 100, 400, &#39;&#39;, &#39;&#39;, &#39;&#39;); 
</SCRIPT> 
</BODY></HTML>
Copy after login


Related labels：
又一个漂亮的导航栏的下拉菜单
source：php.cn
Previous article：I really want to come up with some new ideas - three-dimensional cubes_javascript skills Next article：A small script to load js files_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Center align navigation bar Hi, I'm trying to set up a navigation bar in the middle at the top of the page. I've tried...
From 2024-04-02 09:56:33
0
2
306
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template