Full version: jsB@nk » Menu » Navigation » XP Menus
URL: https://www.javascriptbank.com/xp-menus-index.html
These expanding side menus look and behave like those found in Windows XP. Great for saving space and categorizing your links.
Full version: jsB@nk » Menu » Navigation » XP Menus
URL: https://www.javascriptbank.com/xp-menus-index.html
<style type="text/css">.topItem { background: #6D929B; background-image: url(close.gif); background-position:right center; background-repeat:no-repeat; padding-left:3px; height:22px; cursor:pointer; text-decoration: none; color: #C1DAD6; font-weight:bold; font-family:"GOTHIC";}.topItemOver { padding-left:3px; background: #6D929B; background-image: url(open.gif); background-position:right center; background-repeat:no-repeat; height:22px; cursor:pointer; text-decoration: none; color: #C1DAD6; font-weight:bold; font-family:"GOTHIC";}.dropMenu { background:#B7AFA3; filter:alpha(opacity=100); border:1px solid #6D929B;}.subMenu { display:block;}.subItem { height:21px; padding-left:10px; cursor:pointer; font-weight:bold; text-decoration:none; color:#6D929B;}.subItem a { text-decoration:none; color:#6D929B;}.subItemOver { height:21px; padding-left:10px; cursor:pointer; font-weight:bold;}.subItemOver a { color:#485C5A; text-decoration:none;}.drop { border-left:1px solid black; border-right:1px solid black;}.topItem1 { background: #3366CC; background-image: url(close.gif); background-position:right center; background-repeat:no-repeat; padding-left:3px; height:22px; cursor:pointer; text-decoration: none; color: #FFFFFF; font-weight:bold; font-family:"GOTHIC";}.topItem1Over { padding-left:3px; background: #3366CC; background-image: url(open.gif); background-position:right center; background-repeat:no-repeat; height:22px; cursor:pointer; text-decoration: none; color: #FFFFFF; font-weight:bold; font-family:"GOTHIC";}.dropMenu1 { background:#6699FF; filter:alpha(opacity=100); border:1px solid #3366CC;}.subMenu1 { display:block;}.subItem1 { height:21px; padding-left:10px; cursor:pointer; font-weight:bold; text-decoration:none; color:#FFFFFF;}.subItem1 a { text-decoration:none; color:#FFFFFF;}.subItem1Over { height:21px; padding-left:10px; cursor:pointer; font-weight:bold;}.subItem1Over a { color:#003399; text-decoration:none;}.topItem2 { background: #84596B; background-image: url(close.gif); background-position:right center; background-repeat:no-repeat; padding-left:3px; height:22px; cursor:pointer; text-decoration: none; color: #FFFFFF; font-weight:bold; font-family:"GOTHIC";}.topItem2Over { padding-left:3px; background: #84596B; background-image: url(open.gif); background-position:right center; background-repeat:no-repeat; height:22px; cursor:pointer; text-decoration: none; color: #FFFFFF; font-weight:bold; font-family:"GOTHIC";}.dropMenu2 { background:#B58AA5; filter:alpha(opacity=100); border:1px solid #84596B;}.subMenu2 { display:block;}.subItem2 { height:21px; padding-left:10px; cursor:pointer; font-weight:bold; text-decoration:none; color:#CECFCE;}.subItem2 a { text-decoration:none; color:#CECFCE;}.subItem2Over { height:21px; padding-left:10px; cursor:pointer; font-weight:bold;}.subItem2Over a { color:#FFFFFF; text-decoration:none;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript">// Created by: Eric Simmons :: http://www.jswitch.com/************************************************************************Author: Eric SimmonsContact: info AT jswitch DOT comWebsite: http://www.jswitch.comVersion: 2.0 12/2005DISCLAIMER: THIS SOFTWARE IS PROVIDED "AS IS" AND WITHOUT ANY EXPRESSOR IMPLIED WARRANTIES, JSWITCH.COM IS NOT RESPONSIBLE FOR ANY ADVERSEAFFECTS TO YOUR COMPUTER OR SYSTEMS RUNNING THIS SCRIPT.LICENSE: YOU ARE GRANTED THE RIGHT TO USE THE SCRIPT PERSONALLY ORCOMMERCIALLY. THE AUTHOR, WEBSITE LINKS AND LICENSE INFORMATION IN THEHEADER OF THIS SCRIPT MUST NOT BE MODIFIED OR REMOVED. IF PORTIONS OFTHE CODE ARE TRANSFERED TO ANOTHER SCRIPT THE AUTHORS NAME AND CONTACTINFORMATION MUST BE STATED IN THE NEW SCRIPT BY THE PORTIONS CODE THATHAVE BEEN TRANSFERED.Notes:If you want a menu to be open initially set the style display to"inline" in the subMenu class div like this:<div class="subMenu" style="display:inline;">The fading effect can be disabled by setting the doFading var tofalse.***********************************************************************/var menuObjArray = new Array();menuObjArray[0] = new Array();menuObjArray[1] = new Array();menuObjArray[2] = new Array();menuObjArray[3] = new Array();menuObjArray[4] = new Array();menuObjArray[5] = new Array();menuObjArray[6] = new Array();menuObjArray[7] = new Array();var timerSlide = null;var numMenuItem = 0;var slideDelay = 15;var divHeight = 21;var moveSlidePix = 5;var isLocked = false;var doFading = true;InitAll();function InitAll() { var divs = document.getElementsByTagName("DIV"); menuStateAry = GetUserCookie("xpMenuCookv2").split(","); aryNum = 0; for(dn=0; dn < divs.length;dn++) { if(String(divs.item(dn).className).substring(0,7) == "topItem") { mainMenuDiv = divs.item(dn).parentNode; menuContainerDiv= mainMenuDiv.getElementsByTagName("DIV").item(1); itemContainerDiv= menuContainerDiv.getElementsByTagName("DIV").item(0); if(menuStateAry != 0) itemContainerDiv.style.height = parseInt(menuStateAry[aryNum]) + "px"; if(!doFading) { if (menuContainerDiv.filters) menuContainerDiv.filters.alpha.opacity = 100; else menuContainerDiv.opacity = 1; } if(menuStateAry != 0 ) { if( parseInt(menuStateAry[aryNum]) == 0) itemContainerDiv.style.display = 'none'; else itemContainerDiv.style.display = 'inline'; } Init(divs.item(dn)); aryNum++; } }}function Init(objDiv) { if (isLocked) return; var mainMenuDiv, subMenuDiv, menuContainerDiv, itemContainerDiv,styleRules; for(r=0;r < document.styleSheets.length; r++) { if( -1 != String(document.styleSheets[r].href).indexOf("xpMenu.css") ) break; } if(!document.styleSheets[r].rules) styleRules = document.styleSheets[r].cssRules; else styleRules = document.styleSheets[r].rules; numMenuItem = 0; mainMenuDiv = objDiv.parentNode; subMenuDiv = mainMenuDiv.getElementsByTagName("DIV").item(0); menuContainerDiv= mainMenuDiv.getElementsByTagName("DIV").item(1); itemContainerDiv= menuContainerDiv.getElementsByTagName("DIV").item(0); aLen = menuObjArray[0].length; for (i=0 ;i < aLen ; i++) { if (menuObjArray[0][i] == menuContainerDiv) { break; } } if (i == aLen) { menuObjArray[0][i] = menuContainerDiv; menuObjArray[1][i] = itemContainerDiv; menuObjArray[7][i] = subMenuDiv; subMenuDiv.onclick = SetSlide; lastmenuNum = -1; for (b=0;b<itemContainerDiv.childNodes.length;b++) { if (itemContainerDiv.childNodes.item(b).tagName == "SPAN") { numMenuItem ++; itemContainerDiv.childNodes.item(b).onmouseover= ChangeStyle; itemContainerDiv.childNodes.item(b).onmouseout= ChangeStyle; lastmenuNum = b; } } for(r=0;r < styleRules.length; r++) { tmpStr1 = String(styleRules[r].selectorText); tmpStr2 = String("." + itemContainerDiv.childNodes.item(lastmenuNum).className); if(tmpStr1 == tmpStr2) { if(NaN != parseInt(styleRules[r].style.height)) { divHeight = parseInt(styleRules[r].style.height); break; } } } menuObjArray[2][i] = numMenuItem; menuObjArray[3][i] = mainMenuDiv; if (itemContainerDiv.style.display == "inline") { menuObjArray[4][i] = numMenuItem * divHeight; menuObjArray[0][i].style.height = numMenuItem * divHeight + "px"; menuObjArray[6][i] = true; if(doFading) { if (menuObjArray[0][i].filters) menuObjArray[0][i].filters.alpha.opacity = 100; else menuObjArray[0][i].style.opacity = 1; } } else { menuObjArray[7][i].className = menuObjArray[7][i].className+"Over"; menuObjArray[4][i] = 0; menuObjArray[0][i].style.height = 0 + "px"; menuObjArray[6][i] = false; if(doFading) { if (menuObjArray[0][i].filters) menuObjArray[0][i].filters.alpha.opacity = 0; else menuObjArray[0][i].style.opacity = .0; } } }//end if mainMenuDiv = null; subMenuDiv = null; menuContainerDiv= null; itemContainerDiv= null;}function SetSlide() { if (isLocked) return; else isLocked = true; for (i=0 ;i < menuObjArray[0].length; i++) { if (menuObjArray[3][i] == this.parentNode) { if (menuObjArray[5][i] == null) menuObjArray[5][i] = setInterval("RunSlide(" + i + ")", slideDelay); break; } }}function UpdateUserCookie(aryIndex) { date = new Date(); date.setTime(date.getTime() + (1000 * 60 * 60 * 24 * 30)); document.cookie = "xpMenuCookv2" + "=" + escape(menuObjArray[4].toString()) + "; expires=" + date.toGMTString();}function GetUserCookie(crumbName) { colCookie = document.cookie.split("; "); for (a=0; a < colCookie.length; a++) { colCrumb = colCookie[a].split("="); if(colCrumb[0] == crumbName) return unescape(colCrumb[1]); } return "";}function RunSlide(objIndex) { if (menuObjArray[6][objIndex]) { if(doFading) { if(menuObjArray[0][objIndex].filters) menuObjArray[0][objIndex].filters.alpha.opacity -= 100/ ( ( (menuObjArray[2][i] * divHeight) / moveSlidePix) +1); else menuObjArray[0][objIndex].style.opacity -= .9/(((menuObjArray[2][i] * divHeight) / moveSlidePix)+1); } menuObjArray[1][objIndex].style.display = 'none'; menuObjArray[4][objIndex] -= moveSlidePix; if (menuObjArray[4][objIndex] > 0) menuObjArray[0][objIndex].style.height = menuObjArray[4][i] + "px"; else { if(doFading) { if(menuObjArray[0][objIndex].filters) menuObjArray[0][objIndex].filters.alpha.opacity = 0; else menuObjArray[0][objIndex].style.opacity = 0; } menuObjArray[7][objIndex].className = menuObjArray[7][objIndex].className+"Over"; menuObjArray[4][objIndex] = 0; menuObjArray[0][objIndex].style.height = 0 + "px"; clearInterval(menuObjArray[5][objIndex]); menuObjArray[5][objIndex] = null; menuObjArray[6][objIndex] = false; isLocked = false; UpdateUserCookie(objIndex); return 0; } return 0; } if (!menuObjArray[6][objIndex]) { if(doFading) { if(menuObjArray[0][objIndex].filters) menuObjArray[0][objIndex].filters.alpha.opacity += 100/ ( ( (menuObjArray[2][i] * divHeight) / moveSlidePix) +1); else { opcVal = parseFloat(menuObjArray[0][objIndex].style.opacity); opcVal += .9/((menuObjArray[2][i] * divHeight) / moveSlidePix); menuObjArray[0][objIndex].style.opacity = opcVal; } } menuObjArray[4][objIndex] += moveSlidePix; if (menuObjArray[4][objIndex] < (menuObjArray[2][objIndex] * divHeight)) menuObjArray[0][objIndex].style.height = menuObjArray[4][i] + "px"; else { if(doFading) { if(menuObjArray[0][objIndex].filters) menuObjArray[0][objIndex].filters.alpha.opacity = 100; else menuObjArray[0][objIndex].style.opacity = 1; } strClassName = String(menuObjArray[7][objIndex].className); menuObjArray[7][objIndex].className = strClassName.substring(0,strClassName.length - 4); menuObjArray[4][objIndex] = (menuObjArray[2][objIndex] * divHeight); menuObjArray[0][objIndex].style.height = (menuObjArray[2][objIndex] * divHeight)+ "px"; menuObjArray[1][objIndex].style.display = 'inline'; clearInterval(menuObjArray[5][objIndex]); menuObjArray[5][objIndex] = null; menuObjArray[6][objIndex] = true; isLocked = false; UpdateUserCookie(objIndex); return 0; } return 0; }}function ChangeStyle() { className = String(this.className); if (className.substring(className.length - 4, className.length) == "Over") this.className = className.substring(0,className.length - 4); else this.className = this.className + "Over";}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div style="float:left;width:140px;height:500px;margin-right:10px;" ><!-- *********************************Start Menu****************************** --><div class="mainDiv"><div class="topItem1">Demo Menu 1</div><div class="dropMenu1"> <div class="subMenu1" style="display:inline;"> <span class="subItem1"><a href="#">Sub Menu 1</a></span><br> <span class="subItem1"><a href="#">Sub Menu 2</a></span><br> <span class="subItem1"><a href="#">Sub Menu 3</a></span><br> <span class="subItem1"><a href="#">Sub Menu 4</a></span><br> <span class="subItem1"><a href="#">Sub Menu 5</a></span><br> </div></div></div><!-- *********************************End Menu****************************** --><br><!-- *********************************Start Menu****************************** --><div class="mainDiv"><div class="topItem">Demo Menu 2</div><div class="dropMenu" style="height:0px;filter:alpha(opacity=0);opacity:0"> <div class="subMenu" style="display:none;"> <span class="subItem"><a href="#">Sub Menu 1</a></span><br> <span class="subItem"><a href="#">Sub Menu 2</a></span><br> <span class="subItem"><a href="#">Sub Menu 3</a></span><br> <span class="subItem"><a href="#">Sub Menu 4</a></span><br> </div></div></div><!-- *********************************End Menu****************************** --><br><!-- *********************************Start Menu****************************** --><div class="mainDiv"><div class="topItem2">Demo Menu 3</div><div class="dropMenu2"style=""> <div class="subMenu2" style="display:inline;"> <span class="subItem2"><a href="#">Sub Menu 1</a></span><br> <span class="subItem2"><a href="#">Sub Menu 2</a></span><br> <span class="subItem2"><a href="#">Sub Menu 3</a></span><br> <span class="subItem2"><a href="#">Sub Menu 4</a></span><br> </div></div></div><!-- *********************************End Menu****************************** --></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/menu/XP_Menus/close.gifhttp://javascriptbank.com/javascript/menu/XP_Menus/open.gif