Welcome to WebmasterWorld Guest from 54.198.96.198

Forum Moderators: open

Message Too Old, No Replies

Help making expandable menu

     
12:44 am on Jun 21, 2006 (gmt 0)

New User

10+ Year Member

joined:May 9, 2006
posts:9
votes: 0


Can someone help me please? I'm looking for a script or instructions on how to make my links expand and collapse. For example, if I have links that start off like this.......

Entree
Deserts
Drinks

........I want them to look like this when I click on the link.

Entree
Chicken
Steak
Fish

Deserts
Pie
Ice cream
Cake

Drinks
Water
Soda
Wine

And when I click on the link or arrow again they collapse again.
Appreciate any help you can give me. Thanks so much!

6:32 pm on June 23, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:681
votes: 0


Do you want all the links to expand/collapse at once, or one at a time, depending on which category the user clicks?
6:05 am on June 24, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:May 24, 2006
posts:93
votes: 0


If you are going to use javascript for you menu system, I'd suggest that you ensure that they are all fully expanded by default. This will allow users full access to your site, even if they have javascript disabled.

I've knocked up a quick demo. This uses the onload function to add the event handlers to the menus (and to hide the menus).

Each menu needs to be placed inside a div with the classname of "menu". The part you want to appear, or dissappear needs to go into a div with the classname of "inner". (You can put anything you want in here. It doesn't have to be just Anchors.)

The part that is going to open and close the menu needs to be inside the "STRONG" tags. You could choose another tag (such as H4) if you prefer.

This is purely a functionality demo (it will allow menus within menus), so you'll also need to do a bit of work with CSS to get it to look nice.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<style type="text/css">
.menu A
{text-decoration:none;
}
</style>

<script type="text/javascript">

window.onload=function()
{
var divs=document.getElementsByTagName("DIV");
for(n=0;n<divs.length;n++)
{if (divs[n].className.toUpperCase() =="MENU")
for(m=0;m<divs[n].childNodes.length;m++)
{if ((divs[n].childNodes[m].className)&&
(divs[n].childNodes[m].className.toUpperCase()=="INNER"))
divs[n].childNodes[m].style.display="none";


if ((divs[n].childNodes[m].tagName)&&
(divs[n].childNodes[m].tagName.toUpperCase()=="STRONG"))
{ divs[n].childNodes[m].onclick=toggleMenu;
divs[n].childNodes[m].style.cursor="pointer";
}
}
}
}


function toggleMenu()
{
var menu=this.parentNode;


for(n=0;n<menu.childNodes.length;n++)
{ if ((menu.childNodes[n].className)&&
(menu.childNodes[n].className.toUpperCase()=="INNER"))
{if (menu.childNodes[n].style.display=="none")
menu.childNodes[n].style.display=""
else
menu.childNodes[n].style.display="none";
}
}

}

</script>

<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>

<div class="menu">
<strong>Entree</strong>
<div class="inner">
<a href="chicken.htm">Chicken</a><br>
<a href="steak.htm">Steak</a><br>
<a href="fish">Fish</a><br>
</div>
</div>

<div class="menu">
<strong>Deserts</strong>
<div class="inner">
<a href="Pie.htm">Pie</a><br>
<a href="IceCream.htm">Ice Cream</a><br>
<a href="Cake">Cake</a><br>
</div>
</div>

<div class="menu">
<strong>Drinks</strong>
<div class="inner">
<a href="Water">Water</a><br>
<a href="Soda">Soda</a><br>
<a href="Wine">Wine</a><br>
</div>
</div>
</body>
</html>

4:35 am on July 3, 2006 (gmt 0)

New User

10+ Year Member

joined:July 2, 2006
posts:2
votes: 0


For the code you provided, could you plz expand upon it so that when a menu item is clicked on, all menu items are closed and then the menu item clicked on is opened.

Thx in advance.

3:03 pm on July 3, 2006 (gmt 0)

New User

10+ Year Member

joined:May 9, 2006
posts:9
votes: 0


Texmex
Thanks so much for the code! It is exactly what I wanted. I'm so impressed!I want to put this inside of a table. (I'm using Dreamweaver) Also I need to put an arrow next to the text that would faced downward when clicked or have the text underlined or something that will show the user that there is something underneath the main heading or "strong" tag. Do you know what I mean?
Thanks again.
8:19 pm on July 3, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:May 24, 2006
posts:93
votes: 0


