简单又酷的菜单条

下面为效果显示

顶层一

顶层二

顶层三

脚本说明:
把如下代码加入<body>区域中
<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=20020403/list3.gif><a class=childlink href="+item02_link[i][j]+" onclick=javascript:this.blur();>"+item02_word[i][j]+"</a><br>";

//------------定义一个清空各菜单的函数--------------
function closeItemTable02()
{
  for(i=0;i<item_num;i++)
  {
    document.all.itemTable02.cells[2*i+1].innerHTML="";
	item02Img[i].src="20020403/list.gif";
  }
}
//------------------定义结束----------------------

//------------定义一个菜单展开的函数----------------
function openItemTable02(n)
{
  if(document.all.itemTable02.cells[n*2+1].innerHTML=="")
  {
    closeItemTable02();
	item02Img[n].src="20020403/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=20020403/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=20020403/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=20020403/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=20020403/list3.gif><a class=childlink href="+item01_link[i][j]+" onclick=javascript:this.blur();>"+item01_word[i][j]+"</a><br>";

//------------定义一个清空各菜单的函数--------------
function closeItemTable01()
{
  for(i=0;i<item_num;i++)
  {
    document.all.itemTable01.cells[2*i+1].innerHTML="";
	item01Img[i].src="20020403/list.gif";
  }
}
//------------------定义结束----------------------

//------------定义一个菜单展开的函数----------------
function openItemTable01(n)
{
  if(document.all.itemTable01.cells[n*2+1].innerHTML=="")
  {
    closeItemTable01();
	item01Img[n].src="20020403/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=20020403/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=20020403/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=20020403/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=20020403/list3.gif><a class=childlink href="+item00_link[i][j]+" onclick=javascript:this.blur();>"+item00_word[i][j]+"</a><br>";

//------------定义一个清空各菜单的函数--------------
function closeItemTable00()
{
  for(i=0;i<item_num;i++)
  {
    document.all.itemTable00.cells[2*i+1].innerHTML="";
	item00Img[i].src="20020403/list.gif";
  }
}
//------------------定义结束----------------------

//------------定义一个菜单展开的函数----------------
function openItemTable00(n)
{
  if(document.all.itemTable00.cells[n*2+1].innerHTML=="")
  {
    closeItemTable00();
	item00Img[n].src="20020403/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=20020403/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=20020403/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=20020403/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>

function closeTopTree()
{
  for(i=0;i<topTreeTable.cells.length/2;i++)
  {
    topTreeTable.cells[2*i+1].innerHTML="";
	treeImg[i].src="20020403/list.gif";
  }
}

</script>
<table id=topTreeTable background=20020403/line1 style="border-collapse: collapse; background-image: url('20020403/line.gif'); background-repeat: repeat-y; background-position-x: 0px" cellpadding=0 cellspacing=0 border=0>
  <tr>
    <td height=20><img name=treeImg src=20020403/list.gif border=0><a id=top1 href=#none onclick="openTopTree(0);">顶层一</a></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td height=20><img name=treeImg src=20020403/list.gif border=0><a href=#none onclick="openTopTree(1);">顶层二</a></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td height=20><img name=treeImg src=20020403/list.gif border=0><a href=#none onclick="openTopTree(2);">顶层三</a></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>