|
全仿真微软菜单 |
|
这个是我们制作的全仿真微软菜单，效果见上面， （其中前面两行菜单是完全效果，后面的为了您研究代码方便，做了简化），和微软IE5.0的菜单是不是很象呢您可以 按我下面的教程，完成一个自己的菜单。这个菜单主要通过css和javascipt以及层的结合使用。css控制菜单和导航栏的 显示格式，javascipt以及层控制了菜单的交替显示。 您可以在您的页面里将下面代码粘在<head> 和</head>之间：
<style type="text/css"><!-- A:link {text-decoration: none; color:#000000} A:visited {text-decoration: none; color: #000000} A:active {text-decoration: none; color: #000000} A:hover {text-decoration: underline; color: #000000;} body{font-size=9ptline-height: 20pt} TH{FONT-SIZE: 9pt} TD{ FONT-SIZE: 9pt} A.flashcat1 { TEXT-DECORATION: underline } A.flashcat2 { COLOR: black} A.flashcat2:hover {text-decoration: none; COLOR: black } A.flashcat2:active {text-decoration: none; COLOR: black } A.menutext { COLOR: black} A.menutext:hover {text-decoration: none; COLOR: white } A.menutext:active {text-decoration: none; COLOR: white } .menublue {text-decoration: none; COLOR: #FFFFFF; background-color: #000066} .outbar { BORDER-BOTTOM: white 2px solid; BORDER-LEFT: white 2px solid; BORDER-RIGHT: white 2px solid; BORDER-TOP: white 2px solid; CURSOR: nw-resize; FONT-SIZE: 9pt;FONT-FAMILY: "宋体"; LINE-HEIGHT: 9pt; TEXT-DECORATION: none ; border-color: #999999 #FFFFFF #FFFFFF #999999; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} .onbar { BORDER-BOTTOM: #003399 2px solid; BORDER-LEFT: #99ccff 2px solid; BORDER-RIGHT: #003399 2px solid; BORDER-TOP: #99ccff 2px solid; CURSOR: nw-resize; FONT-SIZE: 9pt;FONT-FAMILY: "宋体"; LINE-HEIGHT: 9pt; TEXT-DECORATION: none; ; border-color: #FFFFFF #999999 #999999 #FFFFFF; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} .none {text-decoration: none; color:#000000} .tableright { border-color: #FFFFFF #CCCCCC #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 2px; border-left-width: 1px} .menu { background-color: #CCCCCC; BORDER-BOTTOM: #999999 4px solid; BORDER-LEFT: #99999 4px solid; BORDER-RIGHT: #99999 4px solid; BORDER-TOP: #999999 4px solid; CURSOR: nw-resize; FONT-SIZE: 9pt;FONT-FAMILY: "宋体"; LINE-HEIGHT: 9pt; TEXT-DECORATION: none; ; border-color: #FFFFFF #666666 #666666 #FFFFFF; border-style: solid; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px} .none {text-decoration: none; color:#000000--> </style> <script language="JavaScript"> <!-- function MM_findObj(n, d) { //v3.0 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x; } function MM_showHideLayers() { //v3.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; } obj.visibility=v; } } //--> </script> 然后将以下代码粘在<body> 和</body>之间: <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"> <tr> <td class="tableright"> <hr size="2" > <table width="100%" border="0" cellpadding="0" cellspacing="0" class="tableright" height="2"> </table> </td> </tr> </table> <div id="Layer1" style="position:absolute; width:11px; height:29px; z-index:1; left: 2px; top: 4px" > <hr size="18" width="2" align="left"> </div> <div id="bar" style="position:absolute; width:400px; height:14px; z-index:1; left: 13px; top: 10px"> <table border="1" cellpadding="1" cellspacing="0" bordercolordark="#CCCCCC" bordercolorlight="#CCCCCC"> <tr> <td id=item1 language=JScript onMousedown="this.className='outbar'" onMouseOver="this.className='onbar'" onMouseOut="this.className='none'"> <div align="center"><a class=flashcat2 href="http://www.paladinland.com" target="_blank" onMouseOver="MM_showHideLayers('menu1','','show','menu2','','hide','menu3','','hide','menu5','','hide','menu4','','hide','vicemenu1','','hide')"> 侠客岛 </a></div> </td> <td id=item1 language=JScript onMousedown="this.className='outbar'" onMouseOver="this.className='onbar'" onMouseOut="this.className='none'"> <div align="center"><a class=flashcat2 href="http://www.paladinland.com/cgi-bin/Ultimate.cgi?action=intro&BypassCookie=true" target="_blank" onMouseOver="MM_showHideLayers('menu1','','hide','menu2','','show','menu3','','hide','menu5','','hide','menu4','','hide','vicemenu1','','hide')"> 侠客岛论坛 </a></div> </td> <td id=item1 language=JScript onMousedown="this.className='outbar'" onMouseOver="this.className='onbar'" onMouseOut="this.className='none'"> <div align="center"><a class=flashcat2 href="../tutors.htm" target="_blank" onMouseOver="MM_showHideLayers('menu1','','hide','menu2','','hide','menu3','','show','menu5','','hide','menu4','','hide','vicemenu1','','hide')"> 侠客密籍 </a></div> </td> <td id=item1 language=JScript onMousedown="this.className='outbar'" onMouseOver="this.className='onbar'" onMouseOut="this.className='none'"> <div align="center"><a class=flashcat2 href="../codes.htm" target="_blank" onMouseOver="MM_showHideLayers('menu1','','hide','menu2','','hide','menu3','','hide','menu5','','hide','menu4','','show','vicemenu1','','hide')"> 侠客代码 </a></div> </td> <td id=item1 language=JScript onMousedown="this.className='outbar'" onMouseOver="this.className='onbar'" onMouseOut="this.className='none'"> <div align="center"><a class=flashcat2 href="../resorce.htm" target="_blank" onMouseOver="MM_showHideLayers('menu1','','hide','menu2','','hide','menu3','','hide','menu4','','hide','menu5','','show','vicemenu1','','hide')"> 侠客资源 </a></div> </td> <td id=item1 language=JScript onMousedown="this.className='outbar'" onMouseOver="this.className='onbar'" onMouseOut="this.className='none'"> <div align="center"><a class=flashcat2 href="../works.htm" target="_blank" onMouseOver="MM_showHideLayers('menu1','','hide','menu2','','hide','menu3','','hide','menu5','','hide','menu4','','hide','vicemenu1','','hide')"> 侠客作品 </a></div> </td> <td> </td> </tr> </table> </div> <div id="menu1" style="position:absolute; width:134px; height:103px; z-index:2; left: 14px; top: 27px; visibility: hidden" class="menu"> <table border="0" width="100%" cellpadding="2" cellspacing="0"> <tr> <td id=item2 language=JScript onMousedown="this.className='menublue'" onMouseOver="this.className='menublue'" onMouseOut="this.className='none'"> <a class=menutext href="#" onMouseOver="MM_showHideLayers('menu2','','hide','menu3','','hide','menu5','','hide','menu4','','hide','vicemenu1','','show')"> 侠客岛各派掌门 <font size="1">▲</font> </a> </td> </tr> <tr> <td id=item2 language=JScript onMousedown="this.className='menublue'" onMouseOver="this.className='menublue'" onMouseOut="this.className='none'"> <a class=menutext href="../aboutus.htm" target="_blank" onMouseOver="MM_showHideLayers('vicemenu1','','hide')"> 关于侠客岛 </a> </td> </tr> <tr> <td> <hr> </td> </tr> <tr> <td id=item2 language=JScript onMousedown="this.className='menublue'" onMouseOver="this.className='menublue'" onMouseOut="this.className='none'"> <a class=menutext href="mailto:[email protected]"> 联系我们 </a> </td> </tr> <tr> <td id=item2 language=JScript onMousedown="this.className='menublue'" onMouseOver="this.className='menublue'" onMouseOut="this.className='none'"> <a class=menutext href="mailto:[email protected]?subect=join"> 加盟 </a> </td> </tr> <tr> <td id=item2 language=JScript onMousedown="this.className='menublue'" onMouseOver="this.className='menublue'" onMouseOut="this.className='none'"> <a class=menutext href="mailto:[email protected]?subect=donate"> 投稿 </a> </td> </tr> </table> </div> <div id="menu2" style="position:absolute; width:134px; height:176px; z-index:2; left: 56px; top: 27px; visibility: hidden" class="menu"> <table border="0" width="100%" cellpadding="2" cellspacing="0"> <tr> <td id=item2 language=JScript onMouseDown="this.className='menublue'" onMouseOver="this.className='menublue'" onMouseOut="this.className='none'"> <a class=menutext href="http://www.paladinland.com/cgi-bin/forumdisplay.cgi?action=topics&forum=网页制造演武场&number=1&DaysPrune=10&LastLogin=" target="_blank"> 网页制作演武场 </a> </td> </tr> <tr> <td id=item2 language=JScript onMouseDown="this.className='menublue'" onMouseOver="this.className='menublue'" onMouseOut="this.className='none'"> <a class=menutext href="http://www.paladinland.com/cgi-bin/forumdisplay.cgi?action=topics&forum=flash小筑&number=2&DaysPrune=10&LastLogin=" target="_blank"> flash小筑 </a> </td> </tr> <tr> <td id=item2 language=JScript onMouseDown="this.className='menublue'" onMouseOver="this.className='menublue'" onMouseOut="this.className='none'"> <a class=menutext href="http://www.paladinland.com/cgi-bin/forumdisplay.cgi?action=topics&forum=后台技术分舵&number=3&DaysPrune=10&LastLogin=" target="_blank"> 后台技术分舵 </a></td> </tr> <tr> <td id=item2 language=JScript onMouseDown="this.className='menublue'" onMouseOver="this.className='menublue'" onMouseOut="this.className='none'"> <a class=menutext href="http://www.paladinland.com/cgi-bin/forumdisplay.cgi?action=topics&forum=平面雅居&number=4&DaysPrune=10&LastLogin="target="_blank"> 平面雅居 </a> </td> </tr> <tr> <td id=item2 language=JScript onMouseDown="this.className='menublue'" onMouseOver="this.className='menublue'" onMouseOut="this.className='none'"> <a class=menutext href="http://www.paladinland.com/cgi-bin/forumdisplay.cgi?action=topics&forum=3D山庄&number=5&DaysPrune=10&LastLogin=" target="_blank"> 3D山庄 </a> </td> </tr> <tr> <td id=item2 language=JScript onMouseDown="this.className='menublue'" onMouseOver="this.className='menublue'" onMouseOut="this.className='none'"><a class=menutext href="http://www.paladinland.com/cgi-bin/forumdisplay.cgi?action=topics&forum=多媒体一族&number=6&DaysPrune=10&LastLogin=" target="_blank"> 多媒体一族 </a></td> </tr> <tr> <td id=item2 language=JScript onMouseDown="this.className='menublue'" onMouseOver="this.className='menublue'" onMouseOut="this.className='none'"><a class=menutext href="http://www.paladinland.com/cgi-bin/forumdisplay.cgi?action=topics&forum=兵器谱&number=7&DaysPrune=10&LastLogin=" target="_blank"> 兵器谱 </a> </td> </tr> <tr> <td id=item2 language=JScript onMouseDown="this.className='menublue'" onMouseOver="this.className='menublue'" onMouseOut="this.className='none'"><a class=menutext href="http://www.paladinland.com/cgi-bin/forumdisplay.cgi?action=topics&forum=作品与资源&number=8&DaysPrune=10&LastLogin=" target="_blank"> 作品与资源 </a> </td> </tr> <tr> <td id=item2 language=JScript onMouseDown="this.className='menublue'" onMouseOver="this.className='menublue'" onMouseOut="this.className='none'"><a class=menutext href="http://www.paladinland.com/cgi-bin/forumdisplay.cgi?action=topics&forum=灌水腊八粥&number=9&DaysPrune=10&LastLogin=" target="_blank"> 灌水腊八粥 </a> </td> </tr> <tr> <td id=item2 language=JScript onMouseDown="this.className='menublue'" onMouseOver="this.className='menublue'" onMouseOut="this.className='none'"><a class=menutext href="http://www.paladinland.com/cgi-bin/forumdisplay.cgi?action=topics&forum=侠客岛聚义厅&number=10&DaysPrune=10&LastLogin=" target="_blank"> 侠客岛聚义厅 </a> </td> </tr> <tr> <td id=item2 language=JScript onMouseDown="this.className='menublue'" onMouseOver="this.className='menublue'" onMouseOut="this.className='none'"><a class=menutext href="http://www.paladinland.com/cgi-bin/Ultimate.cgi?action=agree" target="_blank"> 注册会员 </a> </td> </tr> </table> </div> <div id="menu3" style="position:absolute; width:134px; height:104px; z-index:2; left: 121px; top: 27px; visibility: hidden" class="menu"> <table width="100%" border="0"> <tr> <td> <p> <script language="JavaScript" src="../../Library/tutorbar.js"> </script> </p> <p> 本菜单不是效果展示</p> </td> </tr> </table> </div> <div id="menu4" style="position:absolute; width:134px; height:104px; z-index:2; left: 169px; top: 27px; visibility: hidden" class="menu"> <table width="100%" border="0"> <tr> <td> <p> <script language="JavaScript" src="../../Library/codebar.js"> </script> </p> <p> 本菜单不是效果展示</p> </td> </tr> </table> <p> </p> </div> <div id="menu5" style="position:absolute; width:134px; height:104px; z-index:2; left: 222px; top: 27px; visibility: hidden" class="menu"> <table width="100%" border="0"> <tr> <td> <p> <script language="JavaScript" src="../../Library/resorcebar.js"> </script> </p> <p> 本菜单不是效果展示</p> </td> </tr> </table> </div> <div id="vicemenu1" style="position:absolute; width:134px; height:104px; z-index:2; left: 143px; top: 26px; visibility: hidden" class="menu"> <table width="100%" border="0"> <tr> <td> <p> <script language="JavaScript" src="../js/mod.js"> </script> </p> <p> 本菜单不是效果展示</p> </td> </tr> </table> </div> 然后修改各处连接改为你自己的网址，这样你的全仿真微软菜单，就完成了。 接下来我们来深入的讨论全仿真微软菜单所涉及到的一些技巧，这样您可以自如地修改我的代码，形成您自己的菜单，首先这部分有一定深度，因此我假设您已经掌握了部分css和javascipt以及层的结合使用的知识。 菜单效果 1、您请注意微软IE5.0的菜单是按下去后弹出菜单。而我的因为做了连接，所以改为鼠标经过弹出菜单。您可以将最上方导航栏的<a href=...改为<a href="#">,然后将该处连接中onMouseOver="MM_showHideLayer....改为onclick="MM.... 2、注意微软IE5.0的菜单是在任意页面上点击一下，再隐藏已经出现的菜单，因此在您的页面的上部菜单宽度等宽，高度和下拉菜单稍长的范围内设置javascipt使所有下拉菜单层隐藏，您可用dreamweaver的behavior实现。 3、为了达到和微软IE5.0的菜单，使用css多用了border的设置，根据光照是左上方投入，因此四边的颜色是上左白，右下黑，宽2pix. |