How To Make Expanding Navigation Menus 1

[ro88o]

Hi,

I'm interested in making an expanding navigation menu where the user clicks a link and then sub-links appear below it without a new page having to be loaded. An example of what I am looking for can be found on the left hand side of

http://www.computerorbit.com

How do I do this in Javascript (or what's the easiest way to acheive it) ?

TIA, ro88o

 

[checkai]

there site looks like they just created a bunch of div's to hold there menu items, and then called a simple toggle javascript function...

"...we both know I'm training to become a cagefighter...see what happens if you try 'n hit me..."

 

[ro88o]

How wud I make a javascript toggle ? My knowledge of javascript is poor but I have a good programming background so can understand most things.

TIA, ro88o

 

[dmunson]

Here is a really simple example. Has no formatting but will give you an idea of how to do it.

<script language="javascript">
function HideShowSubmenu(el){
		var submenu = el.nextSibling.nextSibling;
		if (submenu.currentStyle.visibility == "hidden"){
			el.innerText="-";
			submenu.style.visibility="";}
		else{
			el.innerText="+";
			submenu.style.visibility="hidden";}
}
</script>
<div id="menu1" name="menu1">
	<span style="CURSOR: hand" onclick="HideShowSubmenu(this)" id="togglelink1" name="togglelink1">+</span> 
     Menu Item 1
	<div id="submenu1" name="submenu1" style="PADDING-LEFT:30px; VISIBILITY:hidden; POSITION:relative">
		Link1<br>
		Link2<br>
		Link3<br>
		Link4<br>
	</div>
</div>

 

[ro88o]

Oops handed out my stars too quickly - tried this and works brilliantly in IE, no luck in FF though.

Anyone know why ? Or how to do it differently ?

TIA, ro88o

 

[GUJUm0deL]

Take a look at this faq216-5923 to see if its what you want.

This works on IE, NS and FF.



[sub]
____________________________________
Just Imagine.

http://www.imajinarts.com

[sub]

 

[dmunson]

Sorry, I work in IE. I don't think NS or Safari allow nextSibling to get the submenu. This one passes the name
I think this will work in all.

I don't have any other browsers on this computer to test, but you can probably use parent or parentelement to get the parent of the +/-, then use get elementsByTagName to get the 2 DIV's

<script language="javascript">
function HideShowSubmenu(el, submenuname){
        var submenu = document.getElementById(submenuname);
        if (submenu.currentStyle.visibility == "hidden"){
            el.innerText="-";
            submenu.style.visibility="";}
        else{
            el.innerText="+";
            submenu.style.visibility="hidden";}
}
</script>
<div id="menu1" name="menu1">
    <span style="CURSOR: hand" onclick="HideShowSubmenu(this, 'submenu1')" id="togglelink1" name="togglelink1">+</span> 
     Menu Item 1
    <div id="submenu1" name="submenu1" style="PADDING-LEFT:30px; VISIBILITY:hidden; POSITION:relative">
        link1<br>
        link2<br>
        link3<br>
        link4<br>
    </div>
</div>

 

[dmunson]

I don't think any of the others allow you to use nextSibling.
I don't have any of the other browsers to test this on right now, but this might work. It passes the submenu name instead of using nextsibling.

<script language="javascript">
function HideShowSubmenu(el, submenuname){
        var submenu = document.getElementById(submenuname);
        if (submenu.currentStyle.visibility == "hidden"){
            el.innerText="-";
            submenu.style.visibility="";}
        else{
            el.innerText="+";
            submenu.style.visibility="hidden";}
}
</script>
<div id="menu1" name="menu1">
    <span style="CURSOR: hand" onclick="HideShowSubmenu(this, 'submenu1')" id="togglelink1" name="togglelink1">+</span> 
     Menu Item 1
    <div id="submenu1" name="submenu1" style="PADDING-LEFT:30px; VISIBILITY:hidden; POSITION:relative">
        link1<br>
        link2<br>
        link3<br>
        link4<br>
    </div>
</div>

Sorry about that, I have the luxury of only having to support IE for most of my work.