简单控制的无限级菜单代码(ie)

<style>
.menu_right
{
 position:absolute;
 display:none;
 border:1px solid #808080;
 color:black;
 background:#d4d0c8;
 font-size:13px;
 font-family:'宋体';
 padding:2px 2px 2px 2px;
 top:3px;
 left:3px;
}
.menu_right a
{
  white-space:nowrap;
  display:block;
  text-decoration: none;
  color:black;
  border:1px solid #d4d0c8;
  background:transparent;
}
.menu_right a:hover
{
  border:1px solid #0a246a;
  background:#316ac5;
}
.menu_right a:visted
{
  border:1px solid #d4d0c8;
  background:transparent;
}
.menu_right a:active 
{
  border:1px solid #d4d0c8;
  background:transparent;
}

----------

 

document.body.onload = function()
{//初始化
 reset_editor();
 set_menu_right();
}

//右键菜单
//var menu_a_a =[]; 自动创建

function create_a(a_n)
{//数组不存在创建
  if ( (typeof(a_n) != 'string')  || (a_n=='') ) a_n = 'menu_a_a';
 
  if (typeof(eval('window.' + a_n)) != 'object')
  {
    eval('window.' + a_n + '= [];');
  }
 
  return a_n;
}

function set_index(a_n,a_i)
{//设置下标,或取最后下标
   a_n = create_a(a_n);
 
   if ( (typeof(a_i) == 'number') && (a_i > -1) && (a_i < menu_a_a.length) )
   {//把指定位置让出,并移出当前位置对象到最后.
     eval('window.' + a_n + '[window.' + a_n + '.length] = window.' + a_n + '[' + a_i + ']');
     return parseInt(a_i);
   }
  
   return eval('window.' + a_n + '.length');
}

function set_menu_a(a_v,a_n,a_i,a_null)
{//初始数组
  if (a_null) eval('window.' + a_n + '= [];');//清空
  else a_n = create_a(a_n);
 
  eval('window.' + a_n +'[set_index("' + a_n + '",' + a_i + ') ] = a_v');
  //alert(eval('window.' + a_n));
}

function set_menu_right()
{//初始菜单
 var menu_obj = document.createElement('DIV');//主菜单div
 menu_obj.id='menu_right';
 menu_obj.className='menu_right';
 menu_obj.style.left='3px';
 document.body.insertBefore(menu_obj);
 
 menu_obj = document.createElement('SPAN');//主菜单点击事件
 menu_obj.id='menu_focus';
 menu_obj.tabIndex='1';//可以获得焦点
 menu_obj.onblur=hide_menu;
 menu_right.insertBefore(menu_obj);
 //alert(window.menu_a_a);
 show_menu_a(window.menu_a_a,menu_right);
}

function show_menu_a(menu_a,menu_div)
{//初始子菜单
  for(var for_i =0; for_i < menu_a.length;for_i++)
  {           
      var menu_div_a = document.createElement('A');
      menu_div_a.href='#';
      //alert(menu_a[for_i]);
      if (menu_a[for_i].length == 2)
      {//有子菜单
        
         var sub_a = menu_a[for_i][0];
         menu_div_a.innerText= sub_a.text + '  >>';
         var menu_div_sub = document.createElement('DIV');
         var sub_id = menu_div.id+'_' + for_i;
         menu_div_sub.id=sub_id;
         menu_div_sub.className='menu_right';
         menu_div_a.onmouseenter=new Function( 'var sub_div = ' + sub_id + ';'
                                            + "sub_div.style.display = 'block';"
                                            + 'sub_div.style.left= sub_div.parentElement.offsetWidth -5) + "px";'
                                            + 'sub_div.style.top = sub_div.parentElement.offsetTop + "px";'
                                            + "window.last_menu_id = '" + sub_id + "';"
                                            );//移动菜单上,弹出子菜单
                                           
         menu_div_a.onmouseleave=new Function( 'var sub_div = ' + sub_id + ";"
                                            + "sub_div.style.display = 'none';"
                                            );//移动菜单上,隐藏子菜单
         menu_div.insertBefore(menu_div_a);
         menu_div_a.insertBefore(menu_div_sub);
         show_menu_a(menu_a[for_i][1],menu_div_sub);        
      }else
       {
         var sub_a = menu_a[for_i];
         if (sub_a.fun_clk)
           menu_div_a.onclick=new Function(sub_a.fun_clk);      
          menu_div_a.innerText= sub_a.text;
          menu_div.insertBefore(menu_div_a);
       }
  }
}

function hide_menu()
{
  window.menu_timer = setTimeout(
  function(){
   while(window.last_menu_id != 'menu_right')
   {//隐藏子菜单
     eval(window.last_menu_id).style.display= 'none';
     window.last_menu_id = window.last_menu_id.replace(/_/d+$/g,'');
   }
   menu_right.style.display='none';
   },200);
}

textarea_js.oncontextmenu=function ()
{
 clearTimeout(window.menu_timer);
 get_e('menu_right').style.display='block';
 get_e('menu_focus').focus();
 event.returnValue =false;
 return false;
}

//右键菜单

//V
          
set_menu_a( {'text':'obj.outerHTML','fun_clk':'textarea_js.value = window.obj.outerHTML'},'',3);

//^
//V          
set_menu_a( {'text':'菜单4','fun_over':'document.title="有子菜单";','fun_out':'document.title="";'},'menu_sub_a',-1,1);
set_menu_a( {'text':'菜单4','fun_over':'document.title="有子菜单";','fun_out':'document.title="";'},'menu_sub_a');
set_menu_a( {'text':'菜单4','fun_over':'document.title="有子菜单";','fun_out':'document.title="";'},'menu_sub_a');
        
set_menu_a( [{'text':'菜单3'},window.menu_sub_a],'menu_sub_a2',-1,1);
set_menu_a( {'text':'菜单3','fun_over':'document.title="有子菜单";','fun_out':'document.title="";'},'menu_sub_a2');
set_menu_a( {'text':'菜单3','fun_over':'document.title="有子菜单";','fun_out':'document.title="";'},'menu_sub_a2');

set_menu_a( [{'text':'菜单2','fun_over':'document.title="有子菜单";','fun_out':'document.title="";'},window.menu_sub_a2],'menu_sub_a',-1,1);
set_menu_a( {'text':'查看菜单代码','fun_clk':'alert(menu_right.outerHTML);','fun_out':'document.title="";'},'menu_sub_a');
set_menu_a( {'text':'菜单2','fun_over':'document.title="有子菜单";','fun_out':'document.title="";'},'menu_sub_a');
set_menu_a( [{'text':'帮助'},window.menu_sub_a],'',0);
//^

------------

 

实现思路;

数组实现

每一维放一菜单对象{属性名:属性值},如果此菜单有子菜单,那么,此项就放[{当前菜单对象},下级菜单数组];

每个下级菜单数组组成跟父菜单一样;

这样就可以达到无限级;

接着就是按此数组组成方式显示菜单;

然后就是控制菜单定位和隐藏了;