日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

搜索
分享

點擊后彈出菜單，有四層子菜單，可自定義

 丶平上 2013-09-03

<html>
<head>
<title>包含四級下拉子菜單的折疊菜單丨芯晴網(wǎng)頁特效丨CsrCode.Cn</title>
<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() 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>
</head>
<body>
<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴網(wǎng)頁特效</a>丨CsrCode.Cn 收集于互聯(lián)網(wǎng)，只為興趣與學習交流，不作商業(yè)用途。</font></p>

<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() 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() 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="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>Samples</DIV>
<DIV class=sub id=samplesSub>
<DIV class=subItem title="(Updated: 980701)" href="#nogo"></SPAN><img class="icon" height="16" src="/html/txdm_2/images/20101009/changshi.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>Favorite Bar</DIV>
<DIV class=subItem title="(Updated: 980701)" href="#nogo"><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/><BLINK> Behavior
(IE5)</DIV>
<DIV class=subItem title="(Updated: 980630)" href="#nogo"><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>genericMove</DIV>
<DIV class=subItem title="(Updated: 980628)" href="#nogo"><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>Resizeable DIV</DIV>
<DIV class=subItem title="(Updated: 980605)" href="#nogo"><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>DHTML Menu</DIV>
<DIV class=subItem
title="Uses one <TEXTAREA> and one <IFRAME> for preview. (Updated: 980318)"
href="#nogo"><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>DHTML Editor</DIV>
<DIV class=subItem title="Use rich text tooltips. (Updated: Way back!)" href="#nogo"><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>ToolTips</DIV></DIV>
<DIV class=topFolder id=docs><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>Docs</DIV>
<DIV class=sub id=docsSub>
<DIV class=subFolder id=subdocs><img class="icon" height="16" src="/html/txdm_2/images/20101009/changshi.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>more Docs</DIV>
<DIV class=sub id=subdocsSub>
<DIV class=subFolder id=evendocs><img class="icon" height="16" src="/html/txdm_2/images/20101009/links.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>even more Docs</DIV>
<DIV class=sub id=evendocsSub>
<DIV class=subItem><img class="icon" height="16" src="/html/txdm_2/images/20101009/changshi.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>doc 3.1</DIV>
<DIV class=subItem><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>doc 3.2</DIV></DIV>
<DIV class=subItem><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>doc 2.1</DIV>
<DIV class=subItem><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>doc 2.2</DIV></DIV>
<DIV class=subItem><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>doc 1</DIV>
<DIV class=subItem><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>doc 2</DIV>
<DIV class=subFolder id=subdocs2><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>more Docs</DIV>
<DIV class=sub id=subdocs2Sub>
<DIV class=subItem><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>doc 2.1</DIV>
<DIV class=subItem><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>doc 2.2</DIV>
<DIV class=subFolder id=evendocs2><img class="icon" height="16" src="/html/txdm_2/images/20101009/changshi.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>even more Docs</DIV>
<DIV class=sub id=evendocs2Sub>
<DIV class=subItem><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>doc 3.1</DIV>
<DIV class=subItem><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>doc 3.2</DIV></DIV></DIV>
<DIV class=subItem><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>doc 3</DIV>
<DIV class=subItem><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>doc 4</DIV></DIV><!-- for docsSub-->
<DIV class=topFolder id=links><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>Links</DIV>
<DIV class=sub id=linksSub>
<DIV class=subItem href="#nogo"><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>InsideDHTML</DIV>
<DIV class=subItem href="#nogo"><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>The Dynamic Duo</DIV>
<DIV class=subItem href="#nogo"><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>WebFX</DIV></DIV>
<DIV class=topFolder id=todo style="FONT-WEIGHT: bold"><img class="icon" height="16" src="/html/txdm_2/images/20101009/csrcode.ico" width="16" style="cursor:pointer;" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/><font color=red>芯晴網(wǎng)頁特效</font></DIV>
<DIV class=sub id=todoSub style="PADDING-LEFT: 22px">
<DIV>www.CsrCode.cn</DIV></DIV>
<DIV class=topItem><p align="center">折疊菜單</p>
</DIV></DIV>
</body>
</html>

    本站是提供個人知識管理的網(wǎng)絡存儲空間，所有內容均由用戶發(fā)布，不代表本站觀點。請注意甄別內容中的聯(lián)系方式、誘導購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權內容，請點擊一鍵舉報。
    轉藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多