这是一款仿QQ的三级菜单,竖向三级,两级的比较多见,三级的不多哦,不过本菜单三级菜单没有美化,你需要自己再美化一下。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
<html> <head> <title>仿QQ的菜单,三级竖向</title> <script language="javascript"> function Switchmenu(obj){ if(document.getElementById){ var el = document.getElementById("menu_"+obj); var ar = document.getElementById("menu").getElementsByTagName("ul"); if(el.style.display != "block"){ for (var i=0; i<ar.length; i++){ if (ar[i].className=="submenu") ar[i].style.display = "none"; document.getElementById("menu"+(i+1)).className="menutbg_1 cursor" } el.style.display = "block"; document.getElementById("menu"+obj).className="menutbg_2 cursor" }else{ el.style.display = "none"; document.getElementById("menu"+obj).className="menutbg_1 cursor" } } } </script> <script language="javascript"> <!-- var number=6; function LMYC() { var lbmc; for (i=1;i<=number;i++) { lbmc = eval('LM' + i); lbmc.style.display = 'none'; } } function ShowFLT(i) { lbmc = eval('LM' + i); //treePic = eval('treePic' + i) if (lbmc.style.display == 'none') { LMYC(); //treePic.src = 'images/nofile.gif'; lbmc.style.display = ''; } else { //treePic.src = 'images/file.gif'; lbmc.style.display = 'none'; } } //--> </script> <style type="text/css"> <!-- body{font-size:12px; margin:0; padding:0;} ul{list-style-type:none; margin:0; padding:0;} li{margin:0; padding:0;} #menu{background:#fff; width:182px; height:auto;margin:0 auto; border:1px solid #73C2FF;} .cursor{cursor:pointer;} .submenu{display: none;} .menutbg_1{background:url(images/m1.gif) no-repeat left; width:182px; height:25px; line-height:25px; color:#4B6486; font-size:14px; font-weight:700;text-align:left; text-indent:19px;} .menutbg_2{background:url(images/m1.gif) no-repeat left; width:182px; height:25px; line-height:25px; color:#4B6486; font-size:14px; font-weight:700; text-align:left;text-indent:19px;} .mbox{background:#73C2FF;height:auto;} .mt1{font-size:14px;height:22px;line-height:22px;background:#E5F5FF;text-indent:10px;border-top: 1px solid #fff;border-bottom: 1px solid #A9DAFF; font-weight:normal;cursor:pointer;} .TxtList{height:200px; overflow-y:scroll; background:#fff;} .mt3{height:22px; line-height:22px; text-indent:33px; color:#333; font-size:12px; no-repeat 20px 5px;} </style> --> </style> </head> <body> <div> <div>一级菜单A</div> <ul> <table cellspacing="0" cellpadding="0"> <tr> <td><a href="javascript:void(null)"> 文管产品</a> </td> </tr> <tr> <td><div> <div><a href="#">123213</a></div> <div><a href="#">123213</a></div> <div><a href="#">123213</a></div> <div><a href="https://www.jb51.net/article/3">123213</a></div> </div></td> </tr> <tr> <td><a href="javascript:void(null)"> 桌面文具</a> </td> </tr> <tr> <td><div> <div><a href="#">123213</a></div> <div><a href="#">123213</a></div> <div><a href="https://www.jb51.net/article/3">123213</a></div> </div></td> </tr> </table> </ul> <div>一级菜单B</div> <ul> <table cellspacing="0" cellpadding="0"> <tr> <td><a href="javascript:void(null)"> 文管产品</a> </td> </tr> <tr> <td><div> <div><a href="#">123213</a></div> <div><a href="https://www.jb51.net/article/3">123213</a></div> <div><a href="https://www.jb51.net/article/3">123213</a></div> <div><a href="#">123213</a></div> </div></td> </tr> <tr> <td><a href="javascript:void(null)"> 桌面文具</a> </td> </tr> <tr> <td><div> <div><a href="#">123213</a></div> <div><a href="#">123213</a></div> <div><a href="#">123213</a></div> <div><a href="https://www.jb51.net/article/3">123213</a></div> </div></td> </tr> </table> </ul> <div>一级菜单C</div> <ul> <table cellspacing="0" cellpadding="0"> <tr> <td><a href="javascript:void(null)"> 文管产品</a> </td> </tr> <tr> <td><div> <div><a href="#">123213</a></div> <div><a href="#">123213</a></div> <div><a href="#">123213</a></div> <div><a href="https://www.jb51.net/article/3">123213</a></div> </div></td> </tr> <tr> <td><a href="javascript:void(null)"> 桌面文具</a> </td> </tr> <tr> <td><div> <div><a href="#">123213</a></div> <div><a href="#">123213</a></div> <div><a href="#">123213</a></div> </div></td> </tr> </table> </ul> </div> </body> </html>