Display menu without onlick function

This site is best viewed in a modern browser with JavaScript enabled.

Frogger88

Hi,

Thanks for reading this. I am working on some menu code using javascript and CSS. Rather than using the onclick function for some pages I would like to automatically just display the subMenus. I have looked everywhere and cant find a function to replace this. Eg. If I am on the ABOUT US page I want the submenu to be displayed. However while I am on the ABOUT US page and I click on the SHOWCASE page I would like to the submenu to be displayed over the top.

I hope I am making sense and thanks for your help.

HTML

<li onclick='showSubMenu("sm_item1")'>  

ABOUT US
<ul class="subMenus" id="sm_item1" > 
<li><a href="landscape.htm" class="menulinkoff">LANDSCAPE</a></li> 
<li><a href="swimming.htm" class="menulinkoff">SWIMMING</a></li>
</ul> 
</li> 


<li onclick='showSubMenu("sm_item2")'>  

SHOWCASE 
<ul class="subMenus" id="sm_item2"> 
<li><a href="residential.htm">RESIDENTIAL</a></li>
<li><a href="designs">DEESIGN</a></li>
<li><a href="commercial.htm">COMMERCIAL</a></li>
</ul> 
</li>

JAVASCRIPT

window.onload=function() { 
 subMenusO = getElementsByClassName(document,'ul','subMenus'); 
} 
//----------------------------------------------------------- 

function showSubMenu(elemId) { 
 var dispStatus = (document.getElementById(elemId).style.display == 'block')? 'none' : 'block'; 
 //hide any visible submenus 
 for(var i=0; i < subMenusO.length; i=i+1) { 
     subMenusO[i].style.display = 'none'; 
    } 
    //show/hide this menu id 
    document.getElementById(elemId).style.display = dispStatus; 
} 
//-------------------------------------------------------------------------- 

function getElementsByClassName(oElm, strTagName, strClassName){ 
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName); 
    var arrReturnElements = new Array(); 
    strClassName = strClassName.replace(/\-/g, "\\-"); 
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)"); 
    var oElement; 
    for(var i=0; i<arrElements.length; i++) 
    { 
        oElement = arrElements[i]; 
        if(oRegExp.test(oElement.className)) 
        { 
            arrReturnElements.push(oElement); 
        } 
    } 
    return (arrReturnElements) 
}

Padonak

live demo

source (.zip)

JMRKER

Padonak;1309891 wrote:
live demo

source (.zip)

Bad links? Source timed out. (???)

Padonak

don't know, for me everything works good

Frogger88

Padonak;1309891 wrote:
live demo

source (.zip)

Hi Padonak

Thanks for your code. I can see how having the menu in the JS can be useful. I am not very experienced with JS hence why my menu is in CSS. Maybe if you can have a look at the website which is http://www.b4ugolive.com/space/jobs.htm

you can comment on the code I have. When this page loads I would like the submenu under showcase to be showing. It is just for this page and not all the other pages so I am looking to replace the

[B]<li onclick='showSubMenu("sm_item2")'>[/B]

with something instead of onclick. Any ideas?

Padonak

if you want it only for that page you can just use this script in the head section:

window.onload=function(){
var loc=location.href;
if(loc.substring(loc.lastIndexOf('/')+1,loc.indexOf('.htm'))=='jobs'){
showSubMenu('sm_item2');
}
}

Frogger88

Hi Padonak,

Thanks for the code. Unfortunately that didn't work. I can see what you are trying to do.
If we can't work it out I make just have to hard code a different menu for those pages unless you have another idea.

I was hoping I could put some sort of value on the page and if the javascript reconised the value the the menu would be on rather that onlick.

Padonak

may be you have another window.onload somewhere in your linked scripts. in this case the new window.onload overrides those functions and it causes errors. try this one:

/* 
// this way you can see what has window.onload
alert(window.onload.toString()); 
*/ 
var old=window.onload;
window.onload=function(){
old();
var loc=location.href;
if(loc.substring(loc.lastIndexOf('/')+1,loc.indexOf('.htm'))=='jobs'){
showSubMenu('sm_item2');
}
}

Frogger88

Hi Padonak,

Perfect. Your a super star. Thank you for your help.

Padonak

lol, thanks and you're welcome ) but i'm just a plumber, not a star