<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.οnblur=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.οnmοuseenter=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.οnmοuseleave=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.οnclick=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.οncοntextmenu=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);
//^------------
实现思路;
数组实现
每一维放一菜单对象{属性名:属性值},如果此菜单有子菜单,那么,此项就放[{当前菜单对象},下级菜单数组];
每个下级菜单数组组成跟父菜单一样;
这样就可以达到无限级;
接着就是按此数组组成方式显示菜单;
然后就是控制菜单定位和隐藏了;
标签:菜单,sub,menu,代码,window,div,document,ie
From: https://blog.51cto.com/u_252283/6235713