Javascript/CSS menu help?

Advert test
#1
I've downloaded the code for a javascript/css menu and placed it into a new site I'm developing. However, I need it to function differently to how it does 'out of the box'.

At the moment when you click on any link, the submenu appears below it. And when you click it again, it disappears. However, if you don't 'close' the submenu it will remain open when you click on another link. So the menu will grow very large if the user doesn't close submenus before going to another.

Does anyone know if the code can be modified to make all other submenus close if a new one is clicked open.

The code is below...

Javascript:
Code:
menu_status = new Array();
function showHide(theid){
    if (document.getElementById) {
    var switch_id = document.getElementById(theid);

        if(menu_status[theid] != 'show') {
           switch_id.className = 'show';
           menu_status[theid] = 'show';
        }else{
           switch_id.className = 'hide';
           menu_status[theid] = 'hide';
        }
    }
}
CSS:
Code:
.menu1 {
    display: block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.2em;
    font-variant: small-caps;
    color: #000000;
    }
a.menu1 {
    background-color: #fe9d20;
    height: 18px;
    margin: 0;
    padding: 2px 10px;
    text-decoration: none;
    border-bottom: 1px solid #ffffff;
    cursor: pointer;
    cursor: hand;
    }
a:hover.menu1 {
    background-color: #dddddd;
    }
.submenu {
    display: block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.2em;
    font-variant: small-caps;
    color: #000000;
    }
a.submenu {
    background-color: #ffb874;
    height: 18px;
    margin: 0;
    padding: 2px 15px;
    text-decoration: none;
    border-bottom: 1px solid #ffffff;
    cursor: pointer;
    cursor: hand;
    }
a:hover.submenu {
    background-color: #dddddd;
    }
.hide {
    display: none;
    }
.show {
    display: block;
    }
HTML:
Code:
<a class="menu1" onclick="showHide('menu1')">home</a>
            <div id="menu1" class="hide">
                <a href="#" class="submenu">link one here</a>
            </div>
        <a class="menu1" onclick="showHide('menu2')">expertise</a>
            <div id="menu2" class="hide">
                <a href="#" class="submenu">staff one</a>
                <a href="#" class="submenu">staff two</a>
                <a href="#" class="submenu">staff three</a>
            </div>
        <a class="menu1" onclick="showHide('menu3')">services</a>
            <div id="menu3" class="hide">
                <a href="#" class="submenu">services one</a>
                <a href="#" class="submenu">services two</a>
                <a href="#" class="submenu">services three</a>
                <a href="#" class="submenu">services four</a>
            </div>
        <a class="menu1" onclick="showHide('menu4')">projects</a>
            <div id="menu4" class="hide">
                <a href="#" class="submenu">project one</a>
                <a href="#" class="submenu">project two</a>
                <a href="#" class="submenu">project three</a>
                <a href="#" class="submenu">project four</a>
                <a href="#" class="submenu">project five</a>
            </div>
        <a class="menu1" onclick="showHide('menu5')">contact</a>
            <div id="menu5" class="hide">
                <a href="#" class="submenu">Link One here</a>
            </div>
Any help much appreciated :)
 
#3
Hey louie, thanks for the pointer, but I actually need the submenu that the user clicks to stay open while they browse the current page (as it does now) but any other open submenus to close, if you follow.

Any ideas?
 
Top