仿东京商城菜单、仿Win右键菜单、仿淘宝TAB整合特效_菜单导航特效

缂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁惧墽鎳撻—鍐偓锝庝簼閹癸綁鏌ｉ鐐搭棞闂囧鏌ㄥ┑鍡欏⒈闁搞倕顦扮换娑橆啅椤旇崵鍑归梺鍝勬噺缁诲牓寮诲☉姘勃闁绘劦鍓涘▓銈夋⒑閸涘﹥鈷掗柡浣告憸濡叉劙骞樼€涙ê顎撻梺鍦帛鐢﹥绔熼弴銏♀拻濞达絼璀﹂弨鏉棵瑰⿰搴″⒋妞ゃ垺顨婅矾闁绘稓顧€S闂傚倸鍊搁崐鎼佸磹瀹勬噴褰掑炊瑜忛弳锕傛煟閵忊懚鍦玻濡ゅ懏鐓欓柟娈垮枛椤ｅジ鏌涚€ｅ墎绡€闁哄本娲樺鍕醇濠靛棗顥欐繝鐢靛仦閸ㄦ儼褰滈梺琛″亾濞寸姴顑嗛崐鐢告煥濠靛棗鏆欏┑锛勫厴閺屾稓鈧綆鍋呭畷宀€鈧娲樼敮锟犲箖濞嗘挸钃熼柕澶堝劜閺嗩亪姊婚崒娆戭槮闁圭⒈鍋勭叅闁靛ň鏅涚壕濠氭煟閹邦喖鍔嬮柛濠傜仛閵囧嫰骞掗崱妞惧闂備礁鐤囬～澶愬垂閸ф绠栨繛鍡樻尭閻顭块懜鐬垿鏁嶆笟鈧缁樻媴鐟欏嫬浠╅梺鍛婃煥闁帮絽鐣锋导鏉戝唨鐟滄粓宕甸弴鐐╂斀闁绘ê纾。鏌ユ煛閸涱喗鍊愰柡灞诲姂閹倝宕掑☉姗嗕紦婵犵數濮烽弫鍛婃叏閻戣棄鏋侀柟闂寸绾惧鏌ｉ幇顒佹儓闁搞劌鍊块幃瑙勬姜閹峰矈鍔呭┑鐐插悑閻楃娀骞冨畡鎵虫瀻闊洦鎼╂导鈧梻浣虹帛缁诲倿鎮ユ總绋胯摕婵炴垯鍨归悞娲煕閹板吀绨存俊鎻掔墦濮婅櫣绱掑Ο璇查瀺闂佹寧娲忛崹钘夘嚕婵犳艾鐏抽柟棰佺閹垿鏌熼懖鈺勊夐柍褜鍓欑壕顓㈩敊閹达附鈷掑ù锝囨嚀閳绘洟鏌￠埀顒佹綇閳哄倹娈伴梺璺ㄥ枔婵挳鎷戦悢鍏肩厪濠电偟鍋撳▍鍡涙煕鐎ｎ亝顥㈤柡灞剧〒娴狅箓宕滆濡插牆顪冮妶鍛寸崪闁瑰嚖鎷� 缂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾剧懓顪冪€ｎ亝鎹ｉ柣顓炴閵嗘帒顫濋敐鍛闂佽姤蓱缁诲牆顫忓ú顏嶆晢闁逞屽墰缁梻鈧潧鎽滈悳缁樹繆閵堝懏鍣洪柣鎾寸懇濮婃椽顢橀妸褏鏆犳繝鈷€鍥╃暫闁哄被鍊濆鍫曞箰鎼粹€叉樊闂備礁鎼張顒勬儎椤栨稐绻嗛柣鎴犵摂閺佸﹪鏌ｉ幘鍐茬槰婵炶壈宕电槐鎾诲磼濞嗘帩鍞归梺绋款儐閹告悂鈥﹂崸妤佸殝闂傚牊绋戦～宥夋⒑缂佹ɑ灏柛鐔告尦瀵寮撮悢椋庣獮闂佸壊鍋呯换鍌炩€栨径鎰拺缂備焦岣跨粻銉ッ瑰⿰搴濋偗鐎殿喖顭烽弫鎰板川椤忓懏鏉搁梻浣告贡閸嬫挸岣垮▎鎿冩晜闁跨噦鎷� 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾剧懓顪冪€ｎ亜顒㈡い鎰矙閺屻劑鎮㈤崫鍕戙垻鐥幆褜鐓奸柡灞剧洴瀵挳濡搁妷褉鍋撻鍕厱闁靛绲芥俊鐣岀磽瀹ュ懏鍠橀柡灞界Ч瀹曨偊宕熼锝嗩啀婵＄偑鍊х€靛矂宕规潏鈺傚床婵犻潧顑呴～鍛存煥濠靛棙顥犻柕鍡樺姍濮婃椽宕崟顓炩拡闂佸憡鎸鹃崰搴ㄦ偩瀹勬嫈鏃堝焵椤掑嫨鍋戝ù鍏兼綑闁卞洭鏌ｉ弬鎸庢儓妤犵偞鍔欏缁樻媴鐟欏嫬浠╅梺绋垮瘨閸ㄨ泛鐣峰┑鍡╁悑濠㈣泛顑呴崜顓㈡⒑绾懏褰ч梻鍕閸╂盯骞掗幋顓犲數闁荤姾娅ｇ亸銊╁礉閻旂厧鏋侀柛顐犲劜閳锋垿鏌涘┑鍡楊伂妞ゎ偓绠撻弻娑欑節閸愵亜鈪圭€光偓閿濆牆鍔电紒鐘崇☉閳藉螣濠х偓娅婇柡灞诲姂瀵噣宕掑⿰鍐偧婵＄偑鍊戦崕鑼矙閹捐埖顫曢柟鎹愵嚙绾惧吋绻涢崱妯虹仴濠碘€茬矙濮婃椽宕妷銉ょ捕濡炪値鍘鹃崗姗€鎮伴璺ㄧ杸婵炴垶鐟﹀▍銏ゆ⒑鐠恒劌娅愰柟鍑ゆ嫹闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣捣閻棗銆掑锝呬壕濡ょ姷鍋為悧鐘汇€侀弴銏℃櫇闁逞屽墴閹潡顢氶埀顒勫蓟閿濆憘鏃堝焵椤掑嫭鍋嬪┑鐘叉搐閻鐓崶銊р姇闁绘挻鐟х槐鎾存媴闂堟稓浠奸梺鍝勵儐缁嬫帗绌辨繝鍥ㄥ€烽柟娈垮枤閻撴捇姊洪崫鍕槵闁逞屽墯閸撴岸宕ョ€ｎ喖绠圭紒顔煎帨閸嬫捇鎳犻浣规闂傚倸鍊风粈渚€骞夐敓鐘偓鍐幢濞嗗繑鐎抽悗骞垮劚濞诧箑鐣烽崣澶岀闁瑰瓨鐟ラ悘鈺傤殽閻愵亜鐏ǎ鍥э躬椤㈡稑鈹戦幇顒侇唲闂傚倸鍊搁ˇ顖滅矓閹绢喖鐓橀柟杈惧瘜閺佸鏌涢埄鍐噮閽冮亶姊绘担鍛婂暈婵﹤缍婇妴鍐╃節閸パ勬К闂侀€炲苯澧柕鍥у楠炴帡骞嬪┑鍥╀壕婵犵數鍋涢崥瀣礉濞嗘挸钃熼柣鏃傗拡閺佸﹪鏌ゅù瀣珔闁绘挾鍠栭幃妤冩喆閸曨剛顦ㄥ┑鐐跺皺閸犳牕顕ｆ繝姘耿婵°倕锕ら幃鎴︽⒑閸涘﹣绶遍柛銊﹀▕瀹曘垽顢楅崟顑芥嫽婵炶揪缍€婵倗娑甸崼鏇熺厱闁挎繂绻掗悾鍨殽閻愯尙绠婚柡浣规崌閺佹捇鏁撻敓锟�,闂傚倸鍊搁崐鎼佸磹閹间礁纾圭€瑰嫭鍣磋ぐ鎺戠倞妞ゆ帊绀侀崜顓烆渻閵堝棗濮х紒鐘冲灩缁牏鈧綆鍋佹禍婊堟煙閹佃櫕娅呴柣蹇婃櫇閹喖顫滈埀顒€顫忕紒妯诲缂佹稑顑呭▓顓炩攽椤旀枻鍏紒鐘虫崌閺佹劙鎮欓弶鎴犵獮闁诲函缍嗛崜娑㈩敊閺囩喓绡€闁汇垽娼у瓭闂佺ǹ顑呭Λ婵嗙暦閻㈢ǹ鍗抽柕蹇ョ磿閸樺崬顪冮妶鍡楀Ё缂佹彃澧界划鍫ュ焵椤掑倻纾藉ù锝嗗絻娴滈箖姊洪崨濠傚闁哄倸鍊圭粋宥呪堪閸喓鍘搁梺绋挎湰濮樸劍绂掗姀銈嗙厵妞ゆ棁妫勯悘锕傛煏閸パ冾伂缂佺姵鐩鎾倷鐎电硶鍋撻崜褏纾藉ù锝堟鐢盯鏌ｉ埡濠傜仸闁绘侗鍠氶埀顒婄秵閸犳宕愰悜鑺ョ厸濠㈣泛顑呴悘鈺傜箾閸稑鈧繂顫忕紒妯诲闁告盯娼х紞濠囥€侀弽顓炲耿婵炴垶岣块澶愭⒑閹肩偛鍔€閻忕偛澧界粙渚€姊绘担鍛婂暈缂佽鍊婚埀顒佺殰閸パ冨殤闁瑰吋鐣崝宥夋偂濞嗘劑浜滈柡宓嫷妫為柣搴㈠嚬閸犳绮嬪澶樻晜闁割偆鍟块幏缁樼箾鏉堝墽鍒伴柟璇х節瀹曨垶鎮欓悜妯煎幗闂佺粯姊瑰ḿ娆撳礉閵堝鐓欐鐐茬仢閻忊晠鎽堕敐鍛偓鎺戭潩閻撳海浠╁┑鐐茬墑閸斿秶鎹㈠┑瀣仺闂傚牊鍒€閿濆洨妫柡澶庢硶鏁堥悗娈垮枟閻擄繝鐛弽銊﹀闁革富鍘煎鎶芥⒒娴ｈ櫣甯涙繛鍙夌墵瀹曟劙宕烽娑樹壕婵ḿ鍋撶€氾拷!

