黑色风格的下拉菜单代码，位于网页右上顶部

发布时间：2018-08-29 11:56:31 所属栏目：政策来源：站长网

导读：黑色风格的下拉菜单代码，位于网页右上顶部。可以下拉，但貌似在 IE8 下有些小问题，火狐及其它浏览器则没事，这种风格以前在微软的官方网站见到过，完美一下，还是挺不错的菜单。示例： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ht

　　黑色风格的下拉菜单代码，位于网页右上顶部。可以下拉，但貌似在IE8下有些小问题，火狐及其它浏览器则没事，这种风格以前在微软的官方网站见到过，完美一下，还是挺不错的菜单。

　　示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>网页右上角菜单</title> </head> <body> <SCRIPT type=text/jscript> var eMenu,eItem,eExit,eDesk; function doMenu(){ eMenu.style.backgroundColor=eDesk.bgcolor; if ((eItem.offsetLeft+eMenu.offsetWidth-4)<eDesk.offsetWidth) eMenu.style.posLeft=eItem.offsetLeft; else eMenu.style.posLeft=eDesk.offsetWidth-eMenu.offsetWidth; eMenu.style.posTop=eDesk.offsetHeight+eDesk.offsetTop; eMenu.style.visibility='visible'; } function noMenu(){ if (eMenu && eMenu!=null) {eMenu.style.visibility='hidden'; eMenu.style.posLeft=0;eMenu.style.posTop=0;} eMenu=eItem=eExit=eDesk=null; } function doOver(){ if ("A"==event.srcElement.tagName.toUpperCase()) { eItem=event.srcElement.parentElement; eDesk=eItem.parentElement; eMenu=document.all(eItem.id.replace('item','menu')); if (eMenu && eMenu!=null) {eMenu.onmouseout=doExit;doMenu();} else noMenu();} } function doExit(){ eExit=event.toElement; if (eMenu==null || eExit==null) return; if (!eMenu.contains(eExit) && !eItem.contains(eExit)) noMenu(); } function doHome(i){ switch (i) { case 1 : window.external.AddFavorite('http://www.veryhuo.com',document.title);break; case 2 : window.external.AddChannel('http://www.163.com');break; default : event.srcElement.style.behavior='url(#default#homepage)';event.srcElement.setHomePage('http://www.baidu.com');break;} return false; } function doSel(){ var o=event.srcElement; if ('select'!=o.tagName.toLowerCase()) return; var s=o.options[o.selectedIndex].value; o.selectedIndex=0; if (s!='1') self.location=s; } function doWin(l,a,b){ w=window.open(l,'dhtmlet','toolbar=0'); var winx=Math.ceil((window.screen.width-a)/2); var winy=Math.ceil((window.screen.height-b)/2); w.resizeTo(a,b); w.moveTo(winx,winy); w.focus(); } </SCRIPT> <STYLE type=text/css>BODY { FONT-SIZE: 11px; OVERFLOW: hidden; FONT-FAMILY: tahoma,arial } TABLE { FONT-SIZE: 11px; OVERFLOW: hidden; FONT-FAMILY: tahoma,arial } BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000000; PADDING-TOP: 0px; BACKGROUND-COLOR: #ffffff; img: 0px } A { COLOR: #000000; TEXT-DECORATION: none } .desk { BACKGROUND: #000000; WIDTH: 100%; PADDING-TOP: 3px; HEIGHT: 20px } .menu { PADDING-RIGHT: 8px; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 8px; Z-INDEX: 8; VISIBILITY: hidden; PADDING-BOTTOM: 8px; WIDTH: 160px; LINE-HEIGHT: 15px; PADDING-TOP: 8px; POSITION: absolute } .desk SPAN { HEIGHT: 17px } .desk { COLOR: #ffffff; LETTER-SPACING: 1px } .menu { COLOR: #ffffff; LETTER-SPACING: 1px } .desk A { COLOR: #ffffff } .menu A { COLOR: #ffffff } .desk A:hover { COLOR: #ffcc00 } .menu A:hover { COLOR: #ffcc00 } #div1 { Z-INDEX: 2; LEFT: 0px; WIDTH: 295px; POSITION: absolute; TOP: 0px; HEIGHT: 60px } </STYLE> <DIV class=menu id=menu11><A href="#">Windows XP</A><BR><A href="#">Windows 2000</A><BR><A href="#">Windows ME</A><BR><A href="#">Windows 98 SE</A><BR><A href="#">Windows 98</A><BR><A href="#">Windows 95</A><BR><A href="#">Windows CE 3.0</A><BR><A href="#">eMbedded Windows NT</A></DIV> <DIV class=menu id=menu12><A href="#" target=_blank>jzzy.COM</A><BR><A href="#">这个效果是我做的啦～</A></DIV> <DIV class=menu id=menu14><A href="#">一定要支持我哦</A><BR><A href="#">一定要来我的网站捧场哦</A></DIV> <DIV class=menu id=menu15><A href="#jzzy/leoboard.cgi" target=_blank>一定要来我的论坛哦</A></DIV> <DIV class=menu id=menu16><A href="mailto:jzzy@sina.com">webmaster@jzzy.com</A><BR><A href="mailto:xuyu@transtar.com.cn">logo@jzzy.com</A><BR><A href="mailto:xuyu@transtar.com.cn">logo@jzzy.com</A></DIV> <DIV class=desk id=desk1 onmouseover=doOver() onmouseout=doExit() align=right noWrap bgcolor="#000000"><SPAN>︱</SPAN><SPAN id=item11><A onclick="return false;" href="#"> Windows家族产品 </A>︱</SPAN><SPAN id=item12><A onclick="return false;" href="#"> LookLook </A>︱</SPAN><SPAN id=item14><A onclick="return false;" href="#"> OH YES^_^ </A>︱</SPAN><SPAN id=item15><A onclick="return false;" href="#"> LookAgain </A>︱</SPAN><SPAN id=item16><A onclick="return false;" href="#"> 我的信箱 </A></SPAN></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>
提示：可修改后代码再运行!

（编辑：焦作站长网）

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