JavaScript自定义多级联动浮动菜单[一]

发布时间：2018-08-19 19:18:53 所属栏目：模式来源：站长网

导读：烈火网教程类似的多级浮动菜单网上也很多实例，但大部分都是只针对一种情况或不够灵活，简单说就是做死了的。所以我就想到做一个能够自定义菜单的，有更多功能的多级浮动菜单。而其中的关键就是怎么根据自定义的菜单结构来生成新菜单，关键中的难点就是怎

　　烈火网教程类似的多级浮动菜单网上也很多实例，但大部分都是只针对一种情况或不够灵活，简单说就是做死了的。所以我就想到做一个能够自定义菜单的，有更多功能的多级浮动菜单。而其中的关键就是怎么根据自定义的菜单结构来生成新菜单，关键中的难点就是怎么得到下级菜单结构和容器对象的使用。

　　理想的做法是每次有下级菜单时，从对象直接取得下级菜单结构，放到容器对象中，并且容器能重用，而不是每次都重新生成。但想了很久也想不到适合的做法，直到做了多级联动下拉菜单终于得到了灵感。放弃了直接取得下级菜单结构，而是每次都从原来的菜单结构中获取当前需要的下级菜单结构。容器对象也不是自动生成，而是由用户先定义好（后来也做到能自动生成了）。

　　先来看一下演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title><b>Java</b>Script 自定义多级联动浮动菜单_烈火网liehuo.net</title> <style type="text/css"> .container { width:100px; } .container div { width:100px; background:#CCCCCC; line-height:30px; border:1px solid #000000; } .on { font-weight:bold; } .container2 { width:100px; text-align:center; } .container2 div { width:100px; line-height:30px; } .container2 a { text-decoration:none; display:block; border:1px solid #d4d4d3; background:#e6e6e6; color:#000000; } /*文章来自：烈火网　www.veryhuo.com*/ .container2 .on a { background:#ffebac; color:#982e00; border-color:#ffb200; } #idMenu2 { clear:both; width:auto; } #idMenu2 div { float:left; } #idMenu2_6 a { background-color:red; border-color:red; color:#ffb200; } </style> </head> <body> <div id="idMenu1" class="container"></div> <br /> <br /> <br /> <div> <input id="btnB" type="button" value="添加菜单" /> <input id="btnC" type="button" value="减少菜单(第二个)" /> <input id="btnA" type="button" value="不延迟" /> <input id="btnD" type="button" value="延迟500" /> </div> <br /> <div id="idMenu2" class="container2"></div> <div id="idMenu2_1" class="container2"></div> <div id="idMenu2_2" class="container2"></div> <div id="idMenu2_3" class="container2"></div> <div id="idMenu2_4" class="container2"></div> <div id="idMenu2_5" class="container2"></div> <div id="idMenu2_6" class="container2"></div> </body> </html>
提示：可修改后代码再运行!

　　放下了这些包袱后，后面的开发就顺畅了。

　　特点：
　　1.根据自定义菜单结构生成菜单；
　　2.多级联动功能；
　　3.自定义浮动位置（上下左右）；
　　4.自定义延迟效果；
　　5.js控制编辑菜单；
　　6.可根据需要自动生产容器对象

　　程序原理

　　程序是根据传统浮动菜单扩展而来，这里说一下几个比较关键或有用的地方：

　　【延时功能】

　　这个很多人都懂，就是设个setTimeout计时器，这里有两个计时器，分别是容器计时器和菜单计时器。容器计时器的作用是鼠标移到容器外面时隐藏容器，难点是如何判断当前鼠标是不是在容器外面。一般的方法是设个bool参数，mouseout时设为false，mouseover时设为true（or倒过来），再根据这个参数判断，但这个方法在这个不行，经过容器里的菜单对象时会触发容器mouseout，由于事件冒泡，菜单对象的mouseout也会触发容器的mouseout。

　　这里推荐一个方法，使用contains(ff是compareDocumentPosition)方法。
　　这个方法是我做图片滑动展示效果时muxrwc教我的。

　　详细参考仿LightBox内容显示效果，而菜单计时器就没什么特别，就是用来设置菜单内容。

（编辑：海南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!