这是一个非常好的实用菜单整合殊效，有多级下拉菜单、仿东京商城的拉出式菜单、仿Windows的右键菜单，仿淘宝的标签Tab菜单，每一个都是出色，代码中附有丰富的注释，便于你的学习和修改。

<!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>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>JavaScript 多级联动浮动菜单</title>
<script type="text/javascript">
var $$ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};
var isIE8 = navigator.userAgent.indexOf('MSIE 8.0') != -1;
var isChrome = navigator.userAgent.indexOf('Chrome') != -1;
var isSafari = navigator.userAgent.indexOf('AppleWebKit') != -1;
function addEvent(element, type, handler) {
	if (element.addEventListener) {
		element.addEventListener(type, handler, false);
	} else {
		if (!handler.$$guid) handler.$$guid = addEvent.guid++;
		if (!element.events) element.events = {};
		var handlers = element.events[type];
		if (!handlers) {
			handlers = element.events[type] = {};
			if (element["on" + type]) {
				handlers[0] = element["on" + type];
			}
		}
		handlers[handler.$$guid] = handler;
		element["on" + type] = handleEvent;
	}
};
addEvent.guid = 1;
function removeEvent(element, type, handler) {
	if (element.removeEventListener) {
		element.removeEventListener(type, handler, false);
	} else {
		if (element.events && element.events[type]) {
			delete element.events[type][handler.$$guid];
		}
	}
};
function handleEvent(event) {
	var returnValue = true;
	event = fixEvent(event);
	var handlers = this.events[event.type];
	for (var i in handlers) {
		this.$$handleEvent = handlers[i];
		if (this.$$handleEvent(event) === false) {
			returnValue = false;
		}
	}
	return returnValue;
};
function fixEvent(event) {
	if (event) return event;
	event = ((this.ownerDocument || this.document || this).parentWindow || window).event;
	var scrolldoc = isChrome || isSafari ? document.body : document.documentElement;
	event.pageX = event.clientX + scrolldoc.scrollLeft;
	event.pageY = event.clientY + scrolldoc.scrollTop;
	event.target = event.srcElement;
	event.stopPropagation = fixEvent.stopPropagation;
	event.preventDefault = fixEvent.preventDefault;
	if(event.type == "mouseout") {
		event.relatedTarget = event.toElement;
	}else if(event.type == "mouseover") {
		event.relatedTarget = event.fromElement;
	}
	return event;
};
fixEvent.preventDefault = function() {
	this.returnValue = false;
};
fixEvent.stopPropagation = function() {
	this.cancelBubble = true;
};

