Discuz论坛的阴影二级下滑菜单

2024-09-05 12:20:06

字体：大中小

来源：转载

供稿：网友

这个菜单个人感觉挺不错的，不亏是从Discuz上挖下来的，兼容性很好，DIV+css 设计，符合WEB标准，弹出的菜单还带有立体感的阴影效果，演示只有两个菜单项，你可以根据需要自己添加菜单项，应该很方便。

<!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" content="text/html; charset=utf-8" /><title>showmenu下拉菜单兼容版 </title><script language="JavaScript"> <!--var userAgent = navigator.userAgent.toLowerCase();var is_opera = userAgent.indexOf('opera') != -1 && opera.version();var is_ie = (userAgent.indexOf('msie') != -1 && !is_opera) && userAgent.substr(userAgent.indexOf('msie') + 5, 3);function $(id) {return document.getElementById(id);}function isUndefined(variable) {return typeof variable == 'undefined' ? true : false;}function doane(event) {	e = event ? event : window.event;	if(is_ie) {		e.returnValue = false;		e.cancelBubble = true;	} else if(e) {		e.stopPropagation();		e.preventDefault();	}} var jsmenu = new Array();var ctrlobjclassName;jsmenu['active'] = new Array();jsmenu['timer'] = new Array();jsmenu['iframe'] = new Array(); function initCtrl(ctrlobj, click, duration, timeout, layer) {	if(ctrlobj && !ctrlobj.initialized) {		ctrlobj.initialized = true;		ctrlobj.unselectable = true; 		ctrlobj.outfunc = typeof ctrlobj.onmouseout == 'function' ? ctrlobj.onmouseout : null;		ctrlobj.onmouseout = function() {			if(this.outfunc) this.outfunc();			if(duration < 3) jsmenu['timer'][ctrlobj.id] = setTimeout('hideMenu(' + layer + ')', timeout);		} 		ctrlobj.overfunc = typeof ctrlobj.onmouseover == 'function' ? ctrlobj.onmouseover : null;		ctrlobj.onmouseover = function(e) {			doane(e);			if(this.overfunc) this.overfunc();			if(click) {				clearTimeout(jsmenu['timer'][this.id]);			} else {				for(var id in jsmenu['timer']) {					if(jsmenu['timer'][id]) clearTimeout(jsmenu['timer'][id]);				}			}		}	}} function initMenu(ctrlid, menuobj, duration, timeout, layer, drag) {	if(menuobj && !menuobj.initialized) {		menuobj.initialized = true;		menuobj.ctrlkey = ctrlid;		menuobj.onclick = ebygum;		menuobj.style.position = 'absolute';		if(duration < 3) {			if(duration > 1) {				menuobj.onmouseover = function() {					clearTimeout(jsmenu['timer'][ctrlid]);				}			}			if(duration != 1) {				menuobj.onmouseout = function() {					jsmenu['timer'][ctrlid] = setTimeout('hideMenu(' + layer + ')', timeout);				}			}		}		menuobj.style.zIndex = 50;		if(is_ie) {			menuobj.style.filter += "progid:DXImageTransform.Microsoft.shadow(direction=135,color=#CCCCCC,strength=2)";		}		if(drag) {			menuobj.onmousedown = function(event) {try{menudrag(menuobj, event, 1);}catch(e){}};			menuobj.onmousemove = function(event) {try{menudrag(menuobj, event, 2);}catch(e){}};			menuobj.onmouseup = function(event) {try{menudrag(menuobj, event, 3);}catch(e){}};		}	}} var menudragstart = new Array();function menudrag(menuobj, e, op) {	if(op == 1) {		if(in_array(is_ie ? event.srcElement.tagName : e.target.tagName, ['TEXTAREA', 'INPUT', 'BUTTON', 'SELECT'])) {			return;		}		menudragstart = is_ie ? [event.clientX, event.clientY] : [e.clientX, e.clientY];		menudragstart[2] = parseInt(menuobj.style.left);		menudragstart[3] = parseInt(menuobj.style.top);		doane(e);	} else if(op == 2 && menudragstart[0]) {		var menudragnow = is_ie ? [event.clientX, event.clientY] : [e.clientX, e.clientY];		menuobj.style.left = (menudragstart[2] + menudragnow[0] - menudragstart[0]) + 'px';		menuobj.style.top = (menudragstart[3] + menudragnow[1] - menudragstart[1]) + 'px';		doane(e);	} else if(op == 3) {		menudragstart = [];		doane(e);	}} function showMenu(ctrlid, click, offset, duration, timeout, layer, showid, maxh, drag) {	var ctrlobj = $(ctrlid);	if(!ctrlobj) return;	if(isUndefined(click)) click = false;	if(isUndefined(offset)) offset = 0;	if(isUndefined(duration)) duration = 2;	if(isUndefined(timeout)) timeout = 500;	if(isUndefined(layer)) layer = 0;	if(isUndefined(showid)) showid = ctrlid;	var showobj = $(showid);	var menuobj = $(showid + '_menu');	if(!showobj|| !menuobj) return;	if(isUndefined(maxh)) maxh = 400;	if(isUndefined(drag)) drag = false; 	if(click && jsmenu['active'][layer] == menuobj) {		hideMenu(layer);		return;	} else {		hideMenu(layer);	} 	var len = jsmenu['timer'].length;	if(len > 0) {		for(var i=0; i<len; i++) {			if(jsmenu['timer'][i]) clearTimeout(jsmenu['timer'][i]);		}	} 	initCtrl(ctrlobj, click, duration, timeout, layer);	ctrlobjclassName = ctrlobj.className;	ctrlobj.className += ' hover';	initMenu(ctrlid, menuobj, duration, timeout, layer, drag); 	menuobj.style.display = '';	if(!is_opera) {		menuobj.style.clip = 'rect(auto, auto, auto, auto)';	} 	setMenuPosition(showid, offset); 	if(is_ie && is_ie < 7) {		if(!jsmenu['iframe'][layer]) {			var iframe = document.createElement('iframe');			iframe.style.display = 'none';			iframe.style.position = 'absolute';			iframe.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';			$('append_parent') ? $('append_parent').appendChild(iframe) : menuobj.parentNode.appendChild(iframe);			jsmenu['iframe'][layer] = iframe;		}		jsmenu['iframe'][layer].style.top = menuobj.style.top;		jsmenu['iframe'][layer].style.left = menuobj.style.left;		jsmenu['iframe'][layer].style.width = menuobj.w;		jsmenu['iframe'][layer].style.height = menuobj.h;		jsmenu['iframe'][layer].style.display = 'block';	} 	if(maxh && menuobj.scrollHeight > maxh) {		menuobj.style.height = maxh + 'px';		if(is_opera) {			menuobj.style.overflow = 'auto';		} else {			menuobj.style.overflowY = 'auto';		}	} 	if(!duration) {		setTimeout('hideMenu(' + layer + ')', timeout);	} 	jsmenu['active'][layer] = menuobj;} function setMenuPosition(showid, offset) {	var showobj = $(showid);	var menuobj = $(showid + '_menu');	if(isUndefined(offset)) offset = 0;	if(showobj) {		showobj.pos = fetchOffset(showobj);		showobj.X = showobj.pos['left'];		showobj.Y = showobj.pos['top'];		showobj.w = showobj.offsetWidth;		showobj.h = showobj.offsetHeight;		menuobj.w = menuobj.offsetWidth;		menuobj.h = menuobj.offsetHeight;		if(offset < 3) {			menuobj.style.left = (showobj.X + menuobj.w > document.body.clientWidth) && (showobj.X + showobj.w - menuobj.w >= 0) ? showobj.X + showobj.w - menuobj.w + 'px' : showobj.X + 'px';			menuobj.style.top = offset == 1 ? showobj.Y + 'px' : (offset == 2 || ((showobj.Y + showobj.h + menuobj.h > document.documentElement.scrollTop + document.documentElement.clientHeight) && (showobj.Y - menuobj.h >= 0)) ? (showobj.Y - menuobj.h) + 'px' : showobj.Y + showobj.h + 'px');		} else if(offset == 3) {			menuobj.style.left = (document.body.clientWidth - menuobj.clientWidth) / 2 + document.body.scrollLeft + 'px';			menuobj.style.top = (document.body.clientHeight - menuobj.clientHeight) / 2 + document.body.scrollTop + 'px';		}		if(menuobj.style.clip && !is_opera) {			menuobj.style.clip = 'rect(auto, auto, auto, auto)';		}	}} function hideMenu(layer) {	if(isUndefined(layer)) layer = 0;	if(jsmenu['active'][layer]) {		try {			$(jsmenu['active'][layer].ctrlkey).className = ctrlobjclassName;		} catch(e) {}		clearTimeout(jsmenu['timer'][jsmenu['active'][layer].ctrlkey]);		jsmenu['active'][layer].style.display = 'none';		if(is_ie && is_ie < 7 && jsmenu['iframe'][layer]) {			jsmenu['iframe'][layer].style.display = 'none';		}		jsmenu['active'][layer] = null;	}} function fetchOffset(obj) {	var left_offset = obj.offsetLeft;	var top_offset = obj.offsetTop;	while((obj = obj.offsetParent) != null) {		left_offset += obj.offsetLeft;		top_offset += obj.offsetTop;	}	return { 'left' : left_offset, 'top' : top_offset };} function ebygum(eventobj) {	if(!eventobj || is_ie) {		window.event.cancelBubble = true;		return window.event;	} else {		if(eventobj.target.type == 'submit') {			eventobj.target.form.submit();		}		eventobj.stopPropagation();		return eventobj;	}} function menuoption_onclick_function(e) {	this.clickfunc();	hideMenu();} function menuoption_onclick_link(e) {	choose(e, this);} function menuoption_onmouseover(e) {	this.className = 'popupmenu_highlight';} function menuoption_onmouseout(e) {	this.className = 'popupmenu_option';}function choose(e, obj) {	var links = obj.getElementsByTagName('a');	if(links[0]) {		if(is_ie) {			links[0].click();			window.event.cancelBubble = true;		} else {			if(e.shiftKey) {				window.open(links[0].href);				e.stopPropagation();				e.preventDefault();			} else {				window.location = links[0].href;				e.stopPropagation();				e.preventDefault();			}		}		hideMenu();	}}</script><STYLE TYPE="text/css"> * { word-wrap: break-word;  }body { background: #FFF; text-align: center;}body, td, input, textarea, select, button { color: #000; font: 12px/1.6em  Arial }body, ul { margin: 0; padding: 0; }div {width:100%;height:900padding-top:600px;text-align: center;}a:link,a:visited{float:left;display: block;color:#fff;height:28px;line-height:28px;width:120px;background: #ca1717;border:solid #ca1717;border-width:3px 0;overflow:hidden;}a:hover{background: #F3F2ED;color:#222;}.dropmenu {cursor: pointer;background: #eee;}.popupmenu_popup { text-align: left; line-height: 1.4em; overflow: hidden; border: 1px solid #ccc; background: #FFF; }.headermenu_popup { width: 120px; }.headermenu_popup li { float: left; width: 114px;margin:0 3px; line-height: 24px; height: 24px; overflow: hidden;  }.headermenu_popup li a:link,.headermenu_popup li a:visited{display: block;text-align: center;color:#666;width:100%;background: #fff;border:0;}.headermenu_popup li a:hover {background: #eee;}</STYLE></head><body><div>我的收藏个人设置<br><br><ul class="popupmenu_popup headermenu_popup" id="my_menu" style="display: none">	<li>我的话题</li>	<li>我的收藏</li></ul><ul class="popupmenu_popup headermenu_popup" id="you_menu" style="display: none">	<li>我的话题2</li>	<li>我的收藏2</li>	<li>我的订阅2</li></ul> </div></body></html>

上一篇：利用cookie记忆当前位置的防刷新导航

下一篇：适应产品类网站点击向两侧展开的菜单