Javascript/CSS menu help?

ButtermilkJack · #1 (**permalink**) 15-04-2006, 12:40 PM

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

louie · #2 (**permalink**) 15-04-2006, 05:23 PM

you need to look into something with onmouseover and onmouseout.

check this out:

http://www.milonic.com/download.php?sampleid=2

ButtermilkJack · #3 (**permalink**) 15-04-2006, 09:27 PM

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?

louie · #4 (**permalink**) 15-04-2006, 09:53 PM

Quote:

Originally Posted by ButtermilkJack

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?

you can do this by using request.querystring (ASP) or $_REQUEST (PHP)

take a look at this - http://www.eire-webdesign.ie/templat...t.asp?pageid=2

no Javascript involved.

ButtermilkJack · #5 (**permalink**) 16-04-2006, 05:59 PM

I just found this. 'Single branch opening' was what I was looking for apparantly

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode