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

更新时间：2007年06月26日 00:00:00 投稿：mdxy-dxy

这篇文章主要介绍了又一个漂亮的导航栏的下拉菜单,需要的朋友可以参考下

网上收集整合出来的，算是剽窃吧，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>&nbsp;&nbsp;&nbsp;             请大家尽快上交4月份交通燃油发票。&nbsp;&nbsp;&nbsp;             4月25日文艺晚会推迟至4月29日，请互相转告！&nbsp;&nbsp;&nbsp; <A class=notes             href="note/note_scrollNoteAll.asp"             target=_blank>查看全部</A>&nbsp;&nbsp;&nbsp;</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 id=MS_user style="PADDING-BOTTOM: 2px; POSITION: relative"><A             href="javascript:void(0)">我的账户&nbsp;</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=’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 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 id=MS_shortcut             style="PADDING-BOTTOM: 2px; POSITION: relative"><A             href="javascript:void(0)">链接&nbsp;</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=’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 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 竖直伸缩菜单(百度)
这个菜单是从百度推广扒下来的，去掉了CSS文件，仅保留核心的Js动作，点击每一项的标题，可展开二级的子项菜单，想用的朋友自己添加样式，这样更能符合你网站的主题。
2010-03-03
javascript 代码简单的管理菜单
2008-05-05
CSS JavaScript 实现菜单功能改进版
通过一个HTML页面简单的实现了菜单功能。但是实际开发当中，如果菜单栏有很多项，频繁的修改HTML，会很繁琐，也容易出错。
2008-12-12
js无限级折叠菜单精简版
一个简单的js无限级折叠菜单，这里只列出JS版本的，JQUERY版本的可以到作者发的帖子上看，权当抛砖引玉了。
2011-03-03
JavaScript CSS菜单功能改进版
在上一篇《JavaScript css 实现菜单功能》通过一个HTML页面简单的实现了菜单功能。但是实际开发当中，如果菜单栏有很多项，频繁的修改HTML，会很繁琐，也容易出错。
2008-12-12
JavaScript CSS创建右击菜单效果代码
右击菜单效果
2008-12-12
yahoo首页伸缩效果代码
js伸缩效果代码
2008-05-05
msn上的tab功能Firefox对childNodes处理的一个BUG
今天公司用到一个tab功能发现 msn上的不错，但是在firefox兼容不好，msn他们的方法就是用了不少的div包含，不过网上有高人解决了。
2008-01-01
css+js下拉菜单
js+css实现的简单的下来菜单。兼容性好。
2009-05-05
JavaScript 下拉菜单实现代码
利用css+js实现的下拉菜单。通过getElementsByTagName获取ul,隐藏显示。
2009-05-05

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具