首页 > 其他分享 >简单控制的无限级菜单代码(ie)

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

时间:2023-04-28 22:35:42浏览次数:33  
标签:菜单 sub menu 代码 window div document 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.ο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

相关文章

  • 动态增加表单方法--ff/ie
    ---------------------增加方法----------------------------<h3><center>批量增加评论</center></h3><BR><formaction=""method="post"οnsubmit="returncheck_form();"><inputtype="button"va......
  • css3效果真Nb,可惜的ie
    <!DOCTYPEHTMLPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content=&quo......
  • 不跳动(除了ie6) 总在最右下角
    <mce:scripttype="text/javascript"><!--window.onresize=window.onscroll=window.onload=function(){varwin_w=document.documentElement.clientWidth;//窗口宽varspace_w=0;//左空白宽if(win_w>1000){//窗口大于ma......
  • ie6 ie 8 ff 总在页脚右下角的绝对定位top div
    top.jsfunctionsetH(){varmain_div_w=1010;vardiv_w=$e('top_t').offsetWidth;vardiv_h=$e('top_t').offsetHeight;//下面二行必须定义docw3c标准varwin_w=document.documentElement.clientWidth;varwi......
  • 插入随机/跟随鼠标/点击一次即消失/漂浮图片(ie测试通过)
    //跟随方法比document.click不足之处:当出现cpu占用过高时,会出现跟随不上现象,导致此次点击并不能弹出窗口varimgs=newArray("http://www.google.cn/intl/zh-CN/images/logo_cn.gif","http://hp.tom.com/images/logo.gif","htt......
  • 支持ff/ie的form内容必填出错提示
    当前控件填写有误,则后面显示表示错误图片,并首个对象获得焦点,ff/ie通过 可以修改一下js达到不必每个控件后面先放一图片,可以动态生成,再消掉<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htm......
  • 提供远程网页操作的hta代码,用于不停的检测自已打开句柄被其它open抢占捉取用.
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-......
  • 《代码大全》读书笔记3
    第七章是《代码大全》中关于代码优化的章节,对于软件工程师来说,良好的代码优化技能是非常重要的。在这一章中,作者详细介绍了如何进行代码优化,包括性能调整、空间利用、算法和数据结构的优化等方面的内容。通过阅读这一章,我深刻地认识到了代码优化的重要性,并学习了许多实用的技巧和......
  • 代码大全1
    与以前读过的《重构》一样,这本书里有很多经验在实际开发中都慢慢摸索了出来或是从其他书籍论坛中学习到过,但是更多的是完全没有意识到和模模糊糊没有形成明确概念的内容:例如第30章编程工具里有“工具导向的环境”这样的内容,虽然在开发过程中会有意识地去制作一些工具,但是没有形成......
  • 4.28代码大全读后感3
    最近在《代码大全》这本书,包括的内容非常多,从软件设计到代码开发,团队管理都有,更像是一个软件编程领域的百科全书.但是,对于书中提到的一点印象最为深刻,其实在《人月神话》和《卓有成效的程序员》这两本书都有提到,那就是:软件设计与开发的核心就在于控制复杂......