What is this style of menu called?

[PHPJack77]

I need to build a menu that is similar to the one at http://www.nvidia.com/content/drivers/drivers.asp (Not the main navigation at the top, I'm talking about the boxes in the center of the page) but I don't know how, and I can't find any info on it because I don't know this type of menu it is... ie: Drop Down.Thanks for the help

[Little Goat]

so you want the content in the second box to be different depending on what was chosen before?that takes Javascript, so you need to know that first. then you would use the onchange event to update the second box when you change the first one. you could probably hide the ones you don't want by using document.path.to.option.tag.display="none"/"block"/"inline"

[Jack McKalling]

I don't know of any name for this sort like menu. It is not only uncommonly used, it is most of the time also only used by the more advanced websites such as those of existing software (Microsoft, NVidia).So I can't personally give a name for you to search for, maybe someone else. But it shouldn't be hard to code :)Some sites hide the later selectboxes untill (one of) the previous box' options are selected.

[dcole.ath.cx]

horizontal drop down menu?

[Jack McKalling]

I don't think so, something with sized selext boxes

[PHPJack77]

Cool. Thanks for the help! My best guess for this type of menu was a "sideways pop menu"

[justsomeguy]

That's just a series of dynamic select boxes, I don't think it has a pretty name. If you check out the source on the page, you will see a whole mess of javascript. Littlegoat has the right idea, but hiding the options isn't enough. You don't want to hide them, because they are still options. You want to actually remove all of the options, and then add new ones (and set the selectedindex back to -1 or another nonsense value). Here is the actual function they use on that page to do it, and I'll paste it again below without formatting, but I'll bold some of the parts where they remove and add options.

function PopulatePane(currentPane, paneToPopulate) {	var selectedArray, i;	var selected = currentPane.options[currentPane.selectedIndex].value	if (selected == 0) {		// yeah, we should be able to just do the select set and index decrement no matter what,		// and then check for selected being undefined, but browser bugs make life more "fun" than that		if (currentPane.selectedIndex != 0)			selected = currentPane.options[--currentPane.selectedIndex].value;		else {			currentPane.selectedIndex = -1;			return false;		}	}	//	 try {//		eval(paneToPopulate + selected);//	} catch(e) {//		alert("There is no " + paneToPopulate + " associated with this " + currentPane.name);//		return;//	}			selectedArray = eval(paneToPopulate + selected);	paneToPopulate = eval("currentPane.form." + paneToPopulate)	// if we need to clear panes, we'll start clearing out options with the last pane and work back until we run out	for (i = currentPane.form.elements.length - 1; i > 0; i--) {		paneToClear = paneToPopulate.form.elements[i]		if (paneToClear == paneToPopulate) {			break;		}		// make sure we're only doing the clearing operation on panes we care about		if (paneToClear.name == "OperatingSystem" || paneToClear.name == "SubCategory" || paneToClear.name == "MainCategory") {			for (i = paneToClear.options.length; i != 0; i--) {				paneToClear.options[i - 1] = null;			}		}	}	while (selectedArray.length < paneToPopulate.options.length) {		paneToPopulate.options[(paneToPopulate.options.length - 1)] = null;	}	for (i = 0; i < selectedArray.length; i++) {//		alert("paneToPopulate.options[i] = new Option('" + selectedArray[i].Name + "')");		if ( selectedArray[i] == null || selectedArray[i] == "" ) {			alert("There is no " + paneToPopulate.Name + " associated with this " + currentPane.Name);		} else {			eval("paneToPopulate.options[i] = new Option('" + selectedArray[i].Name + "')");			eval("paneToPopulate.options[i].value = '" + selectedArray[i].ID + "'");		}	}	if (document.welcome.OperatingSystem.options[0] == null) {		document.welcome.OperatingSystem.options[0] = new Option("[Step 3]							 ");		document.welcome.OperatingSystem.options[0].value = 0;	}}

function PopulatePane(currentPane, paneToPopulate) { var selectedArray, i; var selected = currentPane.options[currentPane.selectedIndex].value if (selected == 0) { // yeah, we should be able to just do the select set and index decrement no matter what, // and then check for selected being undefined, but browser bugs make life more "fun" than that if (currentPane.selectedIndex != 0) selected = currentPane.options[--currentPane.selectedIndex].value; else { currentPane.selectedIndex = -1; return false; } } // try {// eval(paneToPopulate + selected);// } catch(e) {// alert("There is no " + paneToPopulate + " associated with this " + currentPane.name);// return;// } selectedArray = eval(paneToPopulate + selected); paneToPopulate = eval("currentPane.form." + paneToPopulate) // if we need to clear panes, we'll start clearing out options with the last pane and work back until we run out for (i = currentPane.form.elements.length - 1; i > 0; i--) { paneToClear = paneToPopulate.form.elements[ i ] if (paneToClear == paneToPopulate) { break; } // make sure we're only doing the clearing operation on panes we care about if (paneToClear.name == "OperatingSystem" || paneToClear.name == "SubCategory" || paneToClear.name == "MainCategory") { for (i = paneToClear.options.length; i != 0; i--) { paneToClear.options[i - 1] = null;that loop removes all existing options by setting each one to null } } } while (selectedArray.length < paneToPopulate.options.length) { paneToPopulate.options[(paneToPopulate.options.length - 1)] = null;this does the same thing, since the above was in an if statement, this loop will execute no matter what } for (i = 0; i < selectedArray.length; i++) {// alert("paneToPopulate.options[ i ] = new Option('" + selectedArray[ i ].Name + "')"); if ( selectedArray[ i ] == null || selectedArray[ i ] == "" ) { alert("There is no " + paneToPopulate.Name + " associated with this " + currentPane.Name); } else { eval("paneToPopulate.options[ i ] = new Option('" + selectedArray[ i ].Name + "')"); eval("paneToPopulate.options[ i ].value = '" + selectedArray[ i ].ID + "'"); } }the above loop adds options back to the pane if (document.welcome.OperatingSystem.options[0] == null) { document.welcome.OperatingSystem.options[0] = new Option("[step 3] "); document.welcome.OperatingSystem.options[0].value = 0; }}

[Jack McKalling]

Here you have got a menu that levels your idea It uses selectboxes, and disables the sub ones untill an option was chosen. Go have a look http://www.dynamicdrive.com/dynamicindex1/...dmenu/index.htm