Javascript Menu 代码

只为了显现一个简单的menu，网上搜了不少代码。 但要么就是太复杂，搞得我改都无从改，要么就是不符合我的需求。结果自己静下心 20分钟就搞定了， -_-b ，找了大概2小时啊，汗呐。

非常简单的要求：

1. 必须是js代码，因为我要实现menu在很多页面里都要用，如果掺了html就要用iframe之类的，iframe毕竟不舒服啊。
2. 对界面没什么要求，简单的ul和li就行了，css沿用站点的，无须另外配。
3. 多级目录结构
4. 每层menu可以是链接，也可以是打开子目录
5. 可复用，其实就是实现类似jsp的<%@include file="">的作用，只是我没有服务器，所以只好用js啦。
   

先看效果：



以下是我的代码：

<div id="soya_menus">
</div>
<script language="JavaScript">

var MENU_ITEMS = [
['Ray',{ href : 'http://raythking.blogspot.com/',target : "_blank" }],
['Google',null,[
  ['Web',{ href : 'http://www.google.com',target : "_blank"}],
  ['Image',{ href : 'http://images.google.com',target : "_blank"}],
  ['Video',{ href : 'http://video.google.com',target : "_blank"}]
 ]
],
['Baidu', null,[
  ['Index',{ href : 'http://www.baidu.com/',target : "_blank"}],
  ['Zhidao',{ href : 'http://zhidao.baidu.com/',target : "_blank"}]
 ]
],
['Sogou',{ href : 'http://www.sogou.com/',target : "_blank"}],
['About',{ href : 'javascript:alert(" This is a simple javascript menu !")',target : "_self"}]
];


function showSubMenu( tolist ){
var sublist = document.getElementById(tolist);

if(sublist.style.display == ""){
 sublist.style.display = "none";
}else{
 sublist.style.display = "";
}
}

function insertMenu(divarea){
document.getElementById(divarea).innerHTML=createMenu(MENU_ITEMS,"soya_menu");
showSubMenu("soya_menu");
}

function createMenu(menu_it,id_pre){
var html="<ul id='"+id_pre+"' style='display:none;padding-top:8px' >";
for( var i=0 ; i<menu_it.length; ++i){
 var sub_id_pre=id_pre+"m"+i;
 html += "<li>";
 if(menu_it[i][1]){
  html += "<a href='"+menu_it[i][1]+"'>";
  html += menu_it[i][0];
  html += "</a>";
 }else if(menu_it[i][2]){
  html += "<a href='"+menu_it[i][1].href+"' target='"+menu_it[i][1].target+"'>";
  html += menu_it[i][0];
  html += "</a>";
  html += createMenu(menu_it[i][2],sub_id_pre);
 }else{
  html += menu_it[i][0];
 }

 html += "</li>";
}
html +="</ul>";

return html;
}

insertMenu("soya_menus");

</script>