非常好的一个JS代码（FixedMenu.htm）
<!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, {
width: 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
非常好的一个JS代码（FixedMenu.htm）的更多相关文章
- dialog使用方法(同一页面，调用一个js代码，实现多个不同样式的弹窗)
html代码 <!DOCTYPE html><html><head> <title></title> <meta ch ...
- 非常好的一个JS代码（CJL.0.1.js）
/*! * Cloudgamer JavaScript Library v0.1 * Copyright (c) 2009 cloudgamer * Blog: http://cloudgamer.c ...
- 非常好的一个JS代码（RelativePosition.js）
var RelativePosition = function(){ function getLeft( align, rect, rel ){ var iLeft = 0; switch (alig ...
- 颜色渐变的JS代码
今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦! <!DOCTYPE html> ...
- 鼠标选择文字事件js代码，增加层问题
在页面中增加一个js代码,当用户用鼠标选择文字(鼠标拖动涂蓝文字)时,会出现一个层,提示与这个选择文字有个的信息<script type="text/javascript"& ...
- JavaScript必备:Google发布的JS代码规范(转)
[翻译]关于Google发布的JS代码规范,你需要了解什么? 翻译 | WhiteYin 译文 | https://github.com/WhiteYin/translation/issues/10 ...
- 常用代码之五：RequireJS, 一个Define需要且只能有一个返回值/对象，一个JS文件里只能放一个Define.
RequireJS 介绍说一个JS文件里只能放一个Define,这个众所周知,不提. 关于Define,它需要有一个返回值/对象,且只能有一个返回值/对象,这一点却是好多帖子没有提到的,但又非常重要的 ...
- 如何在一个网站或者一个页面，去书写你的JS代码
// JavaScript Document //如何在一个网站或者一个页面,去书写你的JS代码: //1.js的分层(功能) : jquery(tools) 组件(ui) 应用(app), mvc( ...
- 【原创】贡献一个JS的弹出框代码...
一.前言 最近在做一个项目,自己感觉系统自带的alert()方法的弹出框实在是不堪入目,所以在网上找了一些资料,然后自己加工了一下,做出了自己的一个js弹出框,在这里贡献出来,希望对你有帮助. 二.开 ...
随机推荐
- 设计一个Mypoint类，求两个点之间的距离
package Test; public class test6 { public static void main(String[] args) { // TODO Auto-generated m ...
- MySQL 临时修改全局变量
1.查询全局变量: SHOW GLOBAL VARIABLES [LIKE '%search key%']; 2.修改全局变量: SET GLOBAL auto_increment_increment ...
- vue中点击按钮自动截图并下载图片
点击一个按钮,截取对应区域的界面,才对截取的界面进行裁切并下载 下载 html2canvas npm install html2canvas --save 引用 : import htm ...
- sql 为空不做查询条件
select * from usertable where 1=1 and (name=@name or @name='') and (page=@page or @page='')
- 前端基础教程-jQuery EasyUI 的EasyLoader实例
兄弟连前端分享-jQuery EasyUI 的EasyLoader实例 to move panel to other position $('#p').panel('move',{ left:100, ...
- 如何将vs2015中的英文注释改为中文
找一个中文版的vs 将 C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework 文件夹 ...
- ckeditor从word粘贴图片
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...
- Codevs 1519 过路费(Mst+Lca)
1519 过路费 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 大师 Master 题目描述 Description 在某个遥远的国家里,有 n个城市.编号为 1,2,3,-,n. ...
- Python和Sublime的整合
按照下面的方式也可以运行py代码,但是交互方式不是很好,主要简单介绍了一下Python和Sublime的整合 一 Ctrl + B 二 SublimeREPL 安装SublimeREPL 1.打开P ...
- Spring——顾问封装通知
通知(advice)是Spring中的一种比较简单的切面,只能将切面织入到目标类的所有方法中,而无法对指定方法进行增强 顾问(advisor)是Spring提供的另外一种切面,可以织入到指定的方法中 ...