写了一个类似window风格的菜单,套用起来很方便.

来源：互联网发布：桥本环奈长相知乎编辑：程序博客网时间：2024/05/21 07:49

写了一个类似window风格的菜单，尽量使javascript和html分离。套用起来很方便。
用了attachEvent动态设置div的事件,另外getElementsByTagName函数也是个好东东:)读取了某个html元素的集合.
这样就可以按照简单的规则添加自己的菜单了

演示地址：http://211.144.136.130/county/menu/menu.htm
源代码:http://211.144.136.130/county/menu/menu.rar

原来已经5:00了,为什么，为什么只能晚上才能做点东西?
人家都说晚上是身体系统杀毒的时候，看来我身体里病毒不少了,
md,我还没娶老婆呢，什么时候好好杀杀，不知道有啥好软件:);

看看咋用这个东东:

请符合以下规则:

引入css和js
<link rel='stylesheet' type='text/css' href='Menu.css' />
<link rel='stylesheet' type='text/css' href='liCss.css' />
<script language="javascript" src="menu.js"></script>
<script language="javascript" src="plane.js"></script>

菜单规则:

<div id="mnpMenuTop"> -------------------------------------最顶层Div id必须为 mnpMenuTop
<div class="mnpMenuRow"> ---------------------------主菜单项 class必须为 mnpMenuRow
用户管理
</div>

<div class="plan"> --------------------------------菜单面板class必须为 plan

<a href="#"><li><img src=user.gif border= 0 >添加用户</li></a>----详细菜单必须嵌套一个 li
</div>

</div>

符合以上几项规则，样式可根据注释和自己的风格更改
其中主菜单样式在menu.css中
主要css有:
mnpMenuRow : 默认的主菜单样式既为鼠标抬起样式
downCss :鼠标放下时的样式
overCss: 鼠标放上后的样式

详细菜单样式在licss.css中
主要css有:
li : 默认详细样式
LiOver: 鼠标放上后的样式
LiDown:鼠标放下时的样式

关键代码:

//初始化各个菜单的事件
function mnpMenuAttach(el){
  divs = el.getElementsByTagName("DIV");

  var count = divs.length;

  for (var i =0;i<count ;i++ )
  {
   var div = divs.item(i);
   if (div.className == "mnpMenuRow"){
    div.attachEvent("onmouseenter", mnpMenuMouseover);
    div.attachEvent("onmouseleave", mnpMenuMouseout);
    div.attachEvent("onmousedown", mnpMenuMousedown);
    div.attachEvent("onmouseup", mnpMenuMouseup);
   }

div.setAttribute("id", i); //标识每个div
}

}

//展开一个菜单
function deployMenu(objMenu){
if(objMenu!=null){
  if(objMenu.className==deploycss){
   backMenu(tempMenu);
   objMenu.className=hiddencss;
   depMenu = objMenu;
   var h = getLiHeight(depMenu)

   if (h>100)
   {
    timeN = 8;
   }

   if (h>LiH)
   {
    LiH = h+90;
   }

   depMenu.style.height = 0;
   extendMenu();
   tempMenu = objMenu;
  }
}
}

//显示li
function deployLI(objDiv){
var lis = objDiv.getElementsByTagName("li");
var count = lis.length;
for(var i= 0;i<count;i++){
lis.item(i).className="Deployli";
}
}

//隐藏LI
function HiddenLI(objDiv){
var lis = objDiv.getElementsByTagName("li");
var count = lis.length;
for(var i= 0;i<count;i++){
lis.item(i).className="HiddenLI";
}
}

基本上也就是这些东西了