网页左上角滑出的菜单导航，相同QQ的停靠结果

发布时间：2018-08-24 22:37:17 所属栏目：创业来源：站长网

导读：悬浮在网页左上角的一个导航，鼠标颠末期动态滑出的菜单，当鼠标分开菜单地区时，菜单自动紧缩至顶部，有点相同腾讯QQ的窗口停靠结果，尽量菜单较量长远了，可是兼容性和行使代价都照旧不错的，保举进修和研究。演示： !DOCTYPE htmlhtmlheadmeta charset

　　悬浮在网页左上角的一个导航，鼠标颠末期动态滑出的菜单，当鼠标分开菜单地区时，菜单自动紧缩至顶部，有点相同腾讯QQ的窗口停靠结果，尽量菜单较量长远了，可是兼容性和行使代价都照旧不错的，保举进修和研究。

　　演示：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>左上角滑出的导航菜单，相同于QQ的顶部停靠结果</title> <style>#D1 { BACKGROUND-COLOR: lightgreen; BORDER-BOTTOM: white 2px outset; BORDER-LEFT: white 2px outset; BORDER-RIGHT: white 2px outset; BORDER-TOP: white 2px outset; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 300px; layer-background-color: lightgreen } a{font-size:9pt} a:link{text-decoration:none} a:hover{text-decoration:none;color:#FFFFFF} a:visited{text-decoration:none} .40pt{font-size:40pt;color:#3399ff;font-family:文鼎琥珀繁} </style> <body onload="init()"> <script language="javascript"> function menuIn() //菜单潜匿 { if(n4) { clearTimeout(out_ID) if( menu.top > menuH*-1+20+10 ) { menu.top -= 8 in_ID = setTimeout("menuIn()", 1) } else if( menu.top > menuH*-1+20 ) { menu.top-- in_ID = setTimeout("menuIn()", 1) } } else { clearTimeout(out_ID) if( menu.pixelTop > menuH*-1+20+10 ) { menu.pixelTop -= 8 in_ID = setTimeout("menuIn()", 1) } else if( menu.pixelTop > menuH*-1+20 ) { menu.pixelTop-- in_ID = setTimeout("menuIn()", 1) } } } function menuOut() //菜单表现 { if(n4) { clearTimeout(in_ID) if( menu.top < -10) { menu.top += 4 out_ID = setTimeout("menuOut()", 1) } else if( menu.top < 0) { menu.top++ out_ID = setTimeout("menuOut()", 1) } } else { clearTimeout(in_ID) if( menu.pixelTop < -10) { menu.pixelTop += 2 out_ID = setTimeout("menuOut()", 1) } else if( menu.pixelTop < 0 ) { menu.pixelTop++ out_ID = setTimeout("menuOut()", 1) } } } function fireOver() { clearTimeout(F_out) F_over = setTimeout("menuOut()", 10) } function fireOut() { clearTimeout(F_over) F_out = setTimeout("menuIn()", 10) } function init() { if(n4) { menu = document.D1 menuH = menu.document.height menu.top = menu.document.height*-1+20 menu.onmouseover = menuOut menu.onmouseout = menuIn menu.visibility = "visible" } else if(e4) { menu = D1.style menuH = D1.offsetHeight D1.style.pixelTop = D1.offsetHeight*-1+20 D1.onmouseover = fireOver D1.onmouseout = fireOut D1.style.visibility = "visible" } } F_over=F_out=in_ID=out_ID=null n4 = (document.layers)?1:0 e4 = (document.all)?1:0; </script> <div id="D1"> <table border="0" width="294"> <TBODY> <tr> <td align="middle" bgColor="#008000" rowSpan="2" width="14"><font color="#FFFFFF"> M<br> E<br> N<br> U</font></td> <td width="127"> <ul> <li><a href="javascript:void(0)"> 选项 1</a> </li> <li><a href="javascript:void(0)"> 选项 2</a> </li> <li><a href="javascript:void(0)"> 选项 3</a> </li> <li><a href="javascript:void(0)"> 选项 4</a> </li> <li><a href="javascript:void(0)"> 选项 5</a> </li> </ul> </td> <td width="133"> </td> </tr> </TBODY> </table> </div> </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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如