zoukankan
html css js c++ java
几个js菜单[载]
菜单一
HTML代码
<!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=utf-8" /> <title> ĵ</title> <style> body { margin: 7px; font:12px Verdana, Arial, Helvetica, sans-serif; } * { list-style-type: none; margin: 0px; padding: 0px; border: thin none; } #nav { position: absolute; font-size: 9px; opacity: 0.8; } #nav a { display: block; 100px; height: 15px; padding: 3px 5px 12px; background: #666; color: #fff; text-decoration: none; } #nav a:hover { background: #333; } #nav li { 120px; height:30px; overflow:hidden; background: #ccc; padding-bottom: 3px; } #nav ul { position: absolute; margin-left: 110px; margin-top: -30px; } html>body #nav ul { margin-left: 119px; margin-top: -39px; } #nav ul { display: none; } #nav li.show ul { display: block; } #nav li.show li ul { display: none; } #nav li li.show ul { display: block; } </style> <script language="javascript" type="text/javascript"> function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "show"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)show\\b"), ""); } } } window.onload=menuFix; </script> </head> <body> <ul id="nav"> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a>.</li> <li><a href="#">nav item</a>.</li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li> </ul> </body> </html>
菜单二
HTML代码
<script language=javascript> var mmenus = new Array(); var misShow = new Boolean(); misShow=false; var misdown = new Boolean(); misdown=false; var mnumberofsub=0; var musestatus=false; var mpopTimer = 0; mmenucolor='Menu'; mfontcolor='MenuText'; mmenuoutcolor='#B5BED6'; mmenuincolor='#B5BED6'; mmenuoutbordercolor='#000000'; mmenuinbordercolor='#000000'; mmidoutcolor='#8D8A85'; mmidincolor='#8D8A85'; mmenuovercolor='MenuText'; mitemedge='1'; msubedge='0'; mmenuunitwidth=100; mmenuitemwidth=110; mmenuheight=25; mmenuwidth='100%'; mmenuadjust=0; mmenuadjustV=0; mfonts='font-family: 宋体; font-size: 9pt; color: MenuText; ';mcursor='default'; function stoperror(){ return true; } window.onerror=stoperror; function mpopOut() { mpopTimer = setTimeout('mallhide()', 500); } function getReal(el, type, value) { temp = el; while ((temp != null) && (temp.tagName != "BODY")) { if (eval("temp." + type) == value) { el = temp; return el; } temp = temp.parentElement; } return el; } function mMenuRegister(menu) { mmenus[mmenus.length] = menu return (mmenus.length - 1) } function mMenuItem(caption,command,target,isline,statustxt,level,img,sizex,sizey,pos){ this.items = new Array(); this.caption=caption; this.command=command; this.target=target; this.isline=isline; this.statustxt=statustxt; if(level!=null){mnumberofsub++; this.hasc=mnumberofsub;} this.level=level; this.img=img; this.sizex=sizex; this.sizey=sizey; this.pos=pos; } function mMenu(caption,command,target,img,sizex,sizey,pos){ this.items = new Array(); this.caption=caption; this.command=command; this.target=target; this.img=img; this.sizex=sizex; this.sizey=sizey; this.pos=pos; this.id=mMenuRegister(this); } function mMenuAddItem(item) { this.items[this.items.length] = item item.parent = this.id; this.children=true; } mMenu.prototype.addItem = mMenuAddItem; mMenuItem.prototype.addsubItem = mMenuAddItem; function mtoout(src){ src.style.borderLeftColor=mmenuoutbordercolor; src.style.borderRightColor=mmenuinbordercolor; src.style.borderTopColor=mmenuoutbordercolor; src.style.borderBottomColor=mmenuinbordercolor; src.style.backgroundColor=mmenuoutcolor; src.style.color=mmenuovercolor; } function mtoin(src){ src.style.borderLeftColor=mmenuinbordercolor; src.style.borderRightColor=mmenuoutbordercolor; src.style.borderTopColor=mmenuinbordercolor; src.style.borderBottomColor=mmenuoutbordercolor; src.style.backgroundColor=mmenuincolor; src.style.color=mmenuovercolor; } function mnochange(src){ src.style.borderLeftColor=mmenucolor; src.style.borderRightColor=mmenucolor; src.style.borderTopColor=mmenucolor; src.style.borderBottomColor=mmenucolor; src.style.backgroundColor=''; src.style.color=mfontcolor; } function mallhide(){ for(var nummenu=0;nummenu<mmenus.length;nummenu++){ var themenu=document.all['mMenu'+nummenu] var themenudiv=document.all['mmenudiv'+nummenu] mnochange(themenu); mmenuhide(themenudiv); } for(nummenu=1;nummenu<=mnumberofsub;nummenu++){ var thesub=document.all['msubmenudiv'+nummenu] msubmenuhide(thesub); mnochange(document.all['mp'+nummenu]); document.all["mitem"+nummenu].style.color=mfontcolor; } } function mmenuhide(menuid){ menuid.style.visibility='hidden'; misShow=false; } function msubmenuhide(menuid){ menuid.style.visibility='hidden'; } function mmenushow(menuid,pid){ menuid.style.left=mposflag.offsetLeft+pid.offsetLeft+mmenuadjust;menuid.style.top=mposflag.offsetTop+mmenutable.offsetHeight+mmenuadjustV; if(mmenuitemwidth+parseInt(menuid.style.left)>document.body.clientWidth+document.body.scrollLeft) menuid.style.left=document.body.clientWidth+document.body.scrollLeft-mmenuitemwidth; menuid.style.visibility='visible'; misShow=true; } function mshowsubmenu(menuid,pid,rid){ menuid.style.left=pid.offsetWidth+rid.offsetLeft; menuid.style.top=pid.offsetTop+rid.offsetTop-3; if(mmenuitemwidth+parseInt(menuid.style.left)>document.body.clientWidth+document.body.scrollLeft) menuid.style.left=document.body.clientWidth+document.body.scrollLeft-mmenuitemwidth; menuid.style.visibility='visible'; } function mmenu_over(menuid,x){ toel = getReal(window.event.toElement, "className", "coolButton"); fromel = getReal(window.event.fromElement, "className", "coolButton"); if (toel == fromel) return; if(x==5){ misShow = false; mallhide(); mtoout(eval("mMenu"+x)); }else{ if(!misShow){mtoout(eval("mMenu"+x));}else{ mallhide(); mtoin(eval("mMenu"+x)); mmenushow(menuid,eval("mMenu"+x)); } } clearTimeout(mpopTimer); } function mmenu_out(x){ toel = getReal(window.event.toElement, "className", "coolButton"); fromel = getReal(window.event.fromElement, "className", "coolButton"); if (toel == fromel) return; if (misShow){ mtoin(eval("mMenu"+x)); }else{ mnochange(eval("mMenu"+x)); } mpopOut() } function mmenu_down(menuid,x){ if(misShow){ mmenuhide(menuid); mtoout(eval("mMenu"+x)); } else{ mtoin(eval("mMenu"+x)); mmenushow(menuid,eval("mMenu"+x)); misdown=true; } } function mmenu_up(){ misdown=false; } function mmenuitem_over(menuid,item,x,j,i){ toel = getReal(window.event.toElement, "className", "coolButton"); fromel = getReal(window.event.fromElement, "className", "coolButton"); if (toel == fromel) return; srcel = getReal(window.event.srcElement, "className", "coolButton"); for(nummenu=1;nummenu<=mnumberofsub;nummenu++){ var thesub=document.all['msubmenudiv'+nummenu] if(!(menuid==thesub||menuid.style.tag>=thesub.style.tag)){ msubmenuhide(thesub); mnochange(document.all['mp'+nummenu]); document.all["mitem"+nummenu].style.color=mfontcolor; } } if(item)document.all["mitem"+item].style.color=mmenuovercolor; if(misdown||item){ mtoin(srcel); } else{ mtoout(srcel); } if(x==-1)mthestatus=eval("msub"+j).items[i].statustxt; if(j==-1)mthestatus=mmenus[x].items[i].statustxt; if(mthestatus!=""){ musestatus=true; window.status=mthestatus; } clearTimeout(mpopTimer); } function mmenuitem_out(hassub){ toel = getReal(window.event.toElement, "className", "coolButton"); fromel = getReal(window.event.fromElement, "className", "coolButton"); if (toel == fromel) return; srcel = getReal(window.event.srcElement, "className", "coolButton"); if(!hassub)mnochange(srcel); if(musestatus)window.status=""; mpopOut() } function mmenuitem_down(){ srcel = getReal(window.event.srcElement, "className", "coolButton"); mtoin(srcel) misdown=true; } function mmenuitem_up(){ srcel = getReal(window.event.srcElement, "className", "coolButton"); mtoout(srcel) misdown=false; } function mexec3(j,i){ var cmd; if(eval("msub"+j).items[i].target=="blank"){ cmd = "window.open('"+eval("msub"+j).items[i].command+"')"; }else{ cmd = eval("msub"+j).items[i].target+".location=\""+eval("msub"+j).items[i].command+"\""; } eval(cmd); } function mexec2(x){ var cmd; if(mmenus[x].target=="blank"){ cmd = "window.open('"+mmenus[x].command+"')"; }else{ cmd = mmenus[x].target+".location=\""+mmenus[x].command+"\""; } eval(cmd); } function mexec(x,i){ var cmd; if(mmenus[x].items[i].target=="blank"){ cmd = "window.open('"+mmenus[x].items[i].command+"')"; }else{ cmd = mmenus[x].items[i].target+".location=\""+mmenus[x].items[i].command+"\""; } eval(cmd); } function mbody_click(){ if (misShow){ srcel = getReal(window.event.srcElement, "className", "coolButton"); for(var x=0;x<=mmenus.length;x++){ if(srcel.id=="mMenu"+x) return; } for(x=1;x<=mnumberofsub;x++){ if(srcel.id=="mp"+x) return; } mallhide(); } } document.onclick=mbody_click; function mwritetodocument(){ var mwb=1; var stringx='<div id="mposflag" style="position:absolute;"></div><table id=mmenutable border=0 cellpadding=3 cellspacing=2 width='+mmenuwidth+' height='+mmenuheight+' bgcolor='+mmenucolor+ ' onselectstart="event.returnValue=false"'+ ' style="cursor:'+mcursor+';'+mfonts+ ' border-left: '+mwb+'px solid '+mmenuoutbordercolor+';'+ ' border-right: '+mwb+'px solid '+mmenuinbordercolor+'; '+ 'border-top: '+mwb+'px solid '+mmenuoutbordercolor+'; '+ 'border-bottom: '+mwb+'px solid '+mmenuinbordercolor+'; padding:0px"><tr>' for(var x=0;x<mmenus.length;x++){ var thismenu=mmenus[x]; var imgsize=""; if(thismenu.sizex!="0"||thismenu.sizey!="0")imgsize=" width="+thismenu.sizex+" height="+thismenu.sizey; var ifspace=""; if(thismenu.caption!="")ifspace=" "; stringx += "<td nowrap class=coolButton id=mMenu"+x+" style='border: "+mitemedge+"px solid "+mmenucolor+ "' width="+mmenuunitwidth+"px onmouseover=mmenu_over(mmenudiv"+x+ //"' onmouseover=mmenu_over(mmenudiv"+x+ ","+x+") onmouseout=mmenu_out("+x+ ") onmousedown=mmenu_down(mmenudiv"+x+","+x+")"; if(thismenu.command!=""){ stringx += " onmouseup=mmenu_up();mexec2("+x+");"; }else{ stringx += " onmouseup=mmenu_up()"; } if(thismenu.pos=="0"){ stringx += " align=center><img align=absmiddle src='"+thismenu.img+"'"+imgsize+">"+ifspace+thismenu.caption+"</td>"; }else if(thismenu.pos=="1"){ stringx += " align=center>"+thismenu.caption+ifspace+"<img align=absmiddle src='"+thismenu.img+"'"+imgsize+"></td>"; }else if(thismenu.pos=="2"){ stringx += " align=center background='"+thismenu.img+"'> "+thismenu.caption+" </td>"; }else{ stringx += " align=center> "+thismenu.caption+" </td>"; } stringx += ""; } stringx+="<td width=*> </td></tr></table>"; for(var x=0;x<mmenus.length;x++){ thismenu=mmenus[x]; if(x==5){ stringx+='<div id=mmenudiv'+x+' style="visiable:none"></div>'; }else{ stringx+='<div id=mmenudiv'+x+ ' style="cursor:'+mcursor+';position:absolute;'+ ''+mmenuitemwidth+'px; z-index:'+(x+100); if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){ stringx+=';border-left: 1px solid '+mmidoutcolor+ ';border-top: 1px solid '+mmidoutcolor;} stringx+=';border-right: 1px solid '+mmenuinbordercolor+ ';border-bottom: 1px solid '+mmenuinbordercolor+';visibility:hidden" onselectstart="event.returnValue=false">\n'+ '<table width="100%" border="0" height="100%" align="center" cellpadding="0" cellspacing="2" '+ 'style="'+mfonts+' border-left: 1px solid '+mmenuoutbordercolor; if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){ stringx+=';border-right: 1px solid '+mmidincolor+ ';border-bottom: 1px solid '+mmidincolor;} stringx+=';border-top: 1px solid '+mmenuoutbordercolor+ ';padding: 4px" bgcolor='+mmenucolor+'>\n' for(var i=0;i<thismenu.items.length;i++){ var thismenuitem=thismenu.items[i]; var imgsize=""; if(thismenuitem.sizex!="0"||thismenuitem.sizey!="0")imgsize=" width="+thismenuitem.sizex+" height="+thismenuitem.sizey; var ifspace=""; if(thismenu.caption!="")ifspace=" "; if(thismenuitem.hasc!=null){ stringx += "<tr><td id=mp"+thismenuitem.hasc+" class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+ "' width=100% onmouseout=mmenuitem_out(true) onmouseover=\"mmenuitem_over(mmenudiv"+x+ ",'"+thismenuitem.hasc+"',"+x+",-1,"+i+");mshowsubmenu(msubmenudiv"+thismenuitem.hasc+",mp"+thismenuitem.hasc+",mmenudiv"+x+");\""+ "><table id=mitem"+thismenuitem.hasc+" cellspacing='0' cellpadding='0' border='0' width='100%' style='"+mfonts+"'><tr><td "; if(thismenuitem.pos=="0"){ stringx += "><img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+">"+ifspace+thismenuitem.caption+"</td><td"; }else if(thismenuitem.pos=="1"){ stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+"></td><td"; }else if(thismenuitem.pos=="2"){ stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+"</td><td background='"+thismenuitem.img+"'"; }else{ stringx += ">"+thismenuitem.caption+"</td><td"; } stringx += " align=right width='1'><font face='Webdings' style='font-size: 6pt'>4</font></td></tr></table></td></tr>\n"; }else if(!thismenuitem.isline){ stringx += "<tr><td class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+ "' width=100% height=15px onmouseover=\"mmenuitem_over(mmenudiv"+x+ ",false,"+x+",-1,"+i+");\" onmouseout=mmenuitem_out() onmousedown=mmenuitem_down() onmouseup="; stringx += "mmenuitem_up();mexec("+x+","+i+"); "; if(thismenuitem.pos=="0"){ stringx += "><img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+">"+ifspace+thismenuitem.caption+"</td></tr>"; }else if(thismenuitem.pos=="1"){ stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+"></td></tr>"; }else if(thismenuitem.pos=="2"){ stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+"</td></tr>"; }else{ stringx += ">"+thismenuitem.caption+"</td></tr>"; } }else{ stringx+='<tr><td height="1" background="hr.gif" onmousemove="clearTimeout(mpopTimer);"><img height="1" width="1" src="none.gif" border="0"></td></tr>\n'; } }stringx+='</table>\n</div>' } } for(var j=1;j<=mnumberofsub;j++){ thisitem=eval("msub"+j); stringx+='<div id=msubmenudiv'+j+ ' style="tag:'+thisitem.level+';cursor:'+mcursor+';position:absolute;'+ ''+mmenuitemwidth+'px; z-index:'+(j+200); if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){ stringx+=';border-left: 1px solid '+mmidoutcolor+ ';border-top: 1px solid '+mmidoutcolor;} stringx+=';border-right: 1px solid '+mmenuinbordercolor+ ';border-bottom: 1px solid '+mmenuinbordercolor+';visibility:hidden" onselectstart="event.returnValue=false">\n'+ '<table width="100%" border="0" height="100%" align="center" cellpadding="0" cellspacing="2" '+ 'style="'+mfonts+' border-left: 1px solid '+mmenuoutbordercolor; if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){ stringx+=';border-right: 1px solid '+mmidincolor+ ';border-bottom: 1px solid '+mmidincolor;} stringx+=';border-top: 1px solid '+mmenuoutbordercolor+ ';padding: 4px" bgcolor='+mmenucolor+'>\n' for(var i=0;i<thisitem.items.length;i++){ var thismenuitem=thisitem.items[i]; var imgsize=""; if(thismenuitem.sizex!="0"||thismenuitem.sizey!="0")imgsize=" width="+thismenuitem.sizex+" height="+thismenuitem.sizey; var ifspace=""; if(thismenu.caption!="")ifspace=" "; if(thismenuitem.hasc!=null){ stringx += "<tr><td id=mp"+thismenuitem.hasc+" class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+ "' width=100% onmouseout=mmenuitem_out(true) onmouseover=\"mmenuitem_over(msubmenudiv"+j+ ",'"+thismenuitem.hasc+"',-1,"+j+","+i+");mshowsubmenu(msubmenudiv"+thismenuitem.hasc+",mp"+thismenuitem.hasc+",msubmenudiv"+j+");\""+ "><table id=mitem"+thismenuitem.hasc+" cellspacing='0' cellpadding='0' border='0' width='100%' style='"+mfonts+"'><tr><td "; if(thismenuitem.pos=="0"){ stringx += "><img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+">"+ifspace+thismenuitem.caption+"</td><td"; }else if(thismenuitem.pos=="1"){ stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+"></td><td"; }else if(thismenuitem.pos=="2"){ stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+"</td><td background='"+thismenuitem.img+"'"; }else{ stringx += ">"+thismenuitem.caption+"</td><td"; } stringx += " align=right width='1'><font face='Webdings' style='font-size: 6pt'>4</font></td></tr></table></td></tr>\n"; }else if(!thismenuitem.isline){ stringx += "<tr><td class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+ "' width=100% height=15px onmouseover=\"mmenuitem_over(msubmenudiv"+j+ ",false,-1,"+j+","+i+");\" onmouseout=mmenuitem_out() onmousedown=mmenuitem_down() onmouseup="; stringx += "mmenuitem_up();mexec3("+j+","+i+"); "; if(thismenuitem.pos=="0"){ stringx += "><img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+">"+ifspace+thismenuitem.caption+"</td></tr>"; }else if(thismenuitem.pos=="1"){ stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+"></td></tr>"; }else if(thismenuitem.pos=="2"){ stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+"</td></tr>"; }else{ stringx += ">"+thismenuitem.caption+"</td></tr>"; } }else{ stringx+='<tr><td height="1" background="hr.gif" onmousemove="clearTimeout(mpopTimer);"><img height="1" width="1" src="none.gif" border="0"></td></tr>\n'; } } stringx+='</table>\n</div>' } document.write("<div align='left'>"+stringx+"</div>"); } mpmenu=new mMenu('主菜单一','','self','','','',''); mpmenu.addItem(new mMenuItem('主菜单一1','/index.asp','self',false,'说明文字',null,'','','','')); mpmenu.addItem(new mMenuItem('主菜单一2','/index.asp','self',false,'说明文字',null,'','','','')); mpmenu.addItem(new mMenuItem('主菜单一3','/index.asp','self',false,'说明文字',null,'','','','')); mpmenu2=new mMenu('页元素','','self','','','',''); msub1=new mMenuItem('设计文档','','self',false,'','1','','','',''); msub1.addsubItem(new mMenuItem('设计文章','/notebook.asp','self',false,'说明文字',null,'','','','')); msub1.addsubItem(new mMenuItem('书籍下载','/notebook.asp','self',false,'说明文字',null,'','','','')); mpmenu2.addItem(msub1); msub2=new mMenuItem('网页特效','','self',false,'','1','','','',''); msub2.addsubItem(new mMenuItem('网页特效1','/js.asp','self',false,'说明文字',null,'','','','')); msub2.addsubItem(new mMenuItem('网页特效2','/js.asp','self',false,'说明文字',null,'','','','')); msub2.addsubItem(new mMenuItem('网页特效3','/js.asp','self',false,'说明文字',null,'','','','')); msub2.addsubItem(new mMenuItem('网页特效4','/js.asp','self',false,'说明文字',null,'','','','')); msub2.addsubItem(new mMenuItem('网页特效5','/js.asp','self',false,'说明文字',null,'','','','')); mpmenu2.addItem(msub2); mpmenu2.addItem(new mMenuItem('精品收藏','/gallery.asp','self',false,'说明文字',null,'','','','')); mpmenu2.addItem(new mMenuItem('软件下载','/download.asp','self',false,'说明文字',null,'','','','')); mpmenu2.addItem(new mMenuItem('酷站推荐','/web.asp','self',false,'说明文字',null,'','','','')); mpmenu2.addItem(new mMenuItem('元素论坛','/forum/index.asp','self',false,'说明文字',null,'','','','')); mpmenu=new mMenu('主菜单三','','self','','','',''); mpmenu.addItem(new mMenuItem('主菜单三1','/index.asp','self',false,'说明文字',null,'','','','')); mpmenu.addItem(new mMenuItem('主菜单三2','/index.asp','self',false,'说明文字',null,'','','','')); mpmenu.addItem(new mMenuItem('主菜单三3','/index.asp','self',false,'说明文字',null,'','','','')); mpmenu.addItem(new mMenuItem('主菜单三4','/index.asp','self',false,'说明文字',null,'','','','')); mpmenu.addItem(new mMenuItem('主菜单三5','/index.asp','self',false,'说明文字',null,'','','','')); mpmenu=new mMenu('主菜单四','','self','','','',''); mpmenu.addItem(new mMenuItem('主菜单四1','/index.asp','self',false,'说明文字',null,'','','','')); mpmenu.addItem(new mMenuItem('主菜单四2','/index.asp','self',false,'说明文字',null,'','','','')); mpmenu.addItem(new mMenuItem('主菜单四3','/index.asp','self',false,'说明文字',null,'','','','')); mpmenu.addItem(new mMenuItem('主菜单四4','/index.asp','self',false,'说明文字',null,'','','','')); mpmenu.addItem(new mMenuItem('主菜单四5','/index.asp','self',false,'说明文字',null,'','','','')); mpmenu=new mMenu('主菜单五','','self','','','',''); msub3=new mMenuItem('主菜单五1','','self',false,'','1','','','',''); msub3.addsubItem(new mMenuItem('主菜单五1-a','/index.asp','self',false,'说明文字',null,'','','','')); msub3.addsubItem(new mMenuItem('主菜单五1-b','/index.asp','self',false,'说明文字',null,'','','','')); msub3.addsubItem(new mMenuItem('主菜单五1-c','/index.asp','self',false,'说明文字',null,'','','','')); mpmenu.addItem(msub3); msub4=new mMenuItem('主菜单五2','','self',false,'','1','','','',''); msub4.addsubItem(new mMenuItem('主菜单五2-a','/index.asp','self',false,'说明文字',null,'','','','')); msub4.addsubItem(new mMenuItem('主菜单五2-b','/index.asp','self',false,'说明文字',null,'','','','')); msub4.addsubItem(new mMenuItem('主菜单五2-c','/index.asp','self',false,'说明文字',null,'','','','')); mpmenu.addItem(msub4); msub5=new mMenuItem('主菜单五3','','self',false,'','1','','','',''); msub5.addsubItem(new mMenuItem('主菜单五3-a','/index.asp','self',false,'说明文字',null,'','','','')); msub5.addsubItem(new mMenuItem('主菜单五3-b','/index.asp','self',false,'说明文字',null,'','','','')); msub5.addsubItem(new mMenuItem('主菜单五3-c','/index.asp','self',false,'说明文字',null,'','','','')); msub3.addsubItem(new mMenuItem('主菜单五3-d','/index.asp','self',false,'说明文字',null,'','','','')); msub4.addsubItem(new mMenuItem('主菜单五4-d','/index.asp','self',false,'说明文字',null,'','','','')); msub5.addsubItem(new mMenuItem('主菜单五5-d','/index.asp','self',false,'说明文字',null,'','','','')); mpmenu.addItem(msub5); mpmenu6=new mMenu('返回主页','/index.asp','self','','','',''); mpmenu7=new mMenu('访问论坛','/forum/index.asp','self','','','',''); mwritetodocument(); </script>
菜单三
HTML代码
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="</a>" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>横向下拉菜单</title> <style type="text/css"> <!-- * {margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { height: 24px; list-style-type: none; padding-left:200px; line-height:24px;overflow:hidden;background:#999; } #nav a { display: block; 80px; text-align:center; } #nav a:link { color:#EEE; text-decoration:none; } #nav a:visited { color:#EEE;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold;background:#CCC; } #nav li { float: left; 80px; } #nav li ul { line-height: 24px; list-style-type: none; text-align:left; left: -999px; 520px; //注意,这里一定要设置宽度; position: absolute; background:#CCC; } #nav li ul li{ float: left; 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float } #nav li ul a{ display: block; 65px;text-align:left;padding-left:15px; } #nav li ul a:link { color:#F1F1F1; text-decoration:none; } #nav li ul a:visited { color:#F1F1F1;text-decoration:none; } #nav li ul a:hover { color:#FFF;text-decoration:none;font-weight:normal;background:#C00; } #nav li:hover ul { left:25%; } #nav li.sfhover ul { left:25%; } #content { clear: left; } --> </style> <script type="text/javascript"> <!-- function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } window.onload=menuFix; //--> </script> </head> <body> <ul id="nav"> <li><a href="#">菜单一</a> <ul> <li><a href="#">菜单一</a></li> <li><a href="#">菜单一</a></li> <li><a href="#">菜单一</a></li> <li><a href="#">菜单一</a></li> <li><a href="#">菜单一</a></li> <li><a href="#">菜单一</a></li> </ul> </li> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单二</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单二</a></li> </ul> </li> <li><a href="#">菜单三</a> <ul> <li><a href="#">菜单三</a></li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单三</a></li> </ul> </li> <li><a href="#">菜单四</a> <ul> <li><a href="#">菜单四</a></li> <li><a href="#">菜单四</a></li> <li><a href="#">菜单四</a></li> <li><a href="#">菜单四</a></li> <li><a href="#">菜单四</a></li> </ul> </li> <li><a href="#">菜单五</a> <ul> <li><a href="#">菜单五</a></li> <li><a href="#">菜单五</a></li> <li><a href="#">菜单五</a></li> <li><a href="#">菜单五</a></li> <li><a href="#">菜单五</a></li> </ul> </li> <li><a href="#">菜单六</a> <ul> <li><a href="#">菜单六</a></li> <li><a href="#">菜单六</a></li> <li><a href="#">菜单六</a></li> <li><a href="#">菜单六</a></li> <li><a href="#">菜单六</a></li> </ul> </li> </ul> </div> </body> </html>
菜单四
HTML代码
<style type="text/css"> .menu {font-family: verdana, sans-serif; 750px; position:relative; font-size:0.85em;padding-bottom:250px;} .menu ul {padding:0; margin:0;list-style-type: none;} .menu ul li {float:left;position:relative;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; 139px; height:3em; color:#000; border:1px solid #fff; border-1px 1px 0 0; background:#dfc184; padding-left:10px; line-height:3em;} * html .menu ul li a, .menu ul li a:visited {149px;w\idth:139px;}.menu ul li ul {display: none;} table {margin:-1px; border-collapse:collapse;font-size:1em;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#bd8d5e;} .menu ul li:hover ul {display:block; position:absolute; top:3em;margin-top:1px;left:0; 150px;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#faeec7; color:#000; height:auto; line-height:1.2em; padding:5px 10px; 129px} .menu ul li:hover ul li a.drop {background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;} .menu ul li:hover ul li a:hover {background:#c9c9a7; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:150px; top:0;150px;} .menu ul li:hover ul li:hover ul.left {left:-150px;} </style> <!--[if lte IE 6]><style type="text/css"> .menu ul li a:hover {color:#fff; background:#bd8d5e;} .menu ul li a:hover ul {display:block; position:absolute; top:3em; left:0;background:#fff;margin-top:0;marg\in-top:1px;} .menu ul li a:hover ul li a {display:block; background:#dbe4ab; color:#000; height:auto; line-height:1.5em; padding:5px 10px; 150px;w\idth:129px;} .menu ul li a:hover ul li a.drop {background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;} .menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; height:0; 0;} .menu ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; top:0; color:#000;left:150px;} .menu ul li a:hover ul li a:hover ul.left {left:-150px;} </style> <![endif]--> <div class="menu"> <ul> <li><a class="drop" href="../menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders<!--[if IE 7]><!--></a> <!--<![endif]--><table><tr><td> <ul> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul></td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> <li class="upone"><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li> <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li> </ul></td></tr></table><!--[if lte IE 6]></a><![endif]--></li><li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul></td></tr></table><!--[if lte IE 6]></a><![endif]--></li><li><a href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li> <li><a href="../mozilla/snooker.html" title="Snooker cue">a snooker cue using border art</a></li> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul></td></tr></table><!--[if lte IE 6]></a><![endif]--></li><li><a href="../ie/index.html">EXPLORER<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="../ie/exampleone.html" title="Example one">the first example for Internet Explorer</a></li> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" title="Vertical align">vertically aligning text</a></li> </ul></td></tr></table><!--[if lte IE 6]></a><![endif]--></li><li><a href="../opacity/index.html">OPACITY<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="../opacity/colours.html" title="colour wheel">a colour wheel using opaque colours</a></li> <li><a href="../opacity/picturemenu.html" title="a menu using opacity">a menu using opacity</a></li> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> <li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul class="left"> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul></td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> </ul></td></tr></table><!--[if lte IE 6]></a><![endif]--></li></ul></div><script language="Javascript"> var now = new Date(); document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); </script> <noscript> <img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/> </noscript>
-----------------------------------------------------------------
我做的小程序们
【推荐】Web版短信管理平台源码
WinForm版短信管理平台源码
移动短信程序源码Win服务版(CMPP3.0/CMPP2.0协议)
移动物联网卡短信源码(CMPP3.0协议,支持MsSql/MySql数据库)
C#实现联通短信Sgip协议程序源码
C#实现电信短信SMGP协议程序源码
C#实现移动短信CMPP服务端程序源码
小y的QQ:
28657321
(欢迎交流)
查看全文
相关阅读:
软件工程师的悲哀
关于ControlTemplate 2
DataTemplate总结2(学习)
ObjectiveC——类
6 Popular Ideas That Fail
Develop Cross Platform Mobile App
DP 与 DO(学习)
Titanium颜色总结
Illustrator Tips
Titanium API
原文地址:https://www.cnblogs.com/tuyile006/p/860072.html
最新文章
執行階段錯誤
巴菲特的建言
報表檔路徑無效
怎麽樣讓它只旋轉文字而數字不旋轉
IE7之初體驗~呵~
set_include_path详细解释
hdu 2067 “红色病毒”问题
hdu 2067 小兔的棋盘
hdu 2049 不容易系列之(4)——考新郎
hdu 2045 不容易系列之(3)—— LELE的RPG难题
热门文章
hdu 1008 Elevator
hdu 2072 单词数
hdu 2068 RPG的错排
hdu 2104 hide handkerchief
hdu 1049 Climbing Worm
关于Attached Property(学习)
CommonJS基础1
关于ControlTemplate 1
C# Event
Delegate和Event的区别(学习)
Copyright © 2011-2022 走看看