JavaScript自定义多级联动浮动菜单[一]
|
烈火网教程 类似的多级浮动菜单网上也很多实例，但大部分都是只针对一种情况或不够灵活，简单说就是做死了的。所以我就想到做一个能够自定义菜单的，有更多功能的多级浮动菜单。而其中的关键就是怎么根据自定义的菜单结构来生成新菜单，关键中的难点就是怎么得到下级菜单结构和容器对象的使用。 理想的做法是每次有下级菜单时，从对象直接取得下级菜单结构，放到容器对象中，并且容器能重用，而不是每次都重新生成。但想了很久也想不到适合的做法，直到做了多级联动下拉菜单终于得到了灵感。放弃了直接取得下级菜单结构，而是每次都从原来的菜单结构中获取当前需要的下级菜单结构。容器对象也不是自动生成，而是由用户先定义好（后来也做到能自动生成了）。 先来看一下演示：
放下了这些包袱后，后面的开发就顺畅了。 特点： 程序原理 程序是根据传统浮动菜单扩展而来，这里说一下几个比较关键或有用的地方： 【延时功能】 这个很多人都懂，就是设个setTimeout计时器，这里有两个计时器，分别是容器计时器和菜单计时器。容器计时器的作用是鼠标移到容器外面时隐藏容器，难点是如何判断当前鼠标是不是在容器外面。一般的方法是设个bool参数，mouseout时设为false，mouseover时设为true（or倒过来），再根据这个参数判断，但这个方法在这个不行，经过容器里的菜单对象时会触发容器mouseout，由于事件冒泡，菜单对象的mouseout也会触发容器的mouseout。
这里推荐一个方法，使用contains(ff是compareDocumentPosition)方法。
详细参考仿LightBox内容显示效果，而菜单计时器就没什么特别，就是用来设置菜单内容。
（编辑：厦门网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
