教程集 > 脚本编程 > javascript > 正文三级下拉菜单

三级下拉菜单

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供三级下拉菜单等资源，欢迎您收藏本站，我们将为您提供最新的三级下拉菜单资源

提示：您可以先修改部分代码再运行

<html> <head> <title> 很简单的菜单条，但是有三级菜单，使用方便简单，酷 </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css">  </style> </head> <body bgcolor="#FFFFFF"> <table width="500" border="0" align="center">   <tr>     <td width="80%" bgcolor="#FF99CC" height="34">       <div align="center">26. 很简单的菜单条，但是有三级菜单，使用方便简单，酷 </div>     </td>   </tr> </table> <table border="0" width="500" align="center">   <tr>     <td bgcolor="#6699FF">               <script> //菜单一 first item---------------------------------------------------------- var item_num=3;  //父层菜单的行数 Hom many rows is the parent item var item02_word=new Array();  //菜单的文字 The words of the child item for(i=0;i<item_num;i )   item02_word[i]=new Array();   item02_word[0][0]="市长致词02";   item02_word[0][1]="市民意见";   item02_word[0][2]="市民投诉";   item02_word[1][0]="市政领导02";   item02_word[1][1]="部门机构";   item02_word[1][2]="部门职责";   item02_word[2][0]="最新发布02";   item02_word[2][1]="综合经济";   item02_word[2][2]="科教文化"; var item02_link=new Array();  //菜单的链接 The links of the child item for(i=0;i<item_num;i )   item02_link[i]=new Array();   item02_link[0][0]="#none";   item02_link[0][1]="#none"   item02_link[0][2]="#none"   item02_link[1][0]="#none";   item02_link[1][1]="#none";   item02_link[1][2]="#none";   item02_link[2][0]="#none";   item02_link[2][1]="#none";   item02_link[2][2]="#none"; var item02=new Array();  //菜单的HTML The HTML code of the child item for(i=0;i<item_num;i )   item02[i]=""; for(i=0;i<item_num;i )   for(j=0;j<item02_word[i].length;j )     item02[i] ="   | -<img border=0 src=list3.gif><a class=childlink href=" item02_link[i][j] " onclick=javascript:this.blur();>" item02_word[i][j] "</a> "; //------------定义一个清空各菜单的函数-------------- function closeItemTable02() {   for(i=0;i<item_num;i )   {     document.all.itemTable02.cells[2*i 1].innerHTML="";     item02Img[i].src="list.gif";   } } //------------------定义结束---------------------- //------------定义一个菜单展开的函数---------------- function openItemTable02(n) {   if(document.all.itemTable02.cells[n*2 1].innerHTML=="")   {     closeItemTable02();     item02Img[n].src="list2.gif";     document.all.itemTable02.cells[n*2 1].innerHTML=item02[n];   }   else     closeItemTable02(); } //------------------定义结束---------------------- var item02_view=new Array(); item02_view[0]="<table id=itemTable02 cellpadding=0 cellspacing=0 border=0>\n"; item02_view[1]="  <tr><td valign=bottom>  -<img name=item02Img name=treeImg src=list.gif border=0><a id=item_1 class=parentlink href=javascript: onclick=javascript:openItemTable02(0);this.blur();>市长室</a></td></tr>\n"; item02_view[2]="  <tr><td class=childlink></td></tr>\n"; item02_view[3]="  <tr><td valign=bottom>  -<img name=item02Img name=treeImg src=list.gif border=0><a id=item_2 class=parentlink href=javascript: onclick=javascript:openItemTable02(1);this.blur();>政府政务</a></td></tr>\n"; item02_view[4]="  <tr><td class=childlink></td></tr>\n"; item02_view[5]="  <tr><td valign=bottom>  -<img name=item02Img name=treeImg src=list.gif border=0><a id=item_3 class=parentlink href=javascript: onclick=javascript:openItemTable02(2);this.blur();>政策法规</a></td></tr>\n"; item02_view[6]="  <tr><td class=childlink></td></tr>\n"; item02_view[7]="</table>\n"; var item02_all=""; for(i=0;i<item02_view.length;i )   item02_all =item02_view[i]; </script>         <script> //菜单一 first item---------------------------------------------------------- var item_num=3;  //父层菜单的行数 Hom many rows is the parent item var item01_word=new Array();  //菜单的文字 The words of the child item for(i=0;i<item_num;i )   item01_word[i]=new Array();   item01_word[0][0]="市长致词01";   item01_word[0][1]="市民意见";   item01_word[0][2]="市民投诉";   item01_word[1][0]="市政领导01";   item01_word[1][1]="部门机构";   item01_word[1][2]="部门职责";   item01_word[2][0]="最新发布01";   item01_word[2][1]="综合经济";   item01_word[2][2]="科教文化"; var item01_link=new Array();  //菜单的链接 The links of the child item for(i=0;i<item_num;i )   item01_link[i]=new Array();   item01_link[0][0]="#none";   item01_link[0][1]="#none"   item01_link[0][2]="#none"   item01_link[1][0]="#none";   item01_link[1][1]="#none";   item01_link[1][2]="#none";   item01_link[2][0]="#none";   item01_link[2][1]="#none";   item01_link[2][2]="#none"; var item01=new Array();  //菜单的HTML The HTML code of the child item for(i=0;i<item_num;i )   item01[i]=""; for(i=0;i<item_num;i )   for(j=0;j<item01_word[i].length;j )     item01[i] ="   | -<img border=0 src=list3.gif><a class=childlink href=" item01_link[i][j] " onclick=javascript:this.blur();>" item01_word[i][j] "</a> "; //------------定义一个清空各菜单的函数-------------- function closeItemTable01() {   for(i=0;i<item_num;i )   {     document.all.itemTable01.cells[2*i 1].innerHTML="";     item01Img[i].src="list.gif";   } } //------------------定义结束---------------------- //------------定义一个菜单展开的函数---------------- function openItemTable01(n) {   if(document.all.itemTable01.cells[n*2 1].innerHTML=="")   {     closeItemTable01();     item01Img[n].src="list2.gif";     document.all.itemTable01.cells[n*2 1].innerHTML=item01[n];   }   else     closeItemTable01(); } //------------------定义结束---------------------- var item01_view=new Array(); item01_view[0]="<table id=itemTable01 cellpadding=0 cellspacing=0 border=0>\n"; item01_view[1]="  <tr><td valign=bottom>  -<img name=item01Img name=treeImg src=list.gif border=0><a id=item_1 class=parentlink href=javascript: onclick=javascript:openItemTable01(0);this.blur();>市长室</a></td></tr>\n"; item01_view[2]="  <tr><td class=childlink></td></tr>\n"; item01_view[3]="  <tr><td valign=bottom>  -<img name=item01Img name=treeImg src=list.gif border=0><a id=item_2 class=parentlink href=javascript: onclick=javascript:openItemTable01(1);this.blur();>政府政务</a></td></tr>\n"; item01_view[4]="  <tr><td class=childlink></td></tr>\n"; item01_view[5]="  <tr><td valign=bottom>  -<img name=item01Img name=treeImg src=list.gif border=0><a id=item_3 class=parentlink href=javascript: onclick=javascript:openItemTable01(2);this.blur();>政策法规</a></td></tr>\n"; item01_view[6]="  <tr><td class=childlink></td></tr>\n"; item01_view[7]="</table>\n"; var item01_all=""; for(i=0;i<item01_view.length;i )   item01_all =item01_view[i]; </script>         <script> //菜单一 first item---------------------------------------------------------- var item_num=3;  //父层菜单的行数 Hom many rows is the parent item var item00_word=new Array();  //菜单的文字 The words of the child item for(i=0;i<item_num;i )   item00_word[i]=new Array();   item00_word[0][0]="市长致词00";   item00_word[0][1]="市民意见";   item00_word[0][2]="市民投诉";   item00_word[1][0]="市政领导00";   item00_word[1][1]="部门机构";   item00_word[1][2]="部门职责";   item00_word[2][0]="最新发布00";   item00_word[2][1]="综合经济";   item00_word[2][2]="科教文化"; var item00_link=new Array();  //菜单的链接 The links of the child item for(i=0;i<item_num;i )   item00_link[i]=new Array();   item00_link[0][0]="#none";   item00_link[0][1]="#none"   item00_link[0][2]="#none"   item00_link[1][0]="#none";   item00_link[1][1]="#none";   item00_link[1][2]="#none";   item00_link[2][0]="#none";   item00_link[2][1]="#none";   item00_link[2][2]="#none"; var item00=new Array();  //菜单的HTML The HTML code of the child item for(i=0;i<item_num;i )   item00[i]=""; for(i=0;i<item_num;i )   for(j=0;j<item00_word[i].length;j )     item00[i] ="   | -<img border=0 src=list3.gif><a class=childlink href=" item00_link[i][j] " onclick=javascript:this.blur();>" item00_word[i][j] "</a> "; //------------定义一个清空各菜单的函数-------------- function closeItemTable00() {   for(i=0;i<item_num;i )   {     document.all.itemTable00.cells[2*i 1].innerHTML="";     item00Img[i].src="list.gif";   } } //------------------定义结束---------------------- //------------定义一个菜单展开的函数---------------- function openItemTable00(n) {   if(document.all.itemTable00.cells[n*2 1].innerHTML=="")   {     closeItemTable00();     item00Img[n].src="list2.gif";     document.all.itemTable00.cells[n*2 1].innerHTML=item00[n];   }   else     closeItemTable00(); } //------------------定义结束---------------------- var item00_view=new Array(); item00_view[0]="<table id=itemTable00 cellpadding=0 cellspacing=0 border=0>\n"; item00_view[1]="  <tr><td valign=bottom>  -<img name=item00Img name=treeImg src=list.gif border=0><a id=item_1 class=parentlink href=javascript: onclick=javascript:openItemTable00(0);this.blur();>市长室</a></td></tr>\n"; item00_view[2]="  <tr><td class=childlink></td></tr>\n"; item00_view[3]="  <tr><td valign=bottom>  -<img name=item00Img name=treeImg src=list.gif border=0><a id=item_2 class=parentlink href=javascript: onclick=javascript:openItemTable00(1);this.blur();>政府政务</a></td></tr>\n"; item00_view[4]="  <tr><td class=childlink></td></tr>\n"; item00_view[5]="  <tr><td valign=bottom>  -<img name=item00Img name=treeImg src=list.gif border=0><a id=item_3 class=parentlink href=javascript: onclick=javascript:openItemTable00(2);this.blur();>政策法规</a></td></tr>\n"; item00_view[6]="  <tr><td class=childlink></td></tr>\n"; item00_view[7]="</table>\n"; var item00_all=""; for(i=0;i<item00_view.length;i )   item00_all =item00_view[i]; </script>         <script language=javascript> function closeTopTree() {   for(i=0;i<topTreeTable.cells.length/2;i )   {     topTreeTable.cells[2*i 1].innerHTML="";     treeImg[i].src="list.gif";   } } function openTopTree(n) {   if(topTreeTable.cells[2*n 1].innerHTML=="")   {     closeTopTree();     treeImg[n].src="list2.gif";     switch(n)     {       case 0 : {topTreeTable.cells[2*n 1].innerHTML=item00_all;break;}       case 1 : {topTreeTable.cells[2*n 1].innerHTML=item01_all;break;}       case 2 : {topTreeTable.cells[2*n 1].innerHTML=item02_all;break;}     }   }   else     closeTopTree(); } </script>             <div align="center">         <table id=topTreeTable style="border-collapse: collapse; background-repeat: repeat-y; background-position-x: 0px" height="100" class="z1">           <tr>             <td><img name=treeImg src=list.gif border=0 width="10" height="13"><a id=top1 href=#none onClick="openTopTree(0);">顶层一</a></td>           </tr>           <tr>             <td></td>           </tr>           <tr>             <td><img name=treeImg src=list.gif border=0 width="10" height="13"><a href=#none onClick="openTopTree(1);">顶层二</a></td>           </tr>           <tr>             <td></td>           </tr>           <tr>             <td><img name=treeImg src=list.gif border=0 width="10" height="13"><a href=#none onClick="openTopTree(2);">顶层三</a></td>           </tr>           <tr>             <td></td>           </tr>         </table>       </div>     </td>   </tr> </table> </body> </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
javascript 无限级横向下拉导航菜单效果
 导航菜单-三级折叠竖向下拉导航菜单效果
 jQuery菜单插件 Smooth Navigational Menu
jQuery ul标签下拉菜单演示代码
 横向javascript下拉二级菜单效果
 jquery无限层级下拉菜单实现代码
 jquery下拉菜单 ul标签下拉菜单的例子
 用jquery实现下拉菜单效果的代码
 Jquery 下拉菜单的实现代码一例
 jQuery水平下拉菜单 jMenu

上一篇：背景色调色板下一篇：tbody区域滚动条

[关闭]

三级下拉菜单

最近更新

浏览排行