var Bind = function(object, fun) {
	var args = Array.prototype.slice.call(arguments, 2);
	return function() {
		return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
	}
}

var BindAsEventListener = function(object, fun) {
	var args = Array.prototype.slice.call(arguments, 2);
	return function(event) {
		return fun.apply(object, [event].concat(args));
	}
}

var Extend = function(destination, source) {
	for (var property in source) {
		destination[property] = source[property];
	}
	return destination;
}

var Contains = function(a, b){
	return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}

var isArray = function( obj ) {
	return Object.prototype.toString.call(obj) === "[object Array]";
}

</script>
</head>
<body>
<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>
<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, txt: '自定义样式', hover: "on1_2", rank: 1 },
	{ id: 2, parent: 0, txt: '下拉菜单', active: "on1_2", rank: 2 },
	{ id: 3, parent: 0, txt: '任意定位', fixed: { Align: "left" }, rank: 3 },
	
	{ id: 21, parent: 2, txt: '相对容器', active: "on1_2", fixedmenu: false },
	{ id: 22, parent: 2, txt: '相对菜单', active: "on1_2", fixed: { Align: "right", vAlign: "clienttop" } },
	{ id: 23, parent: 21, txt: '三级菜单' },
	{ id: 24, parent: 21, txt: '三级菜单' },
	{ id: 25, parent: 22, txt: '三级菜单' },
	{ id: 26, parent: 22, txt: '三级菜单' },
	
	{ id: 31, parent: 3, txt: '无法到达的', fixed: { Align: "left" } },
	{ id: 32, parent: 31, txt: '目光', fixed: { Align: "right" } },
	{ id: 33, parent: 32, txt: '无法到达的', fixed: { Align: "right", vAlign: "top" } },
	{ id: 34, parent: 33, txt: '到达', fixed: { PercentTop: 100 } },
	{ id: 35, parent: 34, txt: '到达', fixed: { Align: "left", vAlign: "clienttop", PercentLeft: -100 } },
	{ id: 36, parent: 35, txt: '梦想', fixed: { vAlign: "top" } },
	{ id: 37, parent: 36, txt: '目光', fixed: { vAlign: "top", PercentTop: -100 } },
	{ id: 38, parent: 37, txt: '脚步', fixed: { Align: "right", vAlign: "clienttop", PercentLeft: 100 } },
	{ id: 39, parent: 38, txt: '地方', fixed: { PercentTop: 100 } },
	{ id: 40, parent: 39, txt: '地方', fixed: { Align: "left" } },
	{ id: 41, parent: 40, txt: '可以', fixed: { vAlign: "top", PercentTop: -100 } },
	{ id: 42, parent: 41, txt: '可以' }

];

