<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript 多级联动浮动菜单</title> <script type="text/javascript" src="aCJL.0.1.min.js"></script> <script src="http://localhost:53354/Content/CJL.0.1.js"></script> <script type="text/javascript" src="RelativePosition.js"></script> <script type="text/javascript"> //容器集合 var FixedMenu = function (containers, options) { this._timerContainer = null;//容器定时器 this._timerMenu = null;//菜单定时器 this._frag = document.createDocumentFragment();//碎片对象，保存菜单元素 this._menus = {};//菜单对象 this._containers = [];//容器集合 this._setOptions(options); var opt = this.options; this._custommenu = opt.menu; this.css = opt.css; this.hover = opt.hover; this.active = opt.active; this.tag = opt.tag; this.html = opt.html; this.relContainer = opt.relContainer; this.relative = opt.relative; this.attribute = opt.attribute; this.property = opt.property; this.onBeforeShow = opt.onBeforeShow; this.delay = parseInt(opt.delay) || 0; //修正自定义容器 $$A.forEach($$A.isArray(containers) ? containers : [containers], function (o, i, zz) { //自定义容器 id:定位元素 menu:插入菜单元素 var pos, menu; if (o.id) { pos = o.id; menu = o.menu ? o.menu : pos; } else { pos = menu = o; }; pos = $$(pos); menu = $$(menu); //容器对象 pos:定位元素 menu:插入菜单元素 pos && menu && this._iniContainer(i, { "pos": pos, "menu": menu }); }, this); //初始化程序 this._iniMenu(); }; FixedMenu.prototype = { //设置默认属性 _setOptions: function (options) { this.options = {//默认值 menu: [],//自定义菜单集合 delay: 200,//延迟值(微秒) tag: "div",//默认生成标签 css: undefined,//默认样式 hover: undefined,//触发菜单样式 active: undefined,//显示下级菜单时显示样式 html: "",//菜单内容 relContainer: false,//是否相对容器定位（否则相对菜单） relative: { align: "clientleft", vAlign: "bottom" },//定位对象 attribute: {},//自定义attribute属性 property: {},//自定义property属性 onBeforeShow: function () { }//菜单显示时执行 }; $$.extend(this.options, options || {}); }, //程序初始化 _iniMenu: function () { this.hide();//隐藏菜单 this._buildMenu();//生成菜单对象 this._forEachContainer(this._resetContainer);//重置容器属性 this._insertMenu(0, 0);//显示菜单 }, //根据自定义菜单对象生成程序菜单对象 _buildMenu: function () { //清除旧菜单dom(包括自定义的) this._forEachMenu(function (o) { var elem = o._elem; if (elem) { //防止dom内存泄漏 $$E.removeEvent(elem, "mouseover", o._event); elem.parentNode.removeChild(elem); o._elem = o.elem = null; }; }); //设置菜单默认值 var options = { id: 0,//id rank: 0,//排序 elem: "",//自定义元素 tag: this.tag, css: this.css, hover: this.hover, active: this.active, html: this.html, relContainer: !!this.relContainer, relative: this.relative, attribute: this.attribute, property: this.property }; //先定义"0"顶级菜单 this._menus = { "0": { "_children": [] } }; //整理自定义菜单并插入到程序菜单对象 $$A.forEach(this._custommenu, function (o) { //生成菜单对象(由于包含对象，要用深度扩展) var menu = $$.deepextend($$.deepextend({}, options), o || {}); //去掉相同id菜单，同时排除了id为"0"的菜单 if (!!this._menus[menu.id]) { return; }; //重置属性 menu._children = []; menu._index = -1; this._menus[menu.id] = menu; }, this); //建立树形结构 this._forEachMenu(function (o, id, menus) { if ("0" === id) { return; };//顶级没有父级菜单 var parent = this._menus[o.parent]; //父级菜单不存在或者父级是自己的话，当成一级菜单 if (!parent || parent === o) { parent = menus[o.parent = "0"]; }; //插入到父级菜单对象的_children中 parent._children.push(o); }); //整理菜单对象 this._forEachMenu(function (o) { //如果有自定义元素的话先放到碎片文档中 !!o.elem && (o.elem = $$(o.elem)) && this._frag.appendChild(o.elem); //修正样式,优先使用自定义元素的class if (!!o.elem && o.elem.className) { o.css = o.elem.className; } else if (o.css === undefined) { o.css = ""; }; if (o.hover === undefined) { o.hover = o.css; }; if (o.active === undefined) { o.active = o.hover; }; //对菜单对象的_children集合排序(先按rank再按id排序) o._children.sort(function (x, y) { return x.rank - y.rank || x.id - y.id; }); }); }, //插入菜单 _insertMenu: function (index, parent) { var container = this._containers[index]; //如果是同一个父级菜单不用重复插入 if (container._parent === parent) { return; }; container._parent = parent; //把原有容器内菜单移到碎片对象中 $$A.forEach(container._menus, function (o) { o._elem && this._frag.appendChild(o._elem); }, this); //重置子菜单对象集合 container._menus = []; //把从父级菜单元素的子菜单对象集合获取的元素插入到容器 $$A.forEach(this._menus[parent]._children, function (menu, i) { this._checkMenu(menu, index);//检查菜单 container._menus.push(menu);//加入到容器的子菜单集合，方便调用 container.menu.appendChild(menu._elem);//菜单元素插入到容器 }, this); }, //检查菜单 _checkMenu: function (menu, index) { //索引保存到菜单对象属性中，方便调用 menu._index = index; //如果菜单对象没有元素 if (!menu._elem) { var elem = menu.elem; //如果没有自定义元素的话创建一个 if (!elem) { elem = document.createElement(menu.tag); elem.innerHTML = menu.html; }; //设置property $$.extend(elem, menu.property); //设置attribute var attribute = menu.attribute; for (var att in attribute) { elem.setAttribute(att, attribute[att]); }; //设置样式 elem.className = menu.css; //设置事件 menu._event = $$F.bindAsEventListener(this._hoverMenu, this, menu);//用于清除事件 $$E.addEvent(elem, "mouseover", menu._event); //保存到菜单对象 menu._elem = elem; }; }, //触发菜单 _hoverMenu: function (e, menu) { var elem = menu._elem; //如果是内部元素触发直接返回 if ($$D.contains(elem, e.relatedTarget) || elem === e.relatedTarget) { return; }; clearTimeout(this._timerMenu); //可能在多个容器间移动，所以全部容器都重新设置样式 this._forEachContainer(function (o, i) { if (o.pos.visibility === "hidden") { return; }; this._resetCss(o); //设置当前菜单为active样式 var menu = o._active; if (menu) { menu._elem.className = menu.active; }; }); //设置当前菜单为触发样式 if (this._containers[menu._index]._active !== menu) { elem.className = menu.hover; }; //触发显示菜单 this._timerMenu = setTimeout($$F.bind(this._showMenu, this, menu), this.delay); }, //显示菜单 _showMenu: function (menu) { var index = menu._index, container = this._containers[index], child = !!menu._children.length; //隐藏不需要的容器 this._forEachContainer(function (o, i) { i > index && this._hideContainer(o); }); //重置当前容器_active container._active = null; //如果有子级菜单 if (child) { //设置当前容器_active container._active = menu; //显示下一级容器 index++;//设置索引 this._checkContainer(index);//检查容器 this._insertMenu(index, menu.id);//插入菜单 this._showContainer(menu);//显示容器 }; //重置当前容器的css this._resetCss(container); //设置当前菜单样式 menu._elem.className = child ? menu.active : menu.hover; }, //初始化容器(索引, 容器元素) _iniContainer: function (index, container) { var oContainer = container.pos; //重置属性 this._resetContainer(container); //添加事件 $$E.addEvent(oContainer, "mouseover", $$F.bind(function () { clearTimeout(this._timerContainer); }, this)); $$E.addEvent(oContainer, "mouseout", $$F.bindAsEventListener(function (e) { //先判断是否移出到所有容器之外 var elem = e.relatedTarget, isOut = $$A.every(this._containers, function (o) { return o.pos == elem || !($$D.contains(o.pos, elem)); }); if (isOut) { //清除定时器并隐藏 clearTimeout(this._timerContainer); clearTimeout(this._timerMenu); this._timerContainer = setTimeout($$F.bind(this.hide, this), this.delay); }; }, this)); //除了第一个容器外设置浮动样式 if (index) { $$D.setStyle(container.pos, { position: "absolute", display: "block", margin: 0, zIndex: this._containers[index - 1].pos.style.zIndex + 1//要后面的覆盖前面的 }); }; //ie6处理select if ($$B.ie6) { var iframe = document.createElement("<iframe style='position:absolute;filter:alpha(opacity=0);display:none;'>"); document.body.insertBefore(iframe, document.body.childNodes[0]); container._iframe = iframe; }; //记录索引，方便调用 container._index = index; //插入到容器集合 this._containers[index] = container; }, //检查容器 _checkContainer: function (index) { if (index > 0 && !this._containers[index]) { //如果容器不存在，根据前一个容器复制成新容器，第一个容器必须自定义 var pre = this._containers[index - 1].pos //用了新的添加事件方式，没有ie的cloneNode的bug , container = pre.parentNode.insertBefore(pre.cloneNode(false), pre); //清除id防止冲突 container.id = ""; //初始化容器 this._iniContainer(index, { "pos": container, "menu": container }); }; }, //显示容器 _showContainer: function (menu) { var index = menu._index , container = this._containers[index + 1].pos , elem = menu.relContainer ? this._containers[index].pos : menu._elem , pos = RelativePosition(elem, container, menu.relative); //执行显示前事件 this.onBeforeShow(container, menu); //定位并显示容器 $$D.setStyle(container, { left: pos.Left + "px", top: pos.Top + "px", visibility: "visible" }); //ie6处理select if ($$B.ie6) { $$D.setStyle(this._containers[index + 1]._iframe, { container.offsetWidth + "px", height: container.offsetHeight + "px", left: pos.Left + "px", top: pos.Top + "px", display: "" }); }; }, //隐藏容器 _hideContainer: function (container) { //设置隐藏 $$D.setStyle(container.pos, { left: "-9999px", top: "-9999px", visibility: "hidden" }); //重置上一个菜单的触发菜单对象 this._containers[container._index - 1]._active = null; //ie6处理select if ($$B.ie6) { container._iframe.style.display = "none"; }; }, //重置容器对象属性 _resetContainer: function (container) { container._active = null;//重置触发菜单 container._menus = [];//重置子菜单对象集合 container._parent = -1;//重置父级菜单id }, //隐藏菜单 hide: function () { this._forEachContainer(function (o, i) { if (i === 0) { //如果是第一个重设样式和_active this._resetCss(o); } else {//隐藏容器 this._hideContainer(o); }; }); }, //重设容器菜单样式 _resetCss: function (container) { $$A.forEach(container._menus, function (o, i) { o._elem.className = o.css; }, this); }, //历遍菜单对象集合 _forEachMenu: function (callback) { for (var id in this._menus) { callback.call(this, this._menus[id], id, this._menus); }; }, //历遍容器对象集合 _forEachContainer: function (callback) { $$A.forEach(this._containers, callback, this); }, //添加自定义菜单 add: function (menu) { this._custommenu = this._custommenu.concat(menu); this._iniMenu(); }, //修改自定义菜单 edit: function (menu) { $$A.forEach($$A.isArray(menu) ? menu : [menu], function (o) { //如果对应id的菜单存在 if (o.id && this._menus[o.id]) { //从自定义菜单中找出对应菜单,并修改 $$A.every(this._custommenu, function (m, i) { if (m.id === o.id) { this._custommenu[i] = $$.deepextend(m, o); return false; }; return true; //用every可以跳出循环 }, this); }; }, this); this._iniMenu(); }, //删除自定义菜单 del: function () { var ids = Array.prototype.slice.call(arguments); this._custommenu = $$A.filter(this._custommenu, function (o) { return $$A.indexOf(ids, o.id) === -1; }); this._iniMenu(); } }; </script> </head> <body> <div id="WriteDiv"></div> <style type="text/css"> .container1 { height: 30px; } .container1 div { float: left; } .container1 div, .container1_2 div { width: 100px; background: #FAFCFD; border: 1px solid #5c9cc0; padding: 10px; } div.on1 { font-weight: bold; background: #EEF3F7; } div.on1_2 { font-weight: bold; background: #fffff7; border: 1px solid #ffcc00; } </style> 菜单使用演示： <br> <br> <div id="idContainer1" class="container1"></div> <div id="idContainer1_2" class="container1_2"></div> <br> <select> <option>-------------test-------------</option> </select> <br> <br> <br> <br> <br> <br> <br> <br> <br> <input id="idEdit" type="button" value="添加菜单 +" /> 位置： <select id="idRank"> <option value="3">第四个 </option> <option value="2">第三个</option> <option value="1">第二个 </option> <option value="0">第一个 </option> </select> <select id="idDelay"> <option value="1000">1秒</option> <option value="500">0.5秒 </option> <option value="200" selected>0.2秒 </option> <option value="0">不延时 </option> </select> <script> var menu = [ { id: 1, parent: 0, html: '自定义样式', hover: "on1_2", rank: 1 }, { id: 2, parent: 0, html: '下拉菜单', active: "on1_2", rank: 2 }, { id: 3, parent: 0, html: '任意定位', relative: { align: "left" }, rank: 3 }, { id: 11, parent: 1, html: '点击关闭', hover: "on1_2", property: { onclick: function () { fm.hide(); } } }, { id: 21, parent: 2, html: '相对容器', active: "on1_2", relContainer: true }, { id: 22, parent: 2, html: '相对菜单', active: "on1_2", relative: { align: "right", vAlign: "clienttop" } }, { id: 23, parent: 21, html: '三级菜单' }, { id: 24, parent: 21, html: '三级菜单' }, { id: 25, parent: 22, html: '三级菜单' }, { id: 26, parent: 22, html: '三级菜单' }, { id: 31, parent: 3, html: '无法到达的', relative: { align: "left" } }, { id: 32, parent: 31, html: '目光', relative: { align: "right" } }, { id: 33, parent: 32, html: '无法到达的', relative: { align: "right", vAlign: "top" } }, { id: 34, parent: 33, html: '到达', relative: { percentTop: 100 } }, { id: 35, parent: 34, html: '到达', relative: { align: "left", vAlign: "clienttop", percentLeft: -100 } }, { id: 36, parent: 35, html: '梦想', relative: { vAlign: "top" } }, { id: 37, parent: 36, html: '目光', relative: { vAlign: "top", percentTop: -100 } }, { id: 38, parent: 37, html: '脚步', relative: { align: "right", vAlign: "clienttop", percentLeft: 100 } }, { id: 39, parent: 38, html: '地方', relative: { percentTop: 100 } }, { id: 40, parent: 39, html: '地方', relative: { align: "left" } }, { id: 41, parent: 40, html: '可以', relative: { vAlign: "top", percentTop: -100 } }, { id: 42, parent: 41, html: '可以' } ]; var fm = new FixedMenu(["idContainer1", "idContainer1_2"], { hover: "on1", menu: menu }); //编辑测试 $$("idEdit").onclick = function () { if (this.value == "添加菜单 +") { fm.add([ { id: 100, parent: 0, html: '新加菜单+', rank: $$("idRank").value | 0 }, { id: 101, parent: 100, html: '新加菜单++' }, { id: 102, parent: 100, html: '新加菜单+++' } ]); this.value = "删除菜单 -" } else { fm.del(100, 101, 102); this.value = "添加菜单 +" } } //延时测试 $$("idDelay").onchange = function () { fm.Delay = this.value | 0; } </script> <br> <br> 仿京东商城商品分类菜单： <br> <br> <style type="text/css"> .container2, .container2 dd, .container2_2 dl, .container2_2 dd { margin: 0; } .container2 { font-size: 14px; width: 190px; border: 1px solid #cf2020; background: #fffff5; padding: 5px 8px; line-height: 30px; color: #333; } .container2 dt { font-weight: bold; color: #cf2020; } .container2 dd { background: url(http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/n4.jpg) 180px 10px no-repeat; _zoom: 1; } .container2_2 { background-color: #bebec3; display: none; } .container2_2 dl { font-size: 14px; width: 200px; border: 1px solid #969696; background: #fff; position: relative; left: -3px; top: -3px; } .container2_2 dd div { padding: 5px 20px; background: url(http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/n4.jpg) 6px 7px no-repeat; _zoom: 1; } .container2_2 dt, .shadow { padding: 0 5px; position: absolute; background: #fff; border: 1px solid #969696; border-right: 0; width: 169px; left: -180px; top: -1px; height: 24px; line-height: 24px; } .shadow { background-color: #bebec3; border-color: #bebec3; top: 0; } .container2_2 a { display: block; _zoom: 1; } .container2_2 a:link, .container2_2 a:visited, .container2_2 a:active { color: #333; text-decoration: none; } .container2_2 a:hover { color: #ff6026; text-decoration: underline; } </style> <dl id="idContainer2" class="container2"> <dt id="idMenu2_1">图片动画</dt> <dd id="idMenu2_2">图片效果</dd> <dd id="idMenu2_3">动画效果</dd> <dt id="idMenu2_51">系统其他</dt> <dd id="idMenu2_52">系统效果</dd> <dd id="idMenu2_53">其他效果</dd> </dl> <div id="idContainer2_2" class="container2_2"> <div class="shadow"></div> <dl> <dt id="idTitle"></dt> <dd id="idMenu2"> <div id="idMenu2_11"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/07/06/SlideTrans.html">图片滑动切换效果</a></div> <div id="idMenu2_12"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html">图片变换效果(ie only)</a></div> <div id="idMenu2_13"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html">图片滑动展示效果</a></div> <div id="idMenu2_14"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html">图片切割效果</a></div> <div id="idMenu2_21"><a href="http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html">Tween算法及缓动效果</a></div> <div id="idMenu2_22"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/08/27/1277131.html">渐变效果</a></div> <div id="idMenu2_61"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/10/20/1314766.html">无刷新多文件上传系统</a></div> <div id="idMenu2_62"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/10/05/ImgCropper_sys.html">图片切割系统</a></div> <div id="idMenu2_71"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html">拖放效果</a></div> <div id="idMenu2_72"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/12/03/Resize.html">拖拉缩放效果</a></div> <div id="idMenu2_73"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/12/24/Slider.html">滑动条效果</a></div> </dd> </dl> </div> <script> var menu2 = [ { id: 1, parent: 0, elem: 'idMenu2_1' }, { id: 2, parent: 0, elem: 'idMenu2_2' }, { id: 3, parent: 0, elem: 'idMenu2_3' }, { id: 11, parent: 2, elem: 'idMenu2_11' }, { id: 12, parent: 2, elem: 'idMenu2_12' }, { id: 13, parent: 2, elem: 'idMenu2_13' }, { id: 14, parent: 2, elem: 'idMenu2_14' }, { id: 21, parent: 3, elem: 'idMenu2_21' }, { id: 22, parent: 3, elem: 'idMenu2_22' }, { id: 51, parent: 0, elem: 'idMenu2_51' }, { id: 52, parent: 0, elem: 'idMenu2_52' }, { id: 53, parent: 0, elem: 'idMenu2_53' }, { id: 61, parent: 52, elem: 'idMenu2_61' }, { id: 62, parent: 52, elem: 'idMenu2_62' }, { id: 71, parent: 53, elem: 'idMenu2_71' }, { id: 72, parent: 53, elem: 'idMenu2_72' }, { id: 73, parent: 53, elem: 'idMenu2_73' } ]; var container2 = ["idContainer2", { id: "idContainer2_2", menu: "idMenu2" }]; new FixedMenu(container2, { menu: menu2, relative: { align: "clientleft", vAlign: "clienttop", customTop: 5, customLeft: 176 }, onBeforeShow: function (container, menu) { $$("idTitle").innerHTML = menu._elem.innerHTML; } }); </script> <br> 仿window xp右键菜单： <br> <style type="text/css"> .container3 { font-size: 12px; border: 1px solid #9d9da1; padding: 3px; line-height: 18px; background: #FFF; cursor: default; -moz-user-select: none; _overflow: hidden; } .container3 div { padding: 0 20px; } .menu3_1 { color: #aca899; _zoom: 1; } .menu3_2 { background: url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_menu.gif) 133px 0 no-repeat; } .menu3_2_on { background-position: 133px -18px; } .menu3_3 { background: url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_menu.gif) left -36px no-repeat; } .menu3_3_on { background-position: left -54px; } .menu3_4 { background: url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_menu.gif) left -72px no-repeat; } .menu3_4_on { background-position: left -90px; } .line3 { border-bottom: 1px solid #aca899; _font-size: 0; margin: 4px 0; } .on3 { background-color: #316ac5; color: #FFF; } .area3 { width: 500px; height: 200px; border: 1px solid #aca899; } .pos3 { position: absolute; display: none; width: 150px; } </style> <div id="idArea" class="area3"></div> <div id="idContainer3" class="container3 pos3"></div> <div id="idContainer3_2" class="container3"></div> <script> var menu3 = [ { id: 1, parent: 0, html: '查看(<u>V</u>)' }, { id: 2, parent: 0 }, { id: 3, parent: 0, html: '排列图标(<u>I</u>)' }, { id: 4, parent: 0, html: '刷新(<u>E</u>)' }, { id: 5, parent: 0 }, { id: 6, parent: 0, html: '自定义文件夹(<u>F</u>)...' }, { id: 7, parent: 0 }, { id: 8, parent: 0, html: '粘贴(<u>P</u>)' }, { id: 9, parent: 0, html: '粘贴快捷方式(<u>S</u>)' }, { id: 10, parent: 0 }, { id: 11, parent: 0, html: '新建(<u>P</u>)' }, { id: 12, parent: 0 }, { id: 13, parent: 0, html: '属性(<u>S</u>)' }, { id: 21, parent: 1, html: '缩略图(<u>H</u>)' }, { id: 22, parent: 1, html: '平铺(<u>S</u>)', css: "menu3_3", hover: "menu3_3 menu3_3_on on3" }, { id: 23, parent: 1, html: '图标(<u>N</u>)' }, { id: 24, parent: 1, html: '列表(<u>L</u>)' }, { id: 25, parent: 1, html: '详细信息(<u>D</u>)' }, { id: 31, parent: 3, html: '名称(<u>N</u>)', css: "menu3_3", hover: "menu3_3 menu3_3_on on3" }, { id: 32, parent: 3, html: '类型(<u>S</u>)' }, { id: 33, parent: 3, html: '大小(<u>T</u>)' }, { id: 34, parent: 3, html: '修改时间(<u>M</u>)' }, { id: 35, parent: 3 }, { id: 36, parent: 3, html: '按组排列(<u>G</u>)', css: "menu3_4", hover: "menu3_4 menu3_4_on on3" }, { id: 37, parent: 3, html: '自动排列(<u>A</u>)' }, { id: 38, parent: 3, html: '对齐到网格(<u>L</u>)' }, { id: 41, parent: 11, html: 'AlertBox 弹出层效果', href: "http://www.cnblogs.com/cloudgamer/archive/2010/10/11/AlertBox.html" }, { id: 42, parent: 11, html: '图片3D展示空间', href: "http://www.cnblogs.com/cloudgamer/archive/2010/09/20/Image3D.html" }, { id: 43, parent: 11, html: '图片变换效果', href: "http://www.cnblogs.com/cloudgamer/archive/2010/08/16/ImageTrans.html" }, { id: 44, parent: 11, html: '图片滑动展示效果', href: "http://www.cnblogs.com/cloudgamer/archive/2010/07/29/SlideView.html" } ]; $$A.forEach(menu3, function (menu) { var id = menu.id | 0; switch (id) { case 1: case 3: case 11://有下级菜单 menu.css = "menu3_2"; menu.hover = "menu3_2 menu3_2_on on3"; break; case 2: case 5: case 7: case 10: case 12: case 35://分割线 menu.css = menu.hover = "line3"; break; case 8: case 9://不能选择 menu.css = menu.hover = "menu3_1"; break; case 4://刷新 menu.property = { onmouseup: function () { location.reload(); } }; break; case 21: case 22: case 23: case 24: case 25://"查看"子菜单 menu.property = { onmouseup: function () { Select([21, 22, 23, 24, 25], id, "menu3_3", "menu3_3 menu3_3_on on3"); } }; break; case 31: case 32: case 33: case 34://"排列图标"子菜单1 menu.property = { onmouseup: function () { Select([31, 32, 33, 34], id, "menu3_3", "menu3_3 menu3_3_on on3"); } }; break; case 36: case 37: case 38://"排列图标"子菜单2 menu.property = { onclick: function () { Select([36, 37, 38], id, "menu3_4", "menu3_4 menu3_4_on on3"); } }; break; case 41: case 42: case 43: case 44: menu.property = { onclick: function () { location.href = menu.href; } }; break; } }); var fm3 = new FixedMenu(["idContainer3", "idContainer3_2"], { menu: menu3, delay: 0, hover: "on3", relative: { align: "right", vAlign: "clienttop", customTop: -4, customLeft: -2, adaptive: true, reset: true } }); var area = $$("idArea"), container3 = $$("idContainer3"), container3_2 = $$("idContainer3_2"); function Hide() { fm3.hide(); container3.style.display = "none"; } function Select(group, id, css, hover) { Hide(); var menu = []; $$A.forEach(group, function (i) { i !== id && menu.push({ "id": i, "css": "", "hover": "on3" }); }); menu.push({ "id": id, "css": css, "hover": hover }); fm3.edit(menu); } $$E.addEvent(area, "contextmenu", function (e) { with (container3.style) { left = e.pageX + "px"; top = e.pageY + "px"; display = "block"; } e.preventDefault(); }); container3.oncontextmenu = container3_2.oncontextmenu = function (e) { $$E.fixEvent(e).preventDefault(); } container3.onselectstart = container3_2.onselectstart = function () { return false; }//ie chrome safari $$E.addEvent(container3, "mouseup", function (e) { e.stopPropagation(); }); $$E.addEvent(document, "mouseup", Hide); $$E.addEvent(window, "blur", Hide); </script> <br> 仿淘宝拼音索引菜单： <br> <br> <style type="text/css"> .container4 li, .container4_2 li { list-style: none; } .container4 ul, .container4_2 { margin: 0; } .container4 { width: 350px; padding: 7px 10px; font: 12px Verdana; border: 1px solid #ccc; background: #fffeed; line-height: 15px; height: 15px; _overflow: hidden; } .container4 li { float: left; padding: 0 10px; border-right: 1px solid #ccc; } .container4 div { float: left; color: #000; padding-right: 10px; } li.menu4 { position: relative; margin-left: -1px; top: -1px; z-index: 9999; border: 1px solid #85ccff; border-bottom: 0; padding-bottom: 8px; color: #ff6026; background: #dbf3ff; } .container4_2 { width: 350px; padding: 10px; border: 1px solid #85ccff; background: #dbf3ff; line-height: 25px; font-size: 14px; font-weight: bold; display: none; } .container4_2 a { display: block; _zoom: 1; } .container4_2 a:link, .container4_2 a:visited, .container4_2 a:active { color: #565553; text-decoration: none; } .container4_2 a:hover { color: #ff5500; text-decoration: underline; } .container4 a:link, .container4 a:visited, .container4 a:hover, .container4 a:active { color: #565553; text-decoration: none; } .menu4 a:link, .menu4 a:visited, .menu4 a:active { color: #ff6026; } .menu4 a:hover { color: #ff6026; text-decoration: underline; } </style> <div id="idContainer4" class="container4"> <div><b>Tag索引</b></div> <ul id="idMenu4"> <li id="idMenu4_1"><a href="http://www.cnblogs.com/cloudgamer/tag/Table/">Table</a></li> <li id="idMenu4_2"><a href="http://www.cnblogs.com/cloudgamer/tag/Fixed/">Fixed</a></li> <li id="idMenu4_3"><a href="http://www.cnblogs.com/cloudgamer/tag/Color/">Color</a></li> <li id="idMenu4_4"><a href="http://www.cnblogs.com/cloudgamer/tag/Date/">Date</a></li> <li id="idMenu4_5"><a href="http://www.cnblogs.com/cloudgamer/tag/Select/">Select</a></li> </ul> </div> <ul id="idContainer4_2" class="container4_2"> <li id="idMenu4_11"><a href="http://www.cnblogs.com/cloudgamer/archive/2009/05/18/TableFixed.html">Table行定位效果</a></li> <li id="idMenu4_12"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/10/06/TableOrder.html">Table排序</a></li> <li id="idMenu4_21"><a href="http://www.cnblogs.com/cloudgamer/archive/2009/07/07/FixedTips.html">浮动定位提示效果</a></li> <li id="idMenu4_22"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/09/15/1290954.html">仿LightBox内容显示效果</a></li> <li id="idMenu4_31"><a href="http://www.cnblogs.com/cloudgamer/archive/2009/03/11/color.html">颜色梯度和渐变效果</a></li> <li id="idMenu4_41"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/08/23/1274459.html">blog式日历控件</a></li> <li id="idMenu4_42"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/10/28/1040403.html">日期联动选择器</a></li> <li id="idMenu4_51"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/06/24/1228736.html">多级联动select</a></li> </ul> <br> <br> <br> <br> <br> <br> <br> <script> var menu4 = [ { id: 1, parent: 0, elem: 'idMenu4_1', active: "menu4" }, { id: 2, parent: 0, elem: 'idMenu4_2', active: "menu4" }, { id: 3, parent: 0, elem: 'idMenu4_3', active: "menu4" }, { id: 4, parent: 0, elem: 'idMenu4_4', active: "menu4" }, { id: 5, parent: 0, elem: 'idMenu4_5', active: "menu4" }, { id: 11, parent: 1, elem: 'idMenu4_11' }, { id: 12, parent: 1, elem: 'idMenu4_12' }, { id: 21, parent: 2, elem: 'idMenu4_21' }, { id: 22, parent: 2, elem: 'idMenu4_22' }, { id: 31, parent: 3, elem: 'idMenu4_31' }, { id: 41, parent: 4, elem: 'idMenu4_41' }, { id: 42, parent: 4, elem: 'idMenu4_42' }, { id: 51, parent: 5, elem: 'idMenu4_51' } ]; new FixedMenu([{ id: "idContainer4", menu: "idMenu4" }, "idContainer4_2"], { menu: menu4, relContainer: true, relative: { align: "clientleft", vAlign: "bottom", customTop: -1 } }); </script> </body> </html>
原文来自：
http://www.cnblogs.com/cloudgamer/archive/2009/10/29/Cloudgamer_JavaScript_Library.html
http://www.cnblogs.com/cloudgamer/archive/2009/08/10/FixedMenu.html