筚路蓝缕

不因成就而狂妄、不因失落而气馁、不因欲望而沉重、不因嫉妒而困扰

Javascript

下拉菜单

Venlentine 
<style rel='stylesheet' type='text/css'>
 BODY {
	BORDER-BOTTOM:0px;
	BORDER-LEFT:0px;
	BORDER-RIGHT:0px;
	BORDER-TOP:0px;
	MARGIN:0px
}
#menu {
	BACKGROUND:buttonface;
	BORDER-BOTTOM:buttonface 1px solid;
	BORDER-LEFT:buttonface 1px solid;
	BORDER-RIGHT:buttonface 1px solid;
	BORDER-TOP:buttonface 1px solid;
	CURSOR:default;
	LEFT:0px;
	POSITION:absolute;
	TOP:0px
}
#menu .menu {
	BACKGROUND:buttonface;
	BORDER-BOTTOM:buttonhighlight 2px outset;
	BORDER-LEFT:buttonhighlight 2px outset;
	BORDER-RIGHT:buttonhighlight 2px outset;
	BORDER-TOP:buttonhighlight 2px outset;
	POSITION:absolute
}
#menu TD {
	FONT:menu;
	HEIGHT:20px
}
#menu .root {
	BORDER-BOTTOM:buttonface 1px solid;
	BORDER-LEFT:buttonface 1px solid;
	BORDER-RIGHT:buttonface 1px solid;
	BORDER-TOP:buttonface 1px solid;
	MARGIN:6px;
	PADDING-BOTTOM:1px;
	PADDING-LEFT:7px;
	PADDING-RIGHT:7px;
	PADDING-TOP:1px
}
#menu .icon {
	TEXT-ALIGN:center
}
#menu .disabled {
	COLOR:buttonshadow
}
#menu .more {
	FONT-FAMILY:webdings;
	TEXT-ALIGN:right;
	WIDTH:20px
}
#menu #handle {
	BORDER-BOTTOM:buttonshadow 1px solid;
	BORDER-LEFT:buttonhighlight 1px solid;
	BORDER-RIGHT:buttonshadow 1px solid;
	BORDER-TOP:buttonhighlight 1px solid;
	CURSOR:move;
	MARGIN:0px;
	PADDING-BOTTOM:0px;
	PADDING-LEFT:0px;
	PADDING-RIGHT:0px;
	PADDING-TOP:0px
}
#outerDiv {
	BORDER-BOTTOM:white 2px inset;
	BORDER-LEFT:white 2px inset;
	BORDER-RIGHT:white 2px inset;
	BORDER-TOP:white 2px inset;
	HEIGHT:90%;
	OVERFLOW:auto;
	POSITION:absolute;
	WIDTH:100%;
	Z-INDEX: -1
}
</style>
<script type='text/javascript'> 
var activeMenu = null;
var activeSub = null;
var tempEl;
var t;
var hideWindowedControls = true;
var ie5 = (document.getElementsByTagName != null);
//////////////////////////////////////////////////////// 
//If you wan't different colors than default overload these functions... 


function menuItemHighlight(el)
{
	el.style.background = "highlight";
	el.style.color = "highlighttext";
}

function menuItemNormal(el)
{
	el.style.background = "";
	el.style.color = "";
}

function raiseButton(el)
{
	el.style.borderTop = "1 solid buttonhighlight";
	el.style.borderLeft = "1 solid buttonhighlight";
	el.style.borderBottom = "1 solid buttonshadow";
	el.style.borderRight = "1 solid buttonshadow";
	el.style.padding = "1";
	el.style.paddingLeft = "7";
	el.style.paddingRight = "7";
}

function normalButton(el)
{
	el.style.border = "1 solid buttonface";
	el.style.padding = "1";
	el.style.paddingLeft = "7";
	el.style.paddingRight = "7";
}

function pressedButton(el)
{
	el.style.borderTop = "1 solid buttonshadow";
	el.style.paddingTop = "2";
	el.style.borderLeft = "1 solid buttonshadow";
	el.style.paddingLeft = "8";
	el.style.borderBottom = "1 solid buttonhighlight";
	el.style.paddingBottom = "0";
	el.style.borderRight = "1 solid buttonhighlight";
	el.style.paddingRight = "6";
}
//...untill here //////////////////////////////////////////////////////// 


function cleanUpMenuBar()
{
	for (i = 0; i < menu.rows.length; i++)
	{
		for (j = 0; j < menu.rows(i).cells.length; j++)
		{
			if (menu.rows(i).cells(j).className == "root")
			{
				normalButton(menu.rows(i).cells(j));
			}
		}
	}
	showWindowedObjects(true);
}

function getMenuItem(el)
{
	temp = el;
	while ((temp != null) && (temp.tagName != "TABLE") && (temp.id != "menubar") && (temp.id != "menu") && (temp.id != "handle"))
	{
		if ((temp.tagName == "TR") || (temp.className == "root")) el = temp;
		temp = temp.parentElement;
	}
	return el;
}

function getSub(el)
{
	temp = el;
	while ((temp != null) && (temp.className != "sub"))
	{
		i
		f(temp.tagName == "TABLE") el = temp;
		temp = temp.parentElement;
	}
	return el;
}

function menuClick()
{
	if (event.srcElement == null) return;
	var el = getMenuItem(event.srcElement);
	if ((el.className != "disabled") && (el.id != "menubar"))
	{
		if (el.className == "root")
		{
			if (activeMenu)
			{
				raiseButton(el);
				showWindowedObjects(true);
			}
			else pressedButton(el);
			toggleMenu(el);
		}
		else if (el.href)
		{
			cleanUpMenuBar();
			if (activeMenu) toggleMenu(activeMenu.parentElement);
			if (el.target) window.open(el.href, el.target);
			else if (document.all.tags("BASE").item(0) != null) window.open(el.href, document.all.tags("BASE").item(0).target);
			else window.location = el.href;
		}
	}
	window.event.cancelBubble = true;
}
//////////////////////////////////////////////////////// 
// Used to hide the menu when clicked elsewhere 


function Restore()
{
	if (activeMenu)
	{
		toggleMenu(activeMenu.parentElement);
		cleanUpMenuBar();
	}
}
document.onclick = Restore;
//////////////////////////////////////////////////////// 


function menuOver()
{
	if ((event.fromElement == null) || (event.toElement == null) || (event.fromElement == event.toElement)) return;
	var fromEl = getMenuItem(event.fromElement);
	var toEl = getMenuItem(event.toElement);
	if (fromEl == toEl) return;
	if ((toEl.className != "disabled") && (toEl.id != "menubar"))
	{
		if (toEl.className == "root")
		{
			if (activeMenu)
			{
				if (toEl.menu != activeMenu)
				{
					cleanUpMenuBar();
					pressedButton(toEl);
					toggleMenu(toEl);
				}
			}
			else
			{
				raiseButton(toEl);
			}
		}
		else
		{
			if ((fromEl != toEl) && (toEl.tagName != "TABLE"))
			{
				cleanup(toEl.parentElement.parentElement, false);
				menuItemHighlight(toEl);
				toEl.parentElement.parentElement.activeItem = toEl;
				if (toEl.href) window.status = toEl.href;
				if (toEl.className == "sub") showSubMenu(toEl, true);
			}
		}
	}
}

function menuOut()
{
	if ((event.fromElement == null) || (event.toElement == null) || (event.fromElement == event.toElement)) return;
	var fromEl = getMenuItem(event.fromElement);
	var toEl = getMenuItem(event.toElement);
	if (fromEl == toEl) return;
	if (fromEl.className == "root")
	{
		if (activeMenu)
		{
			if (fromEl.menu != activeMenu) normalButton(fromEl);
		}
		else normalButton(fromEl);
	}
	else
	{
		if ((fromEl.className != "disabled") && (fromEl.id != "menubar"))
		{
			if ((fromEl.className == "sub") && (getSub(toEl) == fromEl.subMenu) || (fromEl.subMenu == toEl.parentElement.parentElement)) return;
			else if ((fromEl.className == "sub"))
			{
				cleanup(fromEl.subMenu, true);
				menuItemNormal(fromEl);
			}
			else if ((fromEl != toEl) && (fromEl.tagName != "TABLE")) menuItemNormal(fromEl);
			window.status = "";
		}
	}
}

function toggleMenu(el)
{
	if (el.menu == null) el.menu = getChildren(el);
	if (el.menu == activeMenu)
	{
		if (activeSub) menuItemNormal(activeSub.parentElement.parentElement);
		cleanup(el.menu, true);
		activeMenu = null;
		activeSub = null;
		// showWindowedObjects(true); 
	}
	else
	{
		if (activeMenu)
		{
			cleanup(activeMenu, true);
			hideMenu(activeMenu);
		}
		activeMenu = el.menu;
		var tPos = topPos(el.menu) + menu.offsetHeight;
		if ((document.body.offsetHeight - tPos) >= el.menu.offsetHeight)
		{
			el.menu.style.pixelTop = (ie5) ? el.offsetHeight + 1 : menu.offsetHeight - el.offsetTop - 2;
			dir = 2;
		}
		else
		{
			el.menu.style.pixelTop = (ie5) ? el.offsetTop - el.menu.offsetHeight - 1 : el.offsetTop - el.menu.offsetHeight + 2;
			dir = 8;
		}
		el.menu.style.pixelLeft = (ie5) ? el.offsetLeft - 2 : el.offsetLeft;
		show(el.menu, dir);
		showWindowedObjects(false);
	}
}

function showSubMenu(el, show)
{
	var dir = 2;
	temp = el;
	list = el.children.tags("TD");
	el = list[list.length - 1];
	if (el.menu == null) el.menu = getChildren(el);
	temp.subMenu = el.menu;
	if ((el.menu != activeMenu) && (show))
	{
		activeSub = el.menu;
		var lPos = leftPos(el.menu);
		if ((document.body.offsetWidth - lPos) >= el.menu.offsetWidth)
		{
			el.menu.style.left = (ie5) ? el.parentNode.offsetWidth : el.offsetParent.offsetWidth;
			dir = 6;
		}
		else
		{
			el.menu.style.left = -el.menu.offsetWidth + 3;
			dir = 4;
		}
		var tPos = (ie5) ? topPos(el.menu) + el.offsetTop : topPos(el.menu) + el.offsetParent.offsetTop;
		// + el.menu.offsetTop; 
		if ((document.body.offsetHeight - tPos) >= el.menu.offsetHeight) el.menu.style.top = (ie5) ? el.offsetTop - 4 : el.offsetParent.offsetTop - 2;
		else el.menu.style.top = (ie5) ? el.offsetTop + el.offsetHeight - el.menu.offsetHeight : el.offsetParent.offsetTop + el.offsetParent.offsetHeight - el.menu.offsetHeight + 2;
		showSub(el.menu, dir);
	}
	else
	{
		show(el.menu, dir);
		activeSub = null;
	}
}
//////////////////////////////////////////////////////// 
//The following two functions are needed to calculate the position 


function topPos(el)
{
	var temp = el;
	var y = 0;
	while (temp.id != "menu")
	{
		temp = temp.offsetParent;
		y += temp.offsetTop;
	}
	return y;
}

function leftPos(el)
{
	var temp = el;
	var x = 0;
	while (temp.id != "menu")
	{
		temp = temp.offsetParent;
		x += temp.offsetLeft;
	}
	return x + el.offsetParent.offsetWidth;
}
////////////////////////////////////////////////////////


function show(el, dir)
{
	if (typeof (fade) == "function") fade(el, true);
	else if (typeof (swipe) == "function")
	{
		tempElSwipe = el;
		tempDirSwipe = dir;
		el.style.visibility = "visible";
		el.style.visibility = "hidden";
		window.setTimeout("tempSwipe()", 0);
		// swipe(el, dir); 
	}
	else el.style.visibility = "visible";
}
var tempElSwipe, tempDirSwipe;

function tempSwipe()
{
	swipe(tempElSwipe, tempDirSwipe);
}

function showSub(el, dir)
{
	show(el, dir);
	// swipe(el, dir); 
	// fade(el, true); 
	// el.style.visibility = "visible"; 
}

function cleanup(menu, hide)
{
	if (menu.activeItem)
	{
		//If you've been here before
		if ((menu.activeItem.className == "sub") && (menu.activeItem.subMenu))
		{
			//The active item has a submenu 
			cleanup(menu.activeItem.subMenu, true);
			//Clean up the subs as well 
		}
		menuItemNormal(menu.activeItem);
	}
	if (hide)
	{
		hideMenu(menu);
	}
}

function hideMenu(el)
{
	if (typeof (fade) == "function")
	{
		fade(el, false);
		// window.setTimeout(fadeTimer); 
	}
	else if (typeof (swipe) == "function")
	{
		hideSwipe(el);
	}
	else el.style.visibility = "hidden";
}

function getChildren(el)
{
	var tList = el.children.tags("TABLE");
	return tList[0];
}
///////////////////////////////////////////////////////////////////////////// 
// The rest is just for the moving/docking
var dragObject = null;
var dragObjectPos = "top";
var tx;
var ty;
///////////////////////////////////////////////////////////////////////////// 
// Fixing sizes and positions 
window.onload = fixSize;
window.onresize = fixSize;

function fixSize()
{
	if (dragObjectPos == "top")
	{
		outerDiv.style.top = menu.offsetHeight;
		outerDiv.style.height = document.body.clientHeight - menu.offsetHeight;
	}
	else if (dragObjectPos == "bottom")
	{
		outerDiv.style.top = 0;
		outerDiv.style.height = document.body.clientHeight - menu.offsetHeight;
		menu.style.top = document.body.clientHeight - menu.offsetHeight;
	}
	else
	{
		outerDiv.style.top = 0;
		outerDiv.style.height = document.body.clientHeight;
	}
}
///////////////////////////////////////////////////////////////////////////// 


function document.onmousedown()
{
	if (window.event.srcElement.id == "handle")
	{
		dragObject = document.all[window.event.srcElement.getAttribute("for")];
		Restore();
		//Hide the menus while moving 
		ty = (window.event.clientY - dragObject.style.pixelTop);
		window.event.returnValue = false;
		window.event.cancelBubble = true;
	}
	else
	{
		dragObject = null;
	}
}
function document.onmouseup()
{
	if (dragObject)
	{
		dragObject = null;
	}
}

function document.onmousemove()
{
	if (dragObject)
	{
		if (window.event.clientX >= 0)
		{
			if ((window.event.clientY - ty) <= 15)
			{
				dragObject.style.border = "0 solid buttonface";
				dragObject.style.width = "100%";
				dragObject.style.top = 0;
				dragObject.style.left = 0;
				dragObjectPos = "top";
				fixSize();
			}
			else if ((window.event.clientY - ty) >= document.body.clientHeight - menu.offsetHeight - 15)
			{
				dragObject.style.border = "0 solid buttonface";
				dragObject.style.width = "100%";
				dragObject.style.top = document.body.clientHeight - menu.offsetHeight;
				dragObject.style.left = 0;
				dragObjectPos = "bottom";
				fixSize();
			}
			else
			{
				dragObject.style.width = "10px";
				dragObject.style.left = window.event.clientX;
				dragObject.style.top = window.event.clientY - ty;
				dragObject.style.border = "2px outset white";
				dragObjectPos = "float";
				fixSize();
			}
		}
		else
		{
			dragObject.style.border = "";
			dragObject.style.left = "0";
			dragObject.style.top = "0";
		}
		window.event.returnValue = false;
		window.event.cancelBubble = true;
	}
}
//This function si used for hiding windowed controls because they interfere with the menus 


