JS特效之多层下拉菜单

                                       JS特效之多层下拉菜单

脚本说明:
把如下代码加入<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(/images/tileback.gif) 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


function handleClick() {
el = getReal(window.event.srcElement, "tagName", "DIV");

if ((el.className == "topFolder") || (el.className == "subFolder")) {
// if (el.sub == null) el.sub = eval(el.id + "Sub");
// alert(el.sub);
el.sub = eval(el.id + "Sub");
if (el.sub.style.display == null) el.sub.style.display = "none";
if (el.sub.style.display != "block") { //hidden
//any other sub open?
if (el.parentElement.openedSub != null) {
var opener = eval(el.parentElement.openedSub + ".opener");
hide(el.parentElement.openedSub);
if (opener.className == "topFolder")
outTopItem(opener);
}
el.sub.style.display = "block";
el.sub.parentElement.openedSub = el.sub.id;
el.sub.opener = el;
}
else {
if (el.sub.openedSub != null) hide(el.sub.openedSub);
else hide(el.sub.id);
}
}

if ((el.className == "subItem") || (el.className == "subFolder")) {
if (selectedItem != null)
restoreSubItem(selectedItem);
highlightSubItem(el);
}

if ((el.className == "topItem") || (el.className == "topFolder")) {
if (selectedItem != null)
restoreSubItem(selectedItem);
}


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 handleOver() {
var fromEl = getReal(window.event.fromElement, "tagName", "DIV");
var toEl = getReal(window.event.toElement, "tagName", "DIV");
if (fromEl == toEl) return;

el = toEl;

if ((el.className == "topFolder") || (el.className == "topItem")) overTopItem(el);
if ((el.className == "subFolder") || (el.className == "subItem")) overSubItem(el);

if ((el.className == "topItem") || (el.className == "subItem")) {
if (el.href != null) {
if (el.oldtitle == null) el.oldtitle = el.title;
if (el.oldtitle != "")
el.title = el.oldtitle + "\n" + el.href;
else
el.title = el.oldtitle + el.href;
}
}

if (el.className == "scrollButton") overscrollButton(el);
}


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;


var str = "<style type='text/css'>\n";

for (var i=0; i < depth; i++) {
str2 = "";
val  = 0;
for (var j=0; j < i; j++) {
str2 += ".sub "
val += 22;
}
str += str2 + ".subFolder {padding-left: " + val + "px;}\n";
str += str2 + ".subItem   {padding-left: " + val + "px;}\n";
}

str += "</style>\n";
return str;
}


