Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How To Make Expanding Navigation Menus 1

Status
Not open for further replies.

ro88o

Programmer
Jun 25, 2005
24
GB
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
How do I do this in Javascript (or what's the easiest way to acheive it) ?

TIA, ro88o
 
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..."
 
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
 
Here is a really simple example. Has no formatting but will give you an idea of how to do it.
Code:
<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>
 
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
 
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
Code:
<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>
 
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.

Code:
<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.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top