Javascript/CSS menu help?

Discussion in 'Coding Help' started by ButtermilkJack, Apr 15, 2006.

Tags:
  1. ButtermilkJack

    ButtermilkJack New Member

    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 :)
     
  2. louie

    louie New Member

  3. ButtermilkJack

    ButtermilkJack New Member

    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?
     
  4. louie

    louie New Member

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

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

    no Javascript involved.
     
  5. ButtermilkJack

    ButtermilkJack New Member

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

Share This Page