将鼠标移上展开菜单，隐藏伸展的JS菜单代码

发布时间：2018-08-25 17:25:36 所属栏目：政策来源：站长网

导读：将鼠标移到文字链接上，向下展开菜单的效果，也可以叫作一个隐藏伸展的JS菜单代码，运用了JS技术，并结合了CSS共同实现的效果。本折叠菜单类似QQ可折叠的好友列表一样，不少人喜欢这种菜单。演示： !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transition

　　将鼠标移到文字链接上，向下展开菜单的效果，也可以叫作一个隐藏伸展的JS菜单代码，运用了JS技术，并结合了CSS共同实现的效果。本折叠菜单类似QQ可折叠的好友列表一样，不少人喜欢这种菜单。

　　演示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD> <title>移上展开的菜单</title> <META content="text/html; charset=gb2312" http-equiv=Content-Type> <STYLE type=text/css>.STYLE3 { FONT-SIZE: 9pt } * { PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px } .sam_tops_button { FLOAT: left } .sam_tops_a { FLOAT: left } BODY { SCROLLBAR-ARROW-COLOR: #006699; SCROLLBAR-FACE-COLOR: #dee3e7; PADDING-BOTTOM: 0px; BACKGROUND-COLOR: white; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; SCROLLBAR-DARKSHADOW-COLOR: #98aab1; FONT-FAMILY: 宋体; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #dee3e7; FONT-SIZE: 10.8pt; SCROLLBAR-TRACK-COLOR: #efefef; SCROLLBAR-3DLIGHT-COLOR: #d1d7dc; PADDING-TOP: 0px } TABLE { COLOR: black; FONT-SIZE: 10.8pt } A:link { COLOR: black; TEXT-DECORATION: none } A:visited { COLOR: black; TEXT-DECORATION: none } A:hover { TEXT-DECORATION: none } </STYLE> <SCRIPT language=javascript> function Mdown(it) { it.className = "FlowList_ContentTdDown"; } function Mover(it) { it.className = "FlowList_ContentTdOver"; } function Mout(it) { it.className = ""; } function HrefLink(sFlag,sPath) { //sFlag="0"; var w=window.screen.width-10; //var h=window.screen.height-55; var h = window.screen.availHeight-28; if (sFlag == '0') { var sStyle="width="+w+"px,height="+h+"px,left=0px,top=0px,scrollbars=yes,resizable=yes"; window.open(sPath,"",sStyle); } if (sFlag == '1') { var sStyle="dialogWidth:"+w+"px;dialogHeight:"+h+"px;center:yes;status:no"; showModalDialog(sPath,"",sStyle); } } function searchAction(){ document.forms("SubForm").submit(); } var falg=true; function show(){ document.getElementById("sam_tops").style.display="block"; } function hide(){ document.getElementById("sam_tops").style.display="none"; } </SCRIPT> <META name=GENERATOR content="MSHTML 9.00.8112.16440"></HEAD> <BODY bottomMargin=0 leftMargin=0 rightMargin=0 scroll=no topMargin=0> <TABLE border=0 cellSpacing=0 cellPadding=0 width=244 align=center> <TBODY> <TR> <TD background=/uploads/allimg/1202/left1b.jpg> <TABLE border=0 cellSpacing=0 cellPadding=0 align=center> <TBODY> <TR> <TD><IMG src="/uploads/allimg/1202/newTitle.jpg" width=244 height=25></TD></TR></TBODY></TABLE> <TABLE border=0 width="100%"> <TBODY> <TR> <TD height=25 width=2> </TD> <TD vAlign=bottom width=209 align=left><B>人事审批</B></TD></TR></TBODY></TABLE> <TABLE border=0 width="95%"> <TBODY> <TR> <TD height=30> </TD> <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=156');" width="33%"><SPAN class=STYLE3>员工调动</SPAN></TD> <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=195');" width="33%"><SPAN class=STYLE3>岗位编制</SPAN></TD> <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=197');" width="33%"><SPAN class=STYLE3>离职备案</SPAN></TD></TR> <TR> <TD height=30> </TD> <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=199');" width="33%"><SPAN class=STYLE3>培训申请</SPAN></TD> <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=158');" width="33%"><SPAN class=STYLE3><b>招聘</b>备案</SPAN></TD> <TD width="33%" align=center> </TD></TR></TBODY></TABLE> <TABLE border=0 width="100%"> <TBODY> <TR> <TD height=25 width=2> </TD> <TD vAlign=bottom width=209 align=left><B class=sam_tops_button onMouseOver="show()" onMouseOut="hide()">辅助办公</B></TD></TR></TBODY></TABLE> <DIV style="DISPLAY: none; margin-top:-3px;" id=sam_tops class=sam_tops_a onMouseOver="show()" onMouseOut="hide()"> <TABLE border=0 width="95%"> <TBODY> <TR> <TD height=30> </TD> <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=124');" width="33%"><SPAN class=STYLE3>业务日报</SPAN></TD> <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=71');" width="33%"><SPAN class=STYLE3>加班申请</SPAN></TD> <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=141');" width="33%"><SPAN class=STYLE3>名片印制</SPAN></TD></TR> <TR> <TD height=30> </TD> <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=34');" width="33%"><SPAN class=STYLE3>内部交流</SPAN></TD> <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=129');" width="33%"><SPAN class=STYLE3>督办联系</SPAN></TD> <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=27');" width="33%"><SPAN class=STYLE3>工作报告</SPAN></TD></TR> <TR> <TD height=30> </TD> <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=69');" width="33%"><SPAN class=STYLE3>请假外出</SPAN></TD> <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=152');" width="33%"><SPAN class=STYLE3>快递审批</SPAN></TD> <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=154');" width="33%"><SPAN class=STYLE3>资料领取</SPAN></TD></TR></TBODY></TABLE></DIV> </TD></TR></TABLE></BODY></HTML> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：许昌站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!