Hi,
I have found this great script a contracing/expanding Xpmenu at
http://www.jswitch.com but I would like some changes to it. Unfortunatley my javascripting and CSS knowledge is very limited therefore I´m asking the kind people here at Webmaster-Talk.
There are 3 difficulties that I need help with.
1. To be able to have a plus/minus icon at the right of the header that expand/contract the submenus. Only the icon should be able to expand/contract the menus.
2. When I press the header (which has a backgroundimage) I would like it to have an ordinare a:active status (the background pic changes to another one) when i press the header only (not the plus/minus icon)
but since the javascript is overriding this function Im not sure how to do it.
3. To be able to have a:active om the submenus as well. Right now I have a mouseover function that changes the color to a darker one. Ive already tried to put an a:active tag but I only get the darker color around the text and not the whole block.
I only need this to work in IE 6/7.
I hope this is possible to do?
Best Regards
Anders
Heres the code:
HTML
-------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Collapsible menu</title>
<link href="xpMenu_test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="menycontainer">
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv">
<div class="topItem">Header 1 </div>
<div class="dropMenu">
<div class="subMenu">
<span class="subItem"><a href="#">Sub 1-1</a></span><br>
<span class="subItem"><a href="#">Sub 1-2</a></span><br>
</div>
</div>
</div>
<div class="mainDiv">
<div class="topItem">Header 2</div>
<div class="dropMenu">
<div class="subMenu">
<span class="subItem"><a href="#">Sub 2-1</a></span><br>
<span class="subItem"><a href="#">Sub 2-2</a></span><br>
</div>
</div>
</div>
<script type="text/javascript" src="xpMenu.js"></script>
</div>
</body>
</html>
-------------------------------------------
/* The CSS */
.menycontainer {float:left; width:212px; height:500px; margin-right:0px; }
.topItem {
PADDING-LEFT: 8px;
padding-top: 4px;
FONT-WEIGHT: bold;
CURSOR: hand;
COLOR: #133354;
FONT-FAMILY: Arial;
HEIGHT: 26px;
TEXT-DECORATION: none;
font-size: 12px;
background-image: url(sdmenu/header_over.gif);
background-repeat: repeat-x;
border-top: #799ace 1px solid;
border-left: #799ace 1px solid;
border-right: 1px solid #799ace;
}
.topItemOver {
PADDING-LEFT: 8px;
padding-top: 4px;
FONT-WEIGHT: bold;
background-image: url(sdmenu/header.gif);
background-repeat: repeat-x;
CURSOR: hand;
COLOR: #133354;
FONT-FAMILY: Arial;
HEIGHT: 26px;
TEXT-DECORATION: none;
font-size: 12px;
border-top: #799ace 1px solid;
border-left: #799ace 1px solid;
border-right: #799ace 1px solid;
}
.dropMenu {
BORDER-TOP: #799ace 1px solid; BACKGROUND: #ffffff; FILTER: alpha(opacity=100);
}
.subMenu {DISPLAY: block;}
.subItem {
width:100%;
PADDING-LEFT: 9px;
FONT-WEIGHT: normal;
CURSOR: hand;
COLOR: #000000;
HEIGHT: 22px;
TEXT-DECORATION: none;
font-family: Arial;
font-size: 12px;
background-color: #fff;
padding-top: 3px;
border-bottom: 1px solid #c0d0e8;
}
.subItem a {background-color: #fff;width:100%;COLOR: #000000;TEXT-DECORATION: none;}
.subItemOver {background-color: #f2f5fa;width:100%;font-family: Arial;font-size: 12px; PADDING-LEFT: 9px; padding-top: 3px; FONT-WEIGHT: normal; CURSOR: hand; HEIGHT: 22px; border-bottom: 1px solid #c0d0e8;}
.subItemOver a {width:100%; COLOR: #000000; TEXT-DECORATION: none}
.drop {
BORDER-RIGHT: black 1px solid; BORDER-LEFT: black 1px solid
}
-------------------------------------------
Javascript
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 = 1;
var divHeight = 25;
var moveSlidePix = 20;
var isLocked = false;
var doFading = false;
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_test.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).clas sName);
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";
}
Heres also a .zip with all 3 docs.
