几个很好的下拉导航条

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.οnclick=mbody_click; function mwritetodocument(){ var mwb=1; var stringx='
"+ifspace+thismenu.caption+""; }else if(thismenu.pos=="1"){ stringx += " align=center>"+thismenu.caption+ifspace+" "; }else if(thismenu.pos=="2"){ stringx += " align=center background='"+thismenu.img+"'> "+thismenu.caption+" "; }else{ stringx += " align=center> "+thismenu.caption+" "; } stringx += ""; } stringx+=" ' for(var x=0;x
"; for(var x=0;x '; }else{ stringx+=' ' } } for(var j=1;j<=mnumberofsub;j++){ thisitem=eval("msub"+j); stringx+='
/n'+ ' "+thismenuitem.caption+"
"+ifspace+thismenuitem.caption+"" +thismenuitem.caption+"< td> "+ifspace+thismenuitem.caption+"
"; }else if(thismenuitem.pos=="1"){ stringx += ">"+thismenuitem.caption+ifspace+""; }else if(thismenuitem.pos=="2"){ stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+""; }else{ stringx += ">"+thismenuitem.caption+""; } }else{ stringx+='
/n'; } } stringx+=' /n
' } document.write("
"+stringx+"
"); } 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(); //要获得最新版本的菜单,请访问http://www.0755i.com/ </script> 2.----------------------------------------------------------------------- <HTML> <STYLE type="text/css"> .menu { display:block; position:absolute; } a.myokmenu, a.myokmenu:visited { color:#000000; width:77px; height:20px; display:block; background:#bbffff; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:12px; line-height:20px; overflow:hidden; } a.myokmenu:hover{ color:#fff; background:#FF00ff; overflow:visible; } a.myokmenu:hover table{ display:block; background:#eee; border-collapse:collapse; } a.submenu, a.submenu:visited{ display:block; width:75px; height:20px; border-bottom:1px solid #000; text-decoration:none; color:#000000; font-family:tahoma, vardana, arial, sans-serif; font-size:12px; text-align:center; } a.submenu:hover{ background:#add; } </STYLE> <body> <div style="PADDING-BOTTOM: 46px"> <div class="menu" style="Z-INDEX: 10"> <a class="myokmenu" href="http://sqz1003.blogchina.com/catalog_2005.html" _fcksavedurl="http://sqz1003.blogchina.com/catalog_2005.html">总目录 </a> <a class="myokmenu" href="http://sqz1003.blogchina.com/catalog_2005.html#category276565" _fcksavedurl="http://sqz1003.blogchina.com/catalog_2005.html#category276565"> 心情故事 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/1633588.html" _fcksavedurl="http://sqz1003.bokee.com/1633588.html">心情故事1</a> <a class="submenu" href="http://sqz1003.bokee.com/1633929.html" _fcksavedurl="http://sqz1003.bokee.com/1633929.html"> 心情故事2</a> <a class="submenu" href="http://sqz1003.bokee.com/1634122.html" _fcksavedurl="http://sqz1003.bokee.com/1634122.html">心情故事3</a> <a class="submenu" href="http://sqz1003.bokee.com/1645635.html" _fcksavedurl="http://sqz1003.bokee.com/1645635.html">心情故事4</a> <a class="submenu" href="http://sqz1003.bokee.com/2541548.html" _fcksavedurl="http://sqz1003.bokee.com/2541548.html"> 心情故事5</a> </td> </tr> </tbody> </table> </a><a class="myokmenu" href="http://sqz1003.blogchina.com/catalog_2005.html#category276557" _fcksavedurl="http://sqz1003.blogchina.com/catalog_2005.html#category276557"> 精品文萃 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/1634445.html" _fcksavedurl="http://sqz1003.bokee.com/1634445.html">精品文萃1</a> <a class="submenu" href="http://sqz1003.bokee.com/1634603.html" _fcksavedurl="http://sqz1003.bokee.com/1634603.html"> 精品文萃2</a> <a class="submenu" href="http://sqz1003.bokee.com/1634704.html" _fcksavedurl="http://sqz1003.bokee.com/1634704.html">精品文萃3</a> <a class="submenu" href="http://sqz1003.bokee.com/2393279.html" _fcksavedurl="http://sqz1003.bokee.com/2393279.html">精品文萃4</a> </td> </tr> </tbody> </table> </a><a class="myokmenu" href="http://sqz1003.bokee.com/catalog_2005.html#category276559" _fcksavedurl="http://sqz1003.bokee.com/catalog_2005.html#category276559"> 唯美贴图 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/1634855.html" _fcksavedurl="http://sqz1003.bokee.com/1634855.html">唯美贴图1</a> <a class="submenu" href="http://sqz1003.bokee.com/1634957.html" _fcksavedurl="http://sqz1003.bokee.com/1634957.html"> 唯美贴图2</a> <a class="submenu" href="http://sqz1003.bokee.com/1951184.html" _fcksavedurl="http://sqz1003.bokee.com/1951184.html">唯美贴图3</a> <a class="submenu" href="http://sqz1003.bokee.com/2708621.html" _fcksavedurl="http://sqz1003.bokee.com/2708621.html">唯美贴图4</a> </td> </tr> </tbody> </table> </a><a class="myokmenu" href="http://sqz1003.bokee.com/catalog_2005.html#category2765460" _fcksavedurl="http://sqz1003.bokee.com/catalog_2005.html#category2765460"> 幽默笑话 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/1635093.html" _fcksavedurl="http://sqz1003.bokee.com/1635093.html">动漫天地1</a> <a class="submenu" href="http://sqz1003.bokee.com/1951044.html" _fcksavedurl="http://sqz1003.bokee.com/1951044.html"> 动漫天地2</a> <a class="submenu" href="http://sqz1003.bokee.com/2810786.html" _fcksavedurl="http://sqz1003.bokee.com/2810786.html">动漫天地3</a> </td> </tr> </tbody> </table> </a> </div> <div class="menu" style="MARGIN-TOP: 23px; Z-INDEX: 8"><a class="myokmenu" href="http://sqz1003.bokee.com/catalog_2005.html#category276562" _fcksavedurl="http://sqz1003.bokee.com/catalog_2005.html#category276562">音乐时空 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/1635332.html" _fcksavedurl="http://sqz1003.bokee.com/1635332.html">音乐时空1</a> <a class="submenu" href="http://sqz1003.bokee.com/1747751.html" _fcksavedurl="http://sqz1003.bokee.com/1747751.html"> 音乐时空2</a> <a class="submenu" href="http://sqz1003.bokee.com/1967954.html" _fcksavedurl="http://sqz1003.bokee.com/1967954.html">音乐时空3</a> </td> </tr> </tbody> </table> </a><a class="myokmenu" href="http://sqz1003.bokee.com/catalog_2005.html#category276563" _fcksavedurl="http://sqz1003.bokee.com/catalog_2005.html#category276563"> 休闲时刻 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/1635526.html" _fcksavedurl="http://sqz1003.bokee.com/1635526.html">休闲时刻1</a> <a class="submenu" href="http://sqz1003.bokee.com/1635606.html" _fcksavedurl="http://sqz1003.bokee.com/1635606.html"> 休闲时刻2</a> <a class="submenu" href="http://sqz1003.bokee.com/1837387.html" _fcksavedurl="http://sqz1003.bokee.com/1837387.html">休闲时刻3</a> <a class="submenu" href="http://publishblog.bokee.com/control/blog/doEditPost.b?post=1#" _fcksavedurl="http://publishblog.bokee.com/control/blog/doEditPost.b?post=1#"> </a> </td> </tr> </tbody> </table> </a><a class="myokmenu" href="http://sqz1003.bokee.com/catalog_2005.html#category276556" _fcksavedurl="http://sqz1003.bokee.com/catalog_2005.html#category276556"> 电脑网络 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/1635727.html" _fcksavedurl="http://sqz1003.bokee.com/1635727.html">电脑网络1</a> <a class="submenu" href="http://sqz1003.bokee.com/1635878.html" _fcksavedurl="http://sqz1003.bokee.com/1635878.html"> 电脑网络2</a> <a class="submenu" href="http://sqz1003.bokee.com/2542305.html" _fcksavedurl="http://sqz1003.bokee.com/2542305.html">电脑网络3</a> </td> </tr> </tbody> </table> </a><a class="myokmenu" href="http://sqz1003.bokee.com/catalog_2005.html#category276566" _fcksavedurl="http://sqz1003.bokee.com/catalog_2005.html#category276566"> 索引工具 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/1747685.html" _fcksavedurl="http://sqz1003.bokee.com/1747685.html">索引工具1</a> <a class="submenu" href="http://sqz1003.bokee.com/2120682.html" _fcksavedurl="http://sqz1003.bokee.com/2120682.html"> 索引工具 2</a> </td> </tr> </tbody> </table> </a><a class="myokmenu" href="http://sqz1003.bokee.com/catalog_2005.html#category276561" _fcksavedurl="http://sqz1003.bokee.com/catalog_2005.html#category276561"> 在线游戏 <table> <tbody> <tr> <td><a class="submenu" href="http://sqz1003.bokee.com/2523963.html" _fcksavedurl="http://sqz1003.bokee.com/2523963.html">在线游戏1</a> <a class="submenu" href="http://sqz1003.bokee.com/2763253.html" _fcksavedurl="http://sqz1003.bokee.com/2763253.html"> 在线游戏2</a> <a class="submenu" href="http://sqz1003.bokee.com/2631253.html" _fcksavedurl="http://sqz1003.bokee.com/2631253.html">在线游戏3</a> </td> </tr> </tbody> </table> </a> </div> </div> </body> </HTML> 3.---------------------------------------------------------------------- <HEAD> <title>css菜单演示</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> </style> <script type="text/javascript"> function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i 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].οnmοuseοut=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover//b"), ""); } } } window.οnlοad=menuFix; //more javascript from http://www.webw3c.com //--> </script> </HEAD> <body> <ul id="nav" runat="server"> <li> <a href="#" _fcksavedurl="#">产品介绍</a> <ul> <li> <a href="#" _fcksavedurl="#">产品一</a></li> <li> <a href="#" _fcksavedurl="#">产品一</a></li> <li> <a href="#" _fcksavedurl="#">产品一</a></li> <li> <a href="#" _fcksavedurl="#">产品一</a></li> <li> <a href="#" _fcksavedurl="#">产品一</a></li> <li> <a href="#" _fcksavedurl="#">产品一</a></li> </ul> </li> <li> <a href="#" _fcksavedurl="#">服务介绍</a> <ul> <li> <a href="#" _fcksavedurl="#">服务二</a></li> <li> <a href="#" _fcksavedurl="#">服务二</a></li> <li> <a href="#" _fcksavedurl="#">服务二</a></li> <li> <a href="#" _fcksavedurl="#">服务二服务二</a></li> <li> <a href="#" _fcksavedurl="#">服务二服务二服务二</a></li> <li> <a href="#" _fcksavedurl="#">服务二</a></li> </ul> </li> <li> <a href="#" _fcksavedurl="#">成功案例</a> <ul> <li> <a href="#" _fcksavedurl="#">案例三</a></li> <li> <a href="#" _fcksavedurl="#">案例</a></li> <li> <a href="#" _fcksavedurl="#">案例三案例三</a></li> <li> <a href="#" _fcksavedurl="#">案例三案例三案例三</a></li> </ul> </li> <li> <a href="#" _fcksavedurl="#">关于我们</a> <ul> <li> <a href="#" _fcksavedurl="#">我们四</a></li> <li> <a href="#" _fcksavedurl="#">我们四</a></li> <li> <a href="#" _fcksavedurl="#">我们四</a></li> <li> <a href="#" _fcksavedurl="#">我们四111</a></li> </ul> </li> <li> <a href="#" _fcksavedurl="#">在线演示</a> <ul> <li> <a href="#" _fcksavedurl="#">演示</a></li> <li> <a href="#" _fcksavedurl="#">演示</a></li> <li> <a href="#" _fcksavedurl="#">演示</a></li> <li> <a href="#" _fcksavedurl="#">演示演示演示</a></li> <li> <a href="#" _fcksavedurl="#">演示演示演示</a></li> <li> <a href="#" _fcksavedurl="#">演示演示</a></li> <li> <a href="#" _fcksavedurl="#">演示演示演示</a></li> <li> <a href="#" _fcksavedurl="#">演示演示演示演示演示</a></li> </ul> </li> <li> <a href="#" _fcksavedurl="#">联系我们</a> <ul> <li> <a href="#" _fcksavedurl="#">联系联系联系联系联系</a></li> <li> <a href="#" _fcksavedurl="#">联系联系联系</a></li> <li> <a href="#" _fcksavedurl="#">联系</a></li> <li> <a href="#" _fcksavedurl="#">联系联系</a></li> <li> <a href="#" _fcksavedurl="#">联系联系</a></li> <li> <a href="#" _fcksavedurl="#">联系联系联系</a></li> <li> <a href="#" _fcksavedurl="#">联系联系联系</a></li> </ul> </li> </ul> </body> </HTML>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值