OK.
To overcome the arrow thing, I created a couple of gifs (down.gif, and left.gif). These are mainly blank but just have a small arrow on the right hand side of the image. (one pointing down, and one pointing left). These are both 79px wide by 18px high. The css then uses these images for the background of the menu heading. (hence the size)

I've also rewritten the code a bit to put a lot more of the functionality into CSS. This simplifies the javascript quite a bit.

I've also modified the toggle function so that it closes any currently open menu before opening another. (at Autumns request). Be aware, however that this comes at the expense of having menues within menus (in this particular implementation). If you don't want this behaviour you can simply remove the offending section.

The HTML hasn't changed at all. You still create all you menues using the same methods in my previous effort, but during runtime, the className of the menu's get changed to menuOpen or menuClosed. This allows CSS to take care of all the display features.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<style type="text/css">
.menu A, .menuOpen A
{text-decoration:none;
color:blue;
font-weight:bold;
margin-left:5px;
}

.menuOpen strong
{display:block;
width:79px;
height:18px;
background-image:url("left.gif");
color:navy;
cursor:pointer;
}

.menuClosed strong
{display:block;
width:79px;
height:18px;
background-image:url("down.gif");
color:navy;
cursor:pointer;
}

.menuClosed .inner
{display:none;
}

</style>

<script type="text/javascript">

window.onload=function()
{
var divs=document.getElementsByTagName("DIV");
for(n=0;n<divs.length;n++)
if (divs[n].className.toUpperCase() =="MENU")
{divs[n].className="menuClosed";
var openers=divs[n].getElementsByTagName("STRONG");
openers[0].onclick=toggleMenu;
}
}

function toggleMenu()
{
//First bit closes any currently open menu
//Remove down to ***** to allow multiple menus to be open
var menus=document.getElementsByTagName("DIV");
for(n=0;n<menus.length;n++)
if((menus[n].className.toUpperCase()=="MENUOPEN")&&
(menus[n]!=this.parentNode))
menus[n].className="menuClosed";
//*************************************

//This next bit actually does the opening
var menu=this.parentNode;
if (menu.className.toUpperCase()=="MENUCLOSED")
menu.className="MenuOpen";
else
menu.className="MenuClosed";
}

</script>

<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
</head>
<body>
<div class="menu">
<strong>Entree</strong>
<div class="inner">
<a href="chicken.htm">Chicken</a><br>
<a href="steak.htm">Steak</a><br>
<a href="fish">Fish</a><br>
</div>
</div>

<div class="menu">
<strong>Deserts</strong>
<div class="inner">
<a href="Pie.htm">Pie</a><br>
<a href="IceCream.htm">Ice Cream</a><br>
<a href="Cake">Cake</a><br>
</div>
</div>

<div class="menu">
<strong>Drinks</strong>
<div class="inner">
<a href="Water">Water</a><br>
<a href="Soda">Soda</a><br>
<a href="Wine">Wine</a><br>
</div>
</div>
</body>
</html>

11:47 pm on July 11, 2006 (gmt 0)

New User

10+ Year Member

joined:May 9, 2006
posts:9
votes: 0


Thanks Texmex!
Everything worked great. Exactly like I wanted! You're awesome!The menu was just a sample of what I wanted the script to do. Now I am trying to use the same code in an actual document I've created, but I do not get the same results. Do you think it's because I am using a table? I will continue to play around with it and hopefully I'll get the results I wanted. Any advice? Thanks.
3:23 pm on July 12, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:May 24, 2006
posts:93
votes: 0


