Help with some tree menu stuff

[aebstract]

Okay, here is a rough look of my goal:



Basically, I want these vertical tabs with a 1px border on top and bottom and a 1px space between each. This isn't a problem. I am using a javascript to show/hide divs so that I can make a "tree-like" menu navigation. I can do that with:

function ShowHide(elementId)
{
	var element = document.getElementById(elementId);
	if(element.style.display != "block")
	{
		element.style.display = "block";
	}
	else
	{
		element.style.display = "none";
	}
}
function UpdateText(element)
{
	if(element.innerHTML.indexOf("Show") != -1)
	{
		element.innerHTML = "Hide Details";
	}
	else
	{
		element.innerHTML = "Show Details";
	}
}

and:

<a href="javascript: void(0);" onclick="ShowHide('equipment');"

Right now my main problem is that I need it so that whatever main tab category I click, it should change the background of that tab to the darker color (seen in the image above). I also need a way so that if I open another tab's list, it closes the other. Also it should take the 1px space away from the current and possible the tab below the current. Any information/help you guys can provide would be killer. I'm gonna keep playing around and see what I can figure out but hopefully someone here can help me quicker

[Jesdisciple]

What if your page is viewed without JavaScript enabled? Does the menu still work at all? I think each top-level link should point to something like a sitemap of that section. This would be most easily accomplished with a tree structure of your pages in PHP; this structure could serve double-duty as the menu generator to keep them consistent with each other.

The menu itself could probably be managed (mostly) with CSS, as well. Particularly, the background color could be specified as a CSS class which is only applied to the currently selected node. JS would be required for adding and removing this class.

The same CSS class could be used to determine which node's children are displayed.

I don't know what you mean about the 1px space.

[aebstract]

What do you mean by point to a sitemap of the section? A generated list of what goes in each category? That isn't much of a problem, but what makes the menus expand out when you click on the top level? I tried my current code without javascript enabled and it's a no-go, so I definitely need to look at a new method that will work. Just confused as to all the javascript parts, I'm completely stupid at javascript.

[Jesdisciple]

I'm assuming that you know your way around CSS; if you don't I can point to some resources. However, I'm about to leave for around three or four hours.

Yeah, the list could be generated on the same page for all the links, with a different path as a GET argument. That page could use the same script as the menu.

Use a default CSS class with display: none; for the children, then another class (I'll call it "active") with display: block; and your background color. When a category is clicked:

• Get the old "active" element from wherever it is.
• Split that element's class property around spaces, remove "active," join the classes with spaces again, and assign the result back to the class property. (This could be done with a RegExp instead, but this is easier to implement and maintain.)
• Add " active" (with a leading space) to the selected element's class property.
• Set the selected element as the "active" element to inform the next selection.

As far as I know, the major browsers will render the page according to the given CSS - but you shouldn't just assume they do. The same thing can be done with JavaScript, but CSS is faster and (I think) more portable.

[aebstract]

How are you adding/changing anything in the classes on click without javascript?

[Jesdisciple]

? I'm suggesting that you do use JS to modify the classes of the elements. This doesn't make the page unusable for JS-disabled users because the categories will have href attributes which send them to the mini-sitemaps. Each category's onclick listener should return false so JS-enabled users don't see the mini-sitemaps.

[aebstract]

Could you show me a small example of how the javascript would work? I know you're gonna be gone awhile, so I'll look around and see if I can get something together working but if you do get back and can that would be great.

[Jesdisciple]

Short-circuit operators ( || and && ) work with everything just like with Boolean values.

default || alternative
standard || non-standard

In this case (the start of the function), we're working around some anti-standard IE behaviors. That is, IE implements some property names they made up instead of the standard names.

Functions used here... (Thanks for helping me improve the wiki, by the way.)
String.split()
Array.indexOf()
Array.splice()
Array.join()

Also, I want to see your final JavaScript so I can comment... I didn't follow all the best practices in my code, partly because I don't want to give a full implementation and partly because I lack some information.

var active;

function onClick(event){
	event = event || window.event;
	// We're not using 'this' because it's not available in IE's attachEvent event-registration model.  We're not using attachEvent, but compatibility is a good thing.
	var that = event.target || event.srcElement;
	
	// Get all the classes of this element.
	var classes = window.active.class.split(' ');
	
	// What's the index of the one we're interested in?
	var index = classes.indexOf('active');
	
	// Remove one element from that position.
	classes = classes.splice(index, 1);
	
	// Put them back together.
	window.active.class = classes.join(' ');
	
	that.class += ' active';
	
	window.active = that;
}

if (!Array.prototype.indexOf){
	Array.prototype.indexOf = function(elt /*, from*/){
		var len = this.length >>> 0;

		var from = Number(arguments[1]) || 0;
		from = (from < 0)//>
			? Math.ceil(from)
			: Math.floor(from);
		if (from < 0)//>
			from += len;

		for (; from < len; from++){//>
			if (from in this && this[from] === elt)
				return from;
		}
		return -1;
	};
}

[aebstract]

What is this suppose to change the class of? I assume I need to do something like this:

	var classes = window.active.class.split('active, inactive');

Or leave it blank? Also should this be left blank?

	window.active.class = classes.join(' ');

I think if I can figure out how to control the class of the active 'index' then I can get this working. The only thing is that I am still making my list the same way, by changing a div's display to block when the link is clicked, so javascript still has to be enabled.

[vwphillips]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<style type="text/css">
/*<![CDATA[*/
.item {
  width:100px;height:20px;background-Color:#FFFFCC;
}

.active {
  background-Color:#FFCC66;
}

.content {
  display:none;width:100px;height:200px;background-Color:#CCFFFF;
}

/*]]>*/
</style>
<script  type="text/javascript">
/*<![CDATA[*/

function Toggle(i,c){
 c=document.getElementById(c);
 c.style.display=zxcSV(c,'display')=='none'?'block':'none';
 i.className=(zxcSV(c,'display')=='none')?i.className.replace(' active',''):i.className+' active';
}

function zxcSV(obj,par){
 if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
 return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}


/*]]>*/
</script>
<title></title>
</head>

<body>
<div class="item" onclick="Toggle(this,'c1');"></div>
<div id="c1" class="content" ></div>

</body>

</html>