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 (http://www.cssplay.co.uk/menus/)

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