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中文网Original
- 2016-05-16 19:12:001038browse
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='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 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='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/.html">发布</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/.html">论坛</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/.html">管理</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)">链接 </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/.html">网站地图</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/.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('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>Statement：
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
Previous article：I really want to come up with some new ideas - three-dimensional cubes_javascript skillsNext article：I really want to come up with some new ideas - three-dimensional cubes_javascript skills
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills