多层下拉菜单 - 网页特效代码

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 菜单导航 -> 多层下拉菜单 - 网页特效代码

多层下拉菜单 - 网页特效代码

作者:admin 发布时间:2008-2-22 14:00:31 发布人: admin

脚本说明:
把如下代码加入<body>区域中
<style rel="stylesheet" type="text/css">
.favMenu {
	BACKGROUND: buttonface; COLOR: windowtext; CURSOR: hand; FONT: menu
}
.favMenu DIV {
	WIDTH: 100%
}
.favMenu A {
	COLOR: windowtext; TEXT-DECORATION: none
}
.favMenu A:hover {
	COLOR: windowtext; TEXT-DECORATION: underline
}
.topFolder {
	BORDER-BOTTOM: buttonface 1px solid; BORDER-LEFT: buttonface 1px solid; BORDER-RIGHT: buttonface 1px solid; BORDER-TOP: buttonface 1px solid; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px
}
.topItem {
	BORDER-BOTTOM: buttonface 1px solid; BORDER-LEFT: buttonface 1px solid; BORDER-RIGHT: buttonface 1px solid; BORDER-TOP: buttonface 1px solid; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px
}
.subFolder {
	PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; PADDING-TOP: 3px
}
.subItem {
	PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; PADDING-TOP: 3px
}
.sub {
	BACKGROUND: url(http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg) buttonface; BORDER-BOTTOM: buttonhighlight 1px solid; BORDER-LEFT: buttonshadow 1px solid; BORDER-RIGHT: buttonhighlight 1px solid; DISPLAY: none; PADDING-TOP: 1px
}
.sub .sub {
	BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px
}
.icon {
	HEIGHT: 16px; MARGIN-RIGHT: 5px; VERTICAL-ALIGN: top; WIDTH: 16px
}
.outer {
	BACKGROUND: buttonface; BORDER-BOTTOM: buttonhighlight 1px solid; BORDER-LEFT: buttonshadow 1px solid; BORDER-RIGHT: buttonhighlight 1px solid; BORDER-TOP: buttonshadow 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
.inner {
	BORDER-BOTTOM: buttonshadow 1px solid; BORDER-LEFT: buttonhighlight 1px solid; BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid; OVERFLOW: hidden; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
.scrollButton {
	BACKGROUND: buttonface; BORDER-BOTTOM: buttonface 1px solid; BORDER-LEFT: buttonface 1px solid; BORDER-RIGHT: buttonface 1px solid; BORDER-TOP: buttonface 1px solid; COLOR: buttontext; CURSOR: default; DISPLAY: none; FONT-FAMILY: webdings; FONT-SIZE: 10px; HEIGHT: 16px; OVERFLOW: hidden; POSITION: absolute; TEXT-ALIGN: center; WIDTH: 50px
}
.flat {
	BORDER-BOTTOM: buttonface 1px solid; BORDER-LEFT: buttonface 1px solid; BORDER-RIGHT: buttonface 1px solid; BORDER-TOP: buttonface 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
</style>
<script type="text/javascript">
var selectedItem = null;

var targetWin;

document.onclick = handleClick;
document.onmouseover = handleOver;
document.onmouseout = handleOut;
document.onmousedown = handleDown;
document.onmouseup = handleUp;

document.write(writeSubPadding(10));  //write the stylesheet for the sub. Getting the indention right

if ((el.className == "topItem") || (el.className == "subItem")) {
		if ((el.href != null)  &&  (el.href != "")) {
			if ((el.target == null) || (el.target == "")) {
				if (window.opener == null) {
//					alert(document.all.tags("BASE").item(0));
					if (document.all.tags("BASE").item(0) != null)
//						eval(document.all.tags("BASE").item(0).target + ".location = el.href");
						window.open(el.href, document.all.tags("BASE").item(0).target);
					else 
						window.location = el.href;					// HERE IS THE LOADING!!!
				}
				else {
					window.opener.location =  el.href;
				}
			}
			else {
				window.open(el.href, el.target);
//				eval(el.target + ".location = el.href");
			}
		}
	}
	
	var tmp  = getReal(el, "className", "favMenu");
	if (tmp.className == "favMenu") fixScroll(tmp);

}

function handleOut() {
	var fromEl = getReal(window.event.fromElement, "tagName", "DIV");
	var toEl = getReal(window.event.toElement, "tagName", "DIV");
	if (fromEl == toEl) return;
	
	el = fromEl;

if ((el.className == "topFolder") || (el.className == "topItem")) outTopItem(el);
	if ((el.className == "subFolder") || (el.className == "subItem")) outSubItem(el);
	if (el.className == "scrollButton") outscrollButton(el);
}

function handleDown() {
	el = getReal(window.event.srcElement, "tagName", "DIV");
		
	if (el.className == "scrollButton") {
		downscrollButton(el);
		var mark = Math.max(el.id.indexOf("Up"), el.id.indexOf("Down"));
		var type = el.id.substr(mark);
		var menuID = el.id.substring(0,mark);
		eval("scroll" + type + "(" + menuID + ")");
	}
}

function handleUp() {
	el = getReal(window.event.srcElement, "tagName", "DIV");
		
	if (el.className == "scrollButton") {
		upscrollButton(el);
		window.clearTimeout(scrolltimer);
	}
}

////////////////////// EVERYTHING IS HANDLED ////////////////////////////

function hide(elID) {
	var el = eval(elID);
	el.style.display = "none";
	el.parentElement.openedSub = null;
	if (el.openedSub != null) hide(el.openedSub);
}

function writeSubPadding(depth) {
	var str, str2, val;

//If you wan't to change colors do so below

function overTopItem(el) {
	with (el.style) {
		background   = "buttonface";
		borderLeft   = "1px solid buttonhighlight";
		borderRight  = "1px solid buttonshadow";
		borderTop    = "1px solid buttonhighlight";
		borderBottom = "1px solid buttonshadow";
		paddingBottom = "2px";
	}
}

function overSubItem(el) {
	el.style.textDecoration = "underline";
}

function outSubItem(el) {
	el.style.textDecoration = "none";
}

function highlightSubItem(el) {
	el.style.background = "buttonshadow";
	el.style.color      = "white"; //"highlighttext";
	selectedItem = el;
}

function restoreSubItem(el) {
	el.style.background = "url(http://www.alixixi.com/UploadPic/userface/no1323.jpg) buttonface";
	el.style.color      = "menutext";
	selectedItem = null;
}

function overscrollButton(el) {
	overTopItem(el);
	el.style.padding = "0px";
}

function outscrollButton(el) {
	outTopItem(el);
	el.style.padding = "0px";
}

function downscrollButton(el) {
	with (el.style) {
		borderRight   = "1px solid buttonhighlight";
		borderLeft  = "1px solid buttonshadow";
		borderBottom    = "1px solid buttonhighlight";
		borderTop = "1px solid buttonshadow";
	}
}

function upscrollButton(el) {
	overTopItem(el);
	el.style.padding = "0px";
}

// ...till here

////////////////////////////////////////////////////////////////////////////////////////
// Fix the scrollbars

var globalScrollContainer;	// Needed because the object is called through windwow.setTimeout
var overflowTimeout = 1;

function fixScroll(el) {
	globalScrollContainer = el;
	window.setTimeout('changeOverflow(globalScrollContainer)', overflowTimeout);
}

function changeOverflow(el) {
	if (el.offsetHeight > el.parentElement.clientHeight)
		window.setTimeout('globalScrollContainer.parentElement.style.overflow = "auto";', overflowTimeout);
	else
		window.setTimeout('globalScrollContainer.parentElement.style.overflow = "hidden";', overflowTimeout);
}
</script>

<div class="outer" style="HEIGHT: 280px; MARGIN: 10px; WIDTH: 180px">
<div class="inner" style="HEIGHT: 280px; WIDTH: 180px">
<div class="favMenu" id="aMenu">
<div class="topFolder" id="samples"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">Samples</div>
<div class="sub" id="samplesSub">
<div class="subItem" title="(Updated: 980701)" href="/dhtml/favbar/fav2.shtml"></span><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">Favorite Bar</div>
<div class="subItem" title="(Updated: 980701)" href="/dhtml/testBlink.shtml"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"><blink> Behavior 
(IE5)</div>
<div class="subItem" title="(Updated: 980630)" href="/dhtml/genericMove.shtml"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">genericMove</div>
<div class="subItem" title="(Updated: 980628)" href="/dhtml/genericResize.shtml"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">Resizeable DIV</div>
<div class="subItem" title="(Updated: 980605)" href="/dhtml/dhtmlmenu/menu.shtml"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">DHTML Menu</div>
<div class="subItem" title="Uses one <TEXTAREA> and one <IFRAME> for preview. (Updated: 980318)" href="/dhtml/DHTMLeditor.shtml"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">DHTML Editor</div>
<div class="subItem" title="Use rich text tooltips. (Updated: Way back!)" href="/dhtml/tooltip/tooltip.shtml"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">ToolTips</div></div>
<div class="topFolder" id="docs"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">Docs</div>
<div class="sub" id="docsSub">
<div class="subFolder" id="subdocs"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">more Docs</div>
<div class="sub" id="subdocsSub">
<div class="subFolder" id="evendocs"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">even more Docs</div>
<div class="sub" id="evendocsSub">
<div class="subItem"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">doc 3.1</div>
<div class="subItem"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">doc 3.2</div></div>
<div class="subItem"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">doc 2.1</div>
<div class="subItem"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">doc 2.2</div></div>
<div class="subItem"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">doc 1</div>
<div class="subItem"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">doc 2</div>
<div class="subFolder" id="subdocs2"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">more Docs</div>
<div class="sub" id="subdocs2Sub">
<div class="subItem"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">doc 2.1</div>
<div class="subItem"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">doc 2.2</div>
<div class="subFolder" id="evendocs2"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">even more Docs</div>
<div class="sub" id="evendocs2Sub">
<div class="subItem"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">doc 3.1</div>
<div class="subItem"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">doc 3.2</div></div></div>
<div class="subItem"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">doc 3</div>
<div class="subItem"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">doc 4</div></div>
<div class="topFolder" id="links"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">Links</div>
<div class="sub" id="linksSub">
<div class="subItem" href="http://www.insidedhtml.com"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">InsideDHTML</div>
<div class="subItem" href="http://members.xoom.com/dynduo/"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">The Dynamic Duo</div>
<div class="subItem" href="http://www.ircweb.net/eae/fx/"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">WebFX</div></div>
<div class="topFolder" id="todo" style="FONT-WEIGHT: bold"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"><font color="red">警告：</div>
<div class="sub" id="todoSub" style="PADDING-LEFT: 22px">
<div>此特效未经允许请不要随便使用</div></div>
<div class="topItem" href="http://www.163.net/"><img src="http://web.archive.org/web/20150530123119im_/http://www.alixixi.com/UploadPic/userface/no1323.jpg" style="HEIGHT: 17px" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">Back to 
163.net</div></div>

多层下拉菜单 - 网页特效代码

将本文收藏到QQ书签与更多好友分享

上一篇：文章：页面顶部菜单 - 网页特效代码下一篇：文章：强制网页图片自适应大小的网页特效代码

网页特效

多层下拉菜单 - 网页特效代码

本类浏览排行 »

本站推荐文章 »