Looking for Menu Script - Vertical

[vlane95678]

Hi people!

We are looking for a vertical menu that when you mouseover it another vertical menu appears, with all the links/choices side-by-side. So we would like something that remains vertical the entire time.

Such as this:

Button #1 --> My Link 1 | My Link 2 | My Link 3
Button #2
Button #3 --> My Link 1 | My Link 2

All the vertical menus we found turn horizontal or 'stack' the drop-out menu items. We want them side-by-side.

Does anyone know where we can find this or what it might be called?

[bluewalrus]

at the very bottom you'll find the vertical one http://www.htmldog.com/articles/suckerfish/dropdowns/.

[vlane95678]

Thank you for the response. Most appreciated!

Acutall I was looking for the submenus to lay side-by-side like this site: http://www.buffalojeans.com/

Mouseover "home" and you will see "can" and "fr" popping out and laying side by side.

I know the menu above is flash, but I was wondering if javascript could do that.

[bluewalrus]

The slide out part? Or the background change? I have a java code that does something similiar but its on click it goes down not across but maybe some on here could modify it for you. I should really start keeping track of where i find these better.

var blue_slideSpeed = 10;	// Higher value = faster
var blue_timer = 10;	// Lower value = faster

var objectIdToSlideDown = false;
var blue_activeId = false;
var blue_slideInProgress = false;
function showHideContent(e,inputId)
{
	if(blue_slideInProgress)return;
	blue_slideInProgress = true;
	if(!inputId)inputId = this.id;
	inputId = inputId + '';
	var numericId = inputId.replace(/[^0-9]/g,'');
	var showDiv = document.getElementById('blue_a' + numericId);

	objectIdToSlideDown = false;
	
	if(!showDiv.style.display || showDiv.style.display=='none'){		
		if(blue_activeId &&  blue_activeId!=numericId){			
			objectIdToSlideDown = numericId;
			slideContent(blue_activeId,(blue_slideSpeed*-1));
		}else{
			
			showDiv.style.display='block';
			showDiv.style.visibility = 'visible';
			
			slideContent(numericId,blue_slideSpeed);
		}
	}else{
		slideContent(numericId,(blue_slideSpeed*-1));
		blue_activeId = false;
	}	
}

function slideContent(inputId,direction)
{
	
	var obj =document.getElementById('blue_a' + inputId);
	var contentObj = document.getElementById('blue_ac' + inputId);
	height = obj.clientHeight;
	if(height==0)height = obj.offsetHeight;
	height = height + direction;
	rerunFunction = true;
	if(height>contentObj.offsetHeight){
		height = contentObj.offsetHeight;
		rerunFunction = false;
	}
	if(height<=1){
		height = 1;
		rerunFunction = false;
	}

	obj.style.height = height + 'px';
	var topPos = height - contentObj.offsetHeight;
	if(topPos>0)topPos=0;
	contentObj.style.top = topPos + 'px';
	if(rerunFunction){
		setTimeout('slideContent(' + inputId + ',' + direction + ')',blue_timer);
	}else{
		if(height<=1){
			obj.style.display='none'; 
			if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
				document.getElementById('blue_a' + objectIdToSlideDown).style.display='block';
				document.getElementById('blue_a' + objectIdToSlideDown).style.visibility='visible';
				slideContent(objectIdToSlideDown,blue_slideSpeed);				
			}else{
				blue_slideInProgress = false;
			}
		}else{
			blue_activeId = inputId;
			blue_slideInProgress = false;
		}
	}
}



function initShowHideDivs()
{
	var divs = document.getElementsByTagName('DIV');
	var divCounter = 1;
	for(var no=0;no<divs.length;no++){
		if(divs[no].className=='blue_video'){
			divs[no].onclick = showHideContent;
			divs[no].id = 'blue_q'+divCounter;
			var show = divs[no].nextSibling;
			while(show && show.tagName!='DIV'){
				show = show.nextSibling;
			}
			show.id = 'blue_a'+divCounter;	
			contentDiv = show.getElementsByTagName('DIV')[0];
			contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px'; 	
			contentDiv.className='blue_show_content';
			contentDiv.id = 'blue_ac' + divCounter;
			show.style.display='none';
			show.style.height='1px';
			divCounter++;
		}		
	}	
}
window.onload = initShowHideDivs;

In HTML to reference it:

<div class="blue_video">NAME OF WHAT EVER YOU WANT TO EXPAND</div>
	<div class="blue_show">
		<div>
               WHAT EVER YOU WANT TO SHOW UP THIS OPENS ON CLICK
               </div>
        </div>

[vlane95678]

Yeah, I need the drop out menus to go across like the www.buffalojeans.com site.

[vlane95678]

Anyone have a drop out menu that lays the sub menus side-by-side????

[BLiZZaRD]

Well that was built in Flash, which makes it so you can pretty much do as you please. If you are looking for a CSS version. then check out the "Menus - Multi-Level - Flyout" tab on Stu's CSS Play site

Any of those will do, and with a little size tweaking you can make them look how ever you want.