»
EnglishFrenchVietnamese

Print - XP Menus - JavaScriptBank.com

Full version: jsB@nk » Menu » Navigation » XP Menus
URL: http://www.javascriptbank.com/xp-menus-index.html

XP Menus © JavaScriptBank.comThese 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: http://www.javascriptbank.com/xp-menus-index.html



CSS
<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-->


JavaScript
<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-->


HTML
<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-->


Files
http://javascriptbank.com/javascript/menu/XP_Menus/close.gifhttp://javascriptbank.com/javascript/menu/XP_Menus/open.gif