var fm = new FixedMenu(["idContainer1", "idContainer1_2"], { Hover: "on1", Menu: menu });

//编辑测试
$$("idEdit").onclick = function(){
	if(this.value == "添加菜单 +"){
		fm.Add([
			{ id: 100, parent: 0, txt: '新加菜单+', rank: $$("idRank").value | 0 },
			{ id: 101, parent: 100, txt: '新加菜单++' },
			{ id: 102, parent: 100, txt: '新加菜单+++' }
		]);
		this.value = "删除菜单 -"
	}else{
		fm.Delete( 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://p1.mb5u.com/texiao/0/2010052223052657.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://p1.mb5u.com/texiao/0/2010052223052657.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="#">图片滑动切换效果</a></div>
			<div id="idMenu2_12"><a href="#">图片变换效果(ie only)</a></div>
			<div id="idMenu2_13"><a href="#">图片滑动展示效果</a></div>
			<div id="idMenu2_14"><a href="#">图片切割效果</a></div>
			<div id="idMenu2_21"><a href="#">Tween算法及缓动效果</a></div>
			<div id="idMenu2_22"><a href="#">渐变效果</a></div>
			<div id="idMenu2_61"><a href="#">无刷新多文件上传系统</a></div>
			<div id="idMenu2_62"><a href="#">图片切割系统</a></div>
			<div id="idMenu2_71"><a href="#">拖放效果</a></div>
			<div id="idMenu2_72"><a href="#">拖拉缩放效果</a></div>
			<div id="idMenu2_73"><a href="#">滑动条效果</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,
	Fixed: { Align: "clientleft", vAlign: "clienttop", CustomTop: 5, CustomLeft: 176 },
	onBeforeShow: function(container, menu){ $$("idTitle").innerHTML = menu._elem.innerHTML; }
});

</script>
<br>
仿右键菜单： <br>
<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://p1.mb5u.com/texiao/0/2010052223052658.gif) 140px 5px no-repeat;}
.menu3_3 {background:url(http://p1.mb5u.com/texiao/0/2010052223052659.gif) 7px 5px no-repeat;}
.menu3_4 {background:url(http://p1.mb5u.com/texiao/0/2010052223052660.gif) 7px 5px no-repeat;}
.line3 {border-bottom:1px solid #9d9da1; _font-size:0; margin:4px 0;}
.on3 {background-color:#bbb7c7;}

.area3 { width:500px; height:200px;border:1px solid #9d9da1;}
.pos3 {position:absolute; display:none;line-height:20px; 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, txt: '查看(<u>V</u>)' },
	{ id: 2, parent: 0 },
	{ id: 3, parent: 0, txt: '排列图标(<u>I</u>)' },
	{ id: 4, parent: 0, txt: '刷新(<u>E</u>)' },
	{ id: 5, parent: 0 },
	{ id: 6, parent: 0, txt: '自定义文件夹(<u>F</u>)...' },
	{ id: 7, parent: 0 },
	{ id: 8, parent: 0, txt: '粘贴(<u>P</u>)' },
	{ id: 9, parent: 0, txt: '粘贴快捷方式(<u>S</u>)' },
	{ id: 10, parent: 0 },
	{ id: 11, parent: 0, txt: '新建(<u>P</u>)' },
	{ id: 12, parent: 0 },
	{ id: 13, parent: 0, txt: '属性(<u>S</u>)' },
	{ id: 21, parent: 1, txt: '缩略图(<u>H</u>)' },
	{ id: 22, parent: 1, txt: '平展(<u>S</u>)', css: "menu3_3", hover: "menu3_3 on3" },
	{ id: 23, parent: 1, txt: '图标(<u>N</u>)' },
	{ id: 24, parent: 1, txt: '列表(<u>L</u>)' },
	{ id: 25, parent: 1, txt: '具体信息(<u>D</u>)' },
	{ id: 31, parent: 3, txt: '名称(<u>N</u>)', css: "menu3_3", hover: "menu3_3 on3" },
	{ id: 32, parent: 3, txt: '类型(<u>S</u>)' },
	{ id: 33, parent: 3, txt: '大小(<u>T</u>)' },
	{ id: 34, parent: 3, txt: '修改时间(<u>M</u>)' },
	{ id: 35, parent: 3 },
	{ id: 36, parent: 3, txt: '按组排列(<u>G</u>)', css: "menu3_4", hover: "menu3_4 on3" },
	{ id: 37, parent: 3, txt: '自动排列(<u>A</u>)' },
	{ id: 38, parent: 3, txt: '对齐到网格(<u>L</u>)' },
	
	{ id: 41, parent: 11, txt: '剩下由你来写' }
];

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 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"); } }; break;
		case 31 :
		case 32 :
		case 33 :
		case 34 ://"排列图标"子菜单1
			menu.property = { onmouseup: function(){ Select([31,32,33,34], id, "menu3_3"); } }; break;
		case 36 :
		case 37 :
		case 38 ://"排列图标"子菜单2
		menu.property = { onmouseup: function(){ Select([36,37,38], id, "menu3_4"); } }; break;
	}
});

var fm3 = new FixedMenu(["idContainer3", "idContainer3_2"], {
	Menu: menu3, Delay: 0, Hover: "on3",
	Fixed: { 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";
}

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){ fixEvent(e).preventDefault(); }
container3.onselectstart = container3_2.onselectstart = function(){ return false; }//ie chrome safari
addEvent(container3, "mouseup", function(e){ e.stopPropagation(); });
addEvent(document, "mouseup", Hide);
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;}
/* www.mb5u.com */
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="#">Table</a></li>
		<li id="idMenu4_2"><a href="#">Fixed</a></li>
		<li id="idMenu4_3"><a href="#">Color</a></li>
		<li id="idMenu4_4"><a href="#">Date</a></li>
		<li id="idMenu4_5"><a href="#">Select</a></li>
	</ul>
</div>
<ul id="idContainer4_2" class="container4_2">
	<li id="idMenu4_11"><a href="#">Table行定位效果</a></li>
	<li id="idMenu4_12"><a href="#">Table排序</a></li>
	<li id="idMenu4_21"><a href="#">浮动定位提示效果</a></li>
	<li id="idMenu4_22"><a href="#">仿LightBox内容显示效果</a></li>
	<li id="idMenu4_31"><a href="#">颜色梯度和渐变效果</a></li>
	<li id="idMenu4_41"><a href="#">blog式日历控件</a></li>
	<li id="idMenu4_42"><a href="#">日期联动选择器</a></li>
	<li id="idMenu4_51"><a href="#">多级联动select</a></li>
</ul>
<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, FixedMenu: false,
	Fixed: { Align: "clientleft", vAlign: "bottom", CustomTop: -1 }
});

</script>
</body>
</html>

所属频道：菜单导航特效/更新时间：2012-11-09

[收藏][报错][返回列表]

仿东京商城菜单、仿Win右键菜单、仿淘宝TAB整合特效_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些