. Now I am trying to use the same code in an actual document I've created, but I do not get the same results. Do you think it's because I am using a table?
Can't say really, you'll have to post the code that you are using. Perhaps we can spot the problem.
4:34 pm on July 17, 2006 (gmt 0)

New User

10+ Year Member

joined:May 9, 2006
posts:9
votes: 0


Texmex,
Here's a sample of the table I am using. I put the table at the end of the menu. As you can see, the menu work part works great, but the table does not. What am I'm doing wrong? Thanks for your help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<style type="text/css">
.menu A, .menuOpen A
{text-decoration:none;
color:blue;
font-weight:bold;
margin-left:5px;
}

.menuOpen strong
{display:block;
width:79px;
height:18px;
background-image:url("left.gif");
color:navy;
cursor:pointer;
}

.menuClosed strong
{display:block;
width:79px;
height:18px;
background-image:url("down.gif");
color:navy;
cursor:pointer;
}

.menuClosed .inner
{display:none;
}

</style>

<script type="text/javascript">

window.onload=function()
{
var divs=document.getElementsByTagName("DIV");
for(n=0;n<divs.length;n++)
if (divs[n].className.toUpperCase() =="MENU")
{divs[n].className="menuClosed";
var openers=divs[n].getElementsByTagName("STRONG");
openers[0].onclick=toggleMenu;
}
}

function toggleMenu()
{
//First bit closes any currently open menu
//Remove down to ***** to allow multiple menus to be open

//*************************************

//This next bit actually does the opening
var menu=this.parentNode;
if (menu.className.toUpperCase()=="MENUCLOSED")
menu.className="MenuOpen";
else
menu.className="MenuClosed";
}

</script>

<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
</head>
<body>
<div class="menu">
<strong>Entree</strong>
<div class="inner">
<a href="chicken.htm">Chicken</a><br>
<a href="steak.htm">Steak</a><br>
<a href="fish">Fish</a><br>
</div>
</div>

<div class="menu">
<strong>Deserts</strong>
<div class="inner">
<a href="Pie.htm">Pie</a><br>
<a href="IceCream.htm">Ice Cream</a><br>
<a href="Cake">Cake</a><br>
</div>
</div>

<div class="menu">
<strong>Drinks</strong>
<div class="inner">
<a href="Water">Water</a><br>
<a href="Soda">Soda</a><br>
<a href="Wine">Wine</a><br>
</div>
</div>

<table width="75%" border"1">
<div class="menu">
<tr>
<th colspan="3"scope="col">Office Directory</th>
</tr>
<tr>
<div class="menu">
<td width="35%"scope="row"><strong>Personnel</strong><br> </td>
<td width="17"%>Suite 123</td>
<td width="47%">555-237-1212</td>
</div></tr>
<tr>
<td scope="row"><div class="inner"></div>
<div class="inner"><span class="inner"><a="George Hall">George Hall</a><br>
<a="James Austin">James Austin </a><br>
<a="Sheila Everett">Sheila Everett</a></span></div></td>
<div class="menu">

<td>&nbsp;</td>
<td width="1%">&nbsp;</td>
</tr>
<tr>

<div class="menu">
<td scope="row"><strong class="menu">Budget</strong></td>
<td>Suite 125</td>
<td>555-237-1279</td>
</div>
</tr>
<tr>
<td scope="row"><div class="inner"></div>
<span class="inner"><a="Sarah Miller">Sarah Miller</a><br>
<a="Thomas Bender">Thomas Bender</a></span></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>

<div class="menu">
<td scope="row"><strong>Contracts</strong></td>
<td> Suite 127</td>
<td> 555-237-1283</td>
</div>
</tr>
<tr>
<td scope="row"><div class="inner"></div>
<span class="inner"><a="Jeffrey Dabney">Jeffrey Dabney</a><br>
<a="Chris Waters">Chris Waters</a></span></td>

<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<br>
</body>
</html>