Looking for Menu Script - Vertical

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?

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

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.

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.

Code:

---

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:

Code:

---

<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>

---

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

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

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.