//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 outTopItem(el) {
if ((el.sub != null) && (el.parentElement.openedSub == el.sub.id)) { //opened
with(el.style) {
borderTop = "1px solid buttonshadow";
borderLeft  = "1px solid buttonshadow";
borderRight    = "1px solid buttonhighlight";
borderBottom = "0px";
paddingBottom = "3px";
background = "url(/images/tileback.gif) buttonface";
}
}
else {
with (el.style) {
border = "1px solid buttonface";
background = "buttonface";
padding = "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(/images/tileback.gif) 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


function getReal(el, type, value) {
var temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
if (eval("temp." + type) == value) {
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}




////////////////////////////////////////////////////////////////////////////////////////
// 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>
<!-- Favorite Bar Starts Here -->
<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 class=icon height=16 
src="foldericon1.gif" width=16>Samples</DIV>
<DIV class=sub id=samplesSub>
<DIV class=subItem title="(Updated: 980701)" 
href="/dhtml/favbar/fav2.shtml"></SPAN><IMG class=icon height=16 
src="htmlicon.gif" width=16>Favorite Bar</DIV>
<DIV class=subItem title="(Updated: 980701)" href="/dhtml/testBlink.shtml"><IMG 
class=icon height=16 src="htmlicon.gif" width=16><BLINK> Behavior 
(IE5)</DIV>
<DIV class=subItem title="(Updated: 980630)" 
href="/dhtml/genericMove.shtml"><IMG class=icon height=16 
src="htmlicon.gif" width=16>genericMove</DIV>
<DIV class=subItem title="(Updated: 980628)" 
href="/dhtml/genericResize.shtml"><IMG class=icon height=16 
src="htmlicon.gif" width=16>Resizeable DIV</DIV>
<DIV class=subItem title="(Updated: 980605)" 
href="/dhtml/dhtmlmenu/menu.shtml"><IMG class=icon height=16 
src="htmlicon.gif" width=16>DHTML Menu</DIV>
<DIV class=subItem 
title="Uses one <TEXTAREA> and one <IFRAME> for preview. (Updated: 980318)" 
href="/dhtml/DHTMLeditor.shtml"><IMG class=icon height=16 
src="htmlicon.gif" width=16>DHTML Editor</DIV>
<DIV class=subItem title="Use rich text tooltips. (Updated: Way back!)" 
href="/dhtml/tooltip/tooltip.shtml"><IMG class=icon height=16 
src="htmlicon.gif" width=16>ToolTips</DIV></DIV>
<DIV class=topFolder id=docs><IMG class=icon height=16 
src="foldericon1.gif" width=16>Docs</DIV>
<DIV class=sub id=docsSub>
<DIV class=subFolder id=subdocs><IMG class=icon height=16 
src="foldericon1.gif" width=16>more Docs</DIV>
<DIV class=sub id=subdocsSub>
<DIV class=subFolder id=evendocs><IMG class=icon height=16 
src="foldericon1.gif" width=16>even more Docs</DIV>
<DIV class=sub id=evendocsSub>
<DIV class=subItem><IMG class=icon height=16 src="htmlicon.gif" 
width=16>doc 3.1</DIV>
<DIV class=subItem><IMG class=icon height=16 src="htmlicon.gif" 
width=16>doc 3.2</DIV></DIV>
<DIV class=subItem><IMG class=icon height=16 src="htmlicon.gif" 
width=16>doc 2.1</DIV>
<DIV class=subItem><IMG class=icon height=16 src="htmlicon.gif" 
width=16>doc 2.2</DIV></DIV>
<DIV class=subItem><IMG class=icon height=16 src="htmlicon.gif" 
width=16>doc 1</DIV>
<DIV class=subItem><IMG class=icon height=16 src="htmlicon.gif" 
width=16>doc 2</DIV>
<DIV class=subFolder id=subdocs2><IMG class=icon height=16 
src="foldericon1.gif" width=16>more Docs</DIV>
<DIV class=sub id=subdocs2Sub>
<DIV class=subItem><IMG class=icon height=16 src="htmlicon.gif" 
width=16>doc 2.1</DIV>
<DIV class=subItem><IMG class=icon height=16 src="htmlicon.gif" 
width=16>doc 2.2</DIV>
<DIV class=subFolder id=evendocs2><IMG class=icon height=16 
src="foldericon1.gif" width=16>even more Docs</DIV>
<DIV class=sub id=evendocs2Sub>
<DIV class=subItem><IMG class=icon height=16 src="htmlicon.gif" 
width=16>doc 3.1</DIV>
<DIV class=subItem><IMG class=icon height=16 src="htmlicon.gif" 
width=16>doc 3.2</DIV></DIV></DIV>
<DIV class=subItem><IMG class=icon height=16 src="htmlicon.gif" 
width=16>doc 3</DIV>
<DIV class=subItem><IMG class=icon height=16 src="htmlicon.gif" 
width=16>doc 4</DIV></DIV><!-- for docsSub-->
<DIV class=topFolder id=links><IMG class=icon height=16 
src="foldericon1.gif" width=16>Links</DIV>
<DIV class=sub id=linksSub>
<DIV class=subItem href="http://www.insidedhtml.com"><IMG class=icon height=16 
src="htmlicon.gif" width=16>InsideDHTML</DIV>
<DIV class=subItem href="http://members.xoom.com/dynduo/"><IMG class=icon 
height=16 src="htmlicon.gif" width=16>The Dynamic Duo</DIV>
<DIV class=subItem href="http://www.ircweb.net/eae/fx/"><IMG class=icon 
height=16 src="htmlicon.gif" width=16>WebFX</DIV></DIV>
<DIV class=topFolder id=todo style="FONT-WEIGHT: bold"><IMG class=icon height=16 
src="sched.gif" width=16><font color=red>警告:</font></DIV>
<DIV class=sub id=todoSub style="PADDING-LEFT: 22px">
<DIV class=topItem href="http://www.163.net/"><IMG class=icon height=17 
src="home.gif" style="HEIGHT: 17px" width=16>Back to 
163.net</DIV></DIV>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

穿越清华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值