function showWindowedObjects(show)
{
	if (hideWindowedControls)
	{
		var windowedObjectTags = new Array("Select", "IFRAME", "OBJECT", "APPLET", "EMBED");
		var windowedObjects = new Array();
		var j = 0;
		for (var i = 0; i < windowedObjectTags.length; i++)
		{
			var tmpTags = document.all.tags(windowedObjectTags[i]);
			if (tmpTags.length > 0)
			{
				for (var k = 0; k < tmpTags.length; k++)
				{
					windowedObjects[j++] = tmpTags[k];
				}
			}
		}
		for (var i = 0; i < windowedObjects.length; i++)
		{
			if (!show) windowedObjects[i].visBackup = (windowedObjects[i].style.visibility == null) ? "visible" : windowedObjects[i].style.visibility;
			windowedObjects[i].style.visibility = (show) ? windowedObjects[i].visBackup : "hidden";
		}
	}
}
</script>
<table cellspacing='1' id='menu' onclick='menuClick()' onmouseout='menuOut()' onmouseover='menuOver()' onselectstart="return false">
<tbody>
<tr id='menubar'>
	<!-- This is a handle. Grab this -->
	<td class='disabled' style="PADDING-LEFT: 0px; PADDING-RIGHT: 1px">
		<div class='disabled' id='handle' style="HEIGHT: 100%; LEFT: 3px; WIDTH: 3px" title="Move me!" for="menu">
		</div>
	</td>
	<!-- End of handle -->
	<td class='root'>
		Demo
		<table cellspacing='0' class='menu' style="VISIBILITY: hidden">
		<tbody>
		<tr href="javascript:alert('这里可以改成一个链接!')">
			<td>
				<img height='17' src="home.gif" tppabs="http://www.baron.com.cn/javascript/menu/home.gif" width='16'>
			</td>
			<td nowrap>
				You can use icons
			</td>
			<td>
			</td>
		</tr>
		<tr class='disabled'>
			<td>
			</td>
			<td nowrap>
				Disabled menuItems
			</td>
			<td>
			</td>
		</tr>
		<tr class='sub'>
			<td>
			</td>
			<td nowrap>
				Use sub menus
			</td>
			<td>
				<span class='more'>4</span>
				<table cellspacing='0' class='menu' style="VISIBILITY: hidden">
				<tbody>
				<tr href="javascript:alert('这里可以改成一个链接')">
					<td nowrap style="HEIGHT: 20px">
						Inside a sub menu
					</td>
				</tr>
				</tbody>
				</table>
			</td>
		</tr>
		<tr class='disabled'>
			<td colspan='3'>
				<hr/>
			</td>
		</tr>
		<tr href="javascript:alert('这里可以改成一个链接')">
			<td>
			</td>
			<td>
				Use separators
			</td>
			<td>
			</td>
		</tr>
		<tr title="This is really easy">
			<td>
			</td>
			<td>
				Use tool tip
			</td>
			<td>
			</td>
		</tr>
		</tbody>
		</table>
	</td>
	<!-- Leave this About -->
	<td class='root'>
		Help
		<table cellspacing='0' class='menu' style="VISIBILITY: hidden">
		<tbody>
		<tr class='sub'>
			<td>
				<span style="WIDTH: 20px"></span>
			</td>
			<td>
				About
			</td>
			<td>
				<span class='more'>4</span>
				<table cellspacing='0' class='menu' style="BACKGROUND: black; VISIBILITY: hidden">
				<tbody>
				<tr class='disabled' title="">
					<td>
						<div style="BACKGROUND: black; COLOR: white; FONT-FAMILY: verdana; FONT-SIZE: 12px; MARGIN: 5px; PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px; WIDTH: 200px">
							<p style="MARGIN : 5px">
								站长<span style="COLOR: tomato; FONT-WEIGHT: bold">晨曦</span> 欢迎你的光临<a href="mailto:xiaoqinglu@263.net" style="COLOR: white">ChengXi</a>.
							</p>
							<p style="BACKGROUND: beige; COLOR: red; FONT-SIZE: 9px; MARGIN: 10px">
								这个菜单只适用与IE4.0或更高版本
							</p>
							<p onclick="bugs.style.display=(bugs.style.display=='')?'none':'';" style="CURSOR: hand; TEXT-DECORATION: underline">
								欢迎再次光临!
							</p>
							<p id='bugs' style="DISPLAY: none; MARGIN-LEFT: 20px; MARGIN-TOP: -5px">
								www.javascript2000.com 是最大的中文javascript站点 并且每日更新，你一定不可错过
							</p>
							<hr style="COLOR: deepskyblue">
							<p style="MARGIN-BOTTOM: -10px; MARGIN-LEFT: 33px; MARGIN-TOP: -12px">
								<a href="javascript:if(confirm('http://www.javascript2000.com/ /n/n文件并未依 Teleport Pro 取回，因为 它的域或路径超过开始网址中设置的范围。 /n/n你要从服务器上打开它吗？'))window.location='http://www.javascript2000.com/'" tppabs="http://www.javascript2000.com/" style="COLOR: white; FONT-FAMILY: arial black; FONT-SIZE: 30px; FONT-STYLE: italic; TEXT-DECORATION: none" target='_top'>javascript2000</a>
							</p>
						</div>
					</td>
				</tr>
				</tbody>
				</table>
			</td>
			<!-- Till here -->
		</tr>
		</tbody>
		</table>
	</td>
	<td class='disabled' width="100%">
	</td>
</tr>
</tbody>
</table>
<div id='outerDiv